SVGPlus Wordpress Plugin - Rating, Reviews, Demo & Download
Plugin 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, where123
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.
- Flexible Embedding: Embed SVGs anywhere on your site using the
-
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.
- Settings Page: Access a dedicated settings page (
-
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.
Usage
Uploading and Managing SVGs
-
Upload SVGs:
- Go to the WordPress media library (
Media > Add New
) and upload your SVG files as you would with any other media type.
- Go to the WordPress media library (
-
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
-
Edit with Elementor:
- Open the page or post you want to edit with Elementor.
-
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.
-
Customize:
- Use Elementor’s styling options to adjust the appearance of your SVG as needed.
Using Shortcodes
-
Add Shortcode Widget:
- In Elementor, drag the Shortcode widget to your desired location.
-
Insert Shortcode:
- Enter the shortcode
[svgplus id="123"]
, replacing123
with the attachment ID of your SVG.
- Enter the shortcode
-
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"]
- Add additional parameters such as custom classes or enable lazy loading:
Configuring Plugin Settings
-
Access Settings:
- Navigate to
Settings > SVGPlus
in the WordPress admin dashboard.
- Navigate to
-
Enable Animations:
- Toggle the option to allow animated SVGs across your site.
-
Add Custom CSS:
- Input any custom CSS to style your SVGs globally. This CSS will be applied to all SVGs managed by SVGPlus.
-
Save Changes:
- Click the Save Changes button to apply your settings.
Screenshots
No screenshots provided