=== SVGPlus === Contributors: Rizonepress Tags: svg, vector graphics, media upload, shortcode, sanitization Requires at least: 5.0 Tested up to: 6.6 Stable tag: 1.0.13 License: GPLv2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Home Page: https://rizonepress.com Short Description: Upload, sanitize, and display SVG files securely in WordPress with Elementor integration, shortcode support, and performance optimizations. == Description == **SVGPlus** is a comprehensive WordPress plugin designed to empower your website with secure and efficient handling of SVG (Scalable Vector Graphics) files. Whether you're a designer, developer, or site administrator, SVGPlus offers a robust solution for managing SVG assets, ensuring they are safely uploaded, sanitized, and seamlessly integrated into your Elementor-powered designs. ### Key Features 1. **Secure SVG Uploads with Automatic Sanitization**: Easily upload SVG files directly to your WordPress media library, with automatic sanitization to remove potentially harmful code. This feature protects your website from malicious SVG uploads, ensuring enhanced security. 2. **Role-Based Upload Permissions**: Control which user roles are permitted to upload SVG files. Administrators can select specific roles (e.g., Editor, Author) that are allowed to upload SVGs, enhancing security by limiting access. 3. **Option to Remove Width and Height Attributes**: Choose to automatically remove width and height attributes from SVG files upon upload. This feature helps in making SVGs responsive and adaptable to different screen sizes. 4. **Enhanced Elementor Compatibility and Design Flexibility**: Seamlessly integrate SVGs within Elementor's native widgets like Image, Icon, Image Box, and Icon Box without needing a dedicated widget. Leverage the scalability and crispness of SVGs within Elementor's powerful design tools, and add specific classes for enhanced CSS styling and consistency. 5. **Shortcode Support for Flexible Embedding and Ease of Use**: Embed SVGs anywhere on your site using the `[svgplus id="123"]` shortcode, where `123` is the attachment ID of your SVG. Customize your SVGs by adding custom classes, alt text, and enabling lazy loading directly within the shortcode, simplifying SVG management and providing greater control over their presentation. 6. **Performance Optimizations for Improved Load Times**: Optimize your site's performance with lazy loading for SVG images, ensuring they load only when they enter the viewport. Sanitized SVGs are stripped of unnecessary code, reducing file sizes and enhancing page load times. 7. **Centralized Settings for Consistency and Control**: Access a dedicated settings page (`Settings > SVGPlus`) in the WordPress admin dashboard to configure plugin options. Enable animations, control upload permissions, remove width and height attributes, and add global custom CSS to style all SVGs managed by SVGPlus, maintaining a consistent design aesthetic across your site. 8. **SEO and Accessibility Enhancements**: Easily add descriptive alt text to SVGs to improve both SEO and accessibility. Clean and optimized SVGs contribute to better SEO practices by reducing file sizes and ensuring your graphics are search-engine friendly. == Installation == 1. **Upload the Plugin:** - Upload the `svgplus` folder to the `/wp-content/plugins/` directory. 2. **Activate the Plugin:** - Activate the plugin through the 'Plugins' menu in WordPress. 3. **Configure Settings:** - Navigate to `Settings > SVGPlus` in the WordPress admin dashboard to configure your SVG preferences, such as enabling animations, controlling upload permissions, removing width and height attributes, and adding custom CSS. 4. **Use SVGs in Elementor:** - **Via Native Widgets:** Insert SVGs using Elementor’s standard widgets like Image, Icon, Image Box, or Icon Box by selecting your SVG files from the media library. - **Via Shortcodes:** Use the `[svgplus id="123"]` shortcode within Elementor’s Shortcode widget to embed SVGs with additional customization options. ## Usage ### Uploading and Managing SVGs 1. **Upload SVGs:** Go to the WordPress media library (`Media > Add New`) and upload your SVG files as you would with any other media type. 2. **Sanitized SVGs:** SVGPlus automatically sanitizes your SVG uploads to ensure they are safe and optimized for use on your website. ### Configuring Plugin Settings 1. **Access Settings:** Navigate to `Settings > SVGPlus` in the WordPress admin dashboard. 2. **Allow SVG Animations:** Toggle the option to allow animated SVGs across your site. 3. **Remove Width and Height Attributes:** Enable this option to remove width and height attributes from SVG files during upload, making them more responsive. 4. **Select Allowed User Roles:** Choose which user roles are permitted to upload SVG files to your site. 5. **Add Custom CSS:** Input any custom CSS to style your SVGs globally. This CSS will be applied to all SVGs managed by SVGPlus. 6. **Save Changes:** Click the **Save Changes** button to apply your settings. ## Changelog = 1.0.12 = - Switched to using the `enshrined/svg-sanitize` library for SVG sanitization. - Ensured "Allow SVG Animations" setting functions correctly with the new sanitizer. - Default allowed roles for SVG uploads are Administrator, Editor, and Author. - Confirmed custom CSS settings are applied correctly to SVG images. = 1.0.8 = * Comprehensive SVG Element Support: Expanded the list of allowed SVG elements and attributes in the sanitizer to include a complete set of SVG elements, including all filter elements and animation elements. This ensures compatibility with a wider range of SVG files and features. * Enhanced Animation Support: Completed the inclusion of all animation elements and their attributes, allowing for full support of SVG animations when enabled in the settings. * Improved Sanitization Logic: Updated the SVG sanitizer to support advanced SVG features like filters and animations while maintaining strict security measures. The sanitizer now properly handles a more extensive range of elements and attributes. * Security Enhancements: Ensured that the expanded support does not compromise security by maintaining robust sanitization and validation of SVG content. = 1.0.7 = * Shortcode Enhancement: Added support for the lazy attribute in the shortcode to control lazy loading of SVGs. Users can now enable or disable lazy loading per SVG by setting lazy="true" or lazy="false" in the shortcode. * Global Custom CSS Application: Modified the plugin to enqueue custom CSS globally from the settings page. This ensures that custom styles are applied consistently to all SVGs without needing to append CSS in each shortcode instance. * Conditional Animation Support: Updated the SVG sanitization process to conditionally allow animation elements and attributes based on the 'Allow SVG Animations' setting in the plugin settings. When enabled, the sanitizer permits elements like , , and their associated attributes. * Improved Sanitization Logic: Enhanced the SVG sanitizer to dynamically adjust allowed elements and attributes based on settings, improving security and flexibility. * Code Optimizations: Refactored code for better performance and maintainability, including optimizing the shortcode rendering process and reducing redundant code. * Documentation Updates: Updated the readme file and usage instructions to reflect the new features and provide clearer guidance on how to use the plugin. = 1.0.6 = * Security Enhancements: Escaped output functions to prevent security vulnerabilities. * Filesystem Operations: Replaced `file_get_contents()` with `WP_Filesystem::get_contents()` and Replaced `file_put_contents()` with `WP_Filesystem::put_contents()`. = 1.0.3 = * Refined plugin to remove the dedicated Elementor widget while enhancing SVG upload compatibility with Elementor's native widgets. * Improved sanitization process for SVG uploads. * Enhanced shortcode functionality with additional customization options. * Updated settings page for better user experience. * Fixed minor bugs and improved performance. = 1.0.2 = * Added lazy loading support for SVG images. * Introduced custom CSS options in the settings page. * Enhanced compatibility with the latest WordPress and Elementor versions. = 1.0.1 = * Initial release with core functionalities. == Upgrade Notice == = 1.0.12 = Please update to this version to benefit from improved SVG sanitization and functionality enhancements. == License == This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; version 2 of the License. == Frequently Asked Questions == = How do I embed an SVG using a shortcode? = Use the `[svgplus id="123"]` shortcode in your posts, pages, or within Elementor’s Shortcode widget. Replace `123` with the attachment ID of your SVG. You can also add optional parameters like `class` and `alt`: ```html [svgplus id="123" class="custom-svg-class" alt="Description of SVG"]