== 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.7
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. **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.

3. **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.

4. **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.

5. **Centralized Settings for Consistency and Control**: Access a dedicated settings page (`Settings > SVGPlus`) in the WordPress admin dashboard to configure plugin options. Enable animations to add dynamic elements to your designs, and add global custom CSS to style all SVGs managed by SVGPlus, maintaining a consistent design aesthetic across your site.

6. **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 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.

#### Using Shortcodes

1. **Add Shortcode Widget:** In Elementor, drag the **Shortcode** widget to your desired location.

2. **Insert Shortcode:** Enter the shortcode `[svgplus id="123"]`, replacing `123` with the attachment ID of your SVG.

3. **Customize Shortcode (Optional):** Add additional parameters such as custom classes, alt text, and lazy loading:
   ```[svgplus id="123" class="custom-svg-class" alt="Description of SVG" lazy="true"]```

### Configuring Plugin Settings

1. **Access Settings:** Navigate to `Settings > SVGPlus` in the WordPress admin dashboard.

2. **Enable Animations:** Toggle the option to allow animated SVGs across your site.

3. **Add Custom CSS:** Input any custom CSS to style your SVGs globally. This CSS will be applied to all SVGs managed by SVGPlus.

4. **Save Changes:** Click the **Save Changes** button to apply your settings.

## Screenshots

1. **Uploading SVGs in the Media Library

3. **SVGPlus Settings Page:**
   ![Settings Page](screenshots/settings-page.png)

4. **Custom CSS Application:**
   ![Custom CSS](screenshots/custom-css.png)

## Changelog

= 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 <animate>, <animateTransform>, 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.

== 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"]