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

- **Secure SVG Uploads**
  - **SVG Upload Support**: Easily upload SVG files directly to your WordPress media library.
  - **Automatic Sanitization**: Every SVG upload is automatically sanitized to remove potentially harmful code, ensuring your site remains secure.

- **Enhanced Elementor Compatibility**
  - **Seamless Integration**: Utilize SVGs within Elementor's native widgets such as Image, Icon, Image Box, and Icon Box without the need for a dedicated widget.
  - **Custom Classes for Styling**: SVGPlus adds specific classes to SVG images, allowing for enhanced CSS styling and consistency across your Elementor designs.

- **Shortcode Support**
  - **Flexible Embedding**: Embed SVGs anywhere on your site using the `[svgplus id="123"]` shortcode, where `123` is the attachment ID of your SVG.
  - **Customization Options**: Add custom classes, alt text, and enable lazy loading directly within the shortcode for greater control over SVG presentation.

- **Performance Optimizations**
  - **Lazy Loading**: Improve your site's load times by enabling lazy loading for SVG images, ensuring they load only when they enter the viewport.
  - **Clean and Optimized SVGs**: Sanitized SVGs are stripped of unnecessary code, reducing file sizes and enhancing performance.

- **Centralized Settings**
  - **Settings Page**: Access a dedicated settings page (`Settings > SVGPlus`) in the WordPress admin dashboard to configure plugin options.
  - **Enable Animations**: Toggle support for animated SVGs to add dynamic elements to your designs.
  - **Custom CSS**: Add global custom CSS to style all SVGs managed by SVGPlus, ensuring a consistent look and feel.

- **SEO and Accessibility Enhancements**
  - **Alt Text Support**: Easily add descriptive alt text to SVGs, improving both SEO and accessibility.
  - **Optimized for Search Engines**: Clean SVGs contribute to better SEO practices by reducing file sizes and ensuring optimized graphics.

- **Developer-Friendly**
  - **WordPress Coding Standards**: Adheres to WordPress coding standards, ensuring compatibility and ease of maintenance.
  - **Extensible Architecture**: Designed with extensibility in mind, allowing developers to build upon or customize functionalities as needed.

### Benefits

- **Enhanced Security**: Protect your website from malicious SVG uploads with automatic sanitization.
- **Improved Performance**: Optimize page load times with lazy loading and clean SVG files.
- **Design Flexibility**: Leverage the scalability and crispness of SVGs within Elementor's powerful design tools.
- **Ease of Use**: Simplify SVG management with intuitive settings and shortcode support.
- **Consistency and Control**: Maintain a consistent design aesthetic across your site with centralized settings and custom CSS options.

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

### Embedding SVGs in Elementor

#### Using Elementor’s Native Widgets

1. **Edit with Elementor:**
   - Open the page or post you want to edit with Elementor.

2. **Insert SVG:**
   - Drag and drop an **Image**, **Icon**, **Image Box**, or **Icon Box** widget into your layout.
   - Select your SVG file from the media library.

3. **Customize:**
   - Use Elementor’s styling options to adjust the appearance of your SVG as needed.

#### 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 or enable lazy loading:
     ```html
     [svgplus id="123" class="custom-svg-class" alt="Description of SVG"]
     ```

### 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

2. **Embedding SVGs Using Elementor’s Image Widget:**
   ![Elementor Image Widget](screenshots/elementor-image-widget.png)

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

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

## Changelog

= 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:
  - SVG upload support.
  - Automatic SVG sanitization.
  - Shortcode support for embedding SVGs.
  - Settings page for configuration.

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