SVGPlus Wordpress Plugin - Rating, Reviews, Demo & Download

SVGPlus Wordpress Plugin - Rating, Reviews, Demo & Download
No ratings yet
Free
Follow for free plugins, new theme releases and theme news

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

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

No screenshots provided


Reviews & Comments