manifest / media / jdd-svg-support

JDD SVG Support

Adds support for inline SVG into WordPress content. Enables styling with CSS.

by Jackie D'Elia · github.com/jdelia/jdd-svg-support · website

★ 8stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/jdelia/jdd-svg-support/archive/refs/heads/master.zip

No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.

Readme github.com/jdelia/jdd-svg-support ↗

JDD SVG Support Plugin

JDD SVG Support Plugin is a simple plugin that embeds SVG code into your WordPress content via a shortcode so that you can style and/or animate with CSS.

BETA VERSION

Getting Started

To begin using this plugin, choose one of the following options to get started:

Download the latest release on Github
Clone the repo: git clone https://github.com/jdelia/jdd-svg-support.git
Fork the repo

Why I wrote this plugin

For details on why I wrote this plugin, read my post: Using SVG Animation in WordPress

How to Use

Upload your SVG file(s) to your child theme images folder. If you don't have an images folder, just create one and copy the files into the folder. The shortcode has 3 attributes; the filename, the class (optional) and the path to the folder (optional).

In your content, use the shortcode:

Format:

[insert-svg-code file="name of file without extension" class="classname"]

The only required attribute is the filename.

If you do not specify a class="" attribute, a default class of inline-svg is added to a <div> tag. You can add more than one class if desired.

If you do not specify a path, the default is used which is the images folder in the child theme root.

Example: [insert-svg-code file="svg-logo" class="logo svg-file"]

You can use the shortcode_atts_{$shortcode} filter to programmatically change the defaults.

Example:

add_filter( 'shortcode_atts_insert-svg-code', 'update_svg_defaults', 10, 4);
function update_svg_defaults( $merge_attributes, $defaults, $attributes, $shortcode ) {

   $defaults['path'] = '  << insert your absolute path to folder with trailing slash >>  ';

   $merge_attributes = array_merge( $defaults, $attributes );

   return $merge_attributes;
}