SVG Support

Created by: Benbodhi

Rating:

Downloaded: 9454k times

#mime-type #safe-svg #sanitization #svg #vector

Code

Upload SVG files to your media library securely, with built-in sanitization and advanced features for styling and animation.

SVG Support goes beyond just enabling SVG uploads. It offers powerful features that make working with SVGs easier and more flexible.

Scalable Vector Graphics (SVG) are a staple in modern web design, allowing you to embed images with small file sizes that scale perfectly at any size without losing quality. However, styling and animating SVGs can be challenging when using standard methods. SVG Support simplifies this by allowing you to render your SVGs inline, enabling direct styling and animation using CSS and JavaScript.

This plugin provides:

SVG Upload Support: Easily upload SVG files to your media library.
Automatic Sanitization: All SVG uploads are sanitized by default to ensure security.
Minification Options: Reduce SVG file sizes with optional minification.
Inline Rendering: Render SVG code inline by adding the "style-svg" class to your images, making the elements within your SVGs directly targetable for styling and animation.
Role-Based Upload Control: Restrict SVG upload capabilities to specific user roles.
Custom Target Class: Define a custom CSS class for targeting SVGs, which can be applied to outer elements for greater flexibility.

Features

Full SVG support in your media library
Automatic sanitization for secure SVG uploads
Optional minification for smaller SVG file sizes
Role-based upload restrictions
Inline SVG rendering for easy styling and animation
Custom target class support for flexible SVG handling
Simple and intuitive settings page with clear instructions
Extremely Simple to Use – Simplifies complex SVG file handling

Usage

Installation: Install and activate SVG Support (this plugin) through your WordPress dashboard.
Basic Usage: Once activated, you can upload SVG files to your media library like any other image file.
Admin Settings:
- Navigate to “Settings > SVG Support” in your WordPress admin dashboard.
- Restrict SVG file uploads to specific user roles, such as Administrators.
Advanced Mode:
- If you only need to upload SVG files as static images, you don’t need to enable “Advanced Mode”. This keeps the plugin lightweight by not enqueuing unnecessary scripts.
- For Advanced Use: Enable “Advanced Mode” to access additional features such as minification and inline rendering.
Inline SVG Rendering:
- With Advanced Mode enabled, you can embed SVG images by adding the "style-svg" class (or a custom class you’ve defined) to your <img> tags.
- Example:
  <img class="style-svg" alt="alt-text" src="image-source.svg" />
  or
  <img class="your-custom-class" alt="alt-text" src="image-source.svg" />
- The plugin dynamically replaces the <img> element with the actual SVG code, making the SVG’s internal elements targetable by CSS and JavaScript.
Custom Target Classes:
- You can set a custom class to target for inline rendering.
- You can add the target class to outer elements if you cannot directly add it to the <img> tag. The plugin will traverse the element’s children to find and replace the SVG.
Auto-Class Insertion (Classic Editor):
- Enable the setting to automatically add your target class to SVG images when inserting them into posts or pages. This also removes unnecessary attributes.
Inline Rendering:
- Since version 2.3.11, you can force all SVG files sitewide to be rendered inline with a single checkbox (use with caution).
- You can choose between the minified or expanded version of the JS file for inline rendering.
- You can choose between the jQuery or vanilla JS file for inline rendering.
Featured Images:
- If you save a post/page with an SVG as the featured image, a checkbox will appear in the featured image meta box to allow you to render the SVG inline (only available if Advanced Mode is active).

Important: If your SVG isn’t displaying correctly, it might be due to 0 height and width. Set your SVG’s dimensions in your CSS to ensure proper display.

For any issues, please use the support tab, and I will do my best to assist you quickly.

Spin up a test site

With a single click, you can spin up a completely free test site to test SVG Support using TasteWP! No sign up, no cards, nothing! How cool is that? Give it a go:
Click Here to spin up a test site in seconds

Security

Uploading files, including SVGs, comes with potential risks. SVG Support provides several features to help mitigate these risks and ensure secure handling of SVG files:

Sanitization by default: Starting from version 2.5.8, all SVG uploads are sanitized by default to remove any potentially malicious code.
Role-Based Upload Restrictions: You can restrict SVG uploads to specific user roles, ensuring only trusted users can upload these files.
Optional Bypass of Sanitization: You have the option to allow certain roles to bypass the sanitization process, though this should be used with caution.

Important: Only allow users you trust to upload SVG files. By default, anyone with Media Library access or the upload_files capability (e.g., Administrators, Authors, Editors) can upload SVGs. Remember, SVG files are XML-based, meaning they can contain malicious code if not properly sanitized. Always configure your settings to balance functionality with security.