STLY.dev

STFQ SVG Upload

STFQ SVG Upload extends the functionality of the WordPress media library by enabling users to upload SVG (Scalable Vector Graphics) files securely. With SVG becoming increasingly popular for web graphics due to its scalability and flexibility, this plugin ensures that WordPress users can incorporate SVG images into their websites without compromising security.

Key Features:

  1. SVG Upload Support: Allows users to upload SVG files directly to the WordPress media library, just like other supported image formats.
  2. Sanitization: Implements a custom sanitization process to ensure that uploaded SVG files are safe for use on the website. The sanitization logic removes potentially harmful elements and attributes from the SVG content, mitigating security risks associated with SVG files.
  3. Event Handler Removal: Eliminates event handler attributes (e.g., onload, onclick) from SVG elements to prevent any unintended execution of scripts embedded within SVG files.
  4. Script Tag Removal: Removes all <script> elements from the SVG content, preventing the execution of any embedded scripts and enhancing website security.
  5. Customizable: Offers flexibility for developers to customize the sanitization process based on specific security requirements or preferences.

By incorporating the “STFQ SVG Upload” plugin into their WordPress websites, users can leverage the power of SVG graphics while maintaining robust security measures. The plugin ensures that SVG files are sanitized upon upload, safeguarding websites from potential security vulnerabilities associated with SVG content.

View Project on GitHub

How to use STFQ SVG Upload

To use the “STFQ SVG Upload” plugin in your WordPress website, follow these steps:

  1. Installation:
    • Download the plugin zip file.
    • Go to your WordPress dashboard.
    • Navigate to "Plugins" > "Add New".
    • Click on the “Upload Plugin” button and select the downloaded zip file.
    • Activate the plugin.
  2. Upload SVG Files:
    • Once activated, the plugin allows you to upload SVG files like any other media file.
    • Navigate to “Media” > “Add New” in your WordPress admin dashboard.
    • Click on the “Select Files” button and choose the SVG file(s) you want to upload.
    • Alternatively, you can drag and drop SVG files directly into the media uploader.
  3. Sanitization Process:
    • Upon uploading an SVG file, the plugin automatically sanitizes the file to remove potentially harmful elements and attributes.
    • The sanitization process ensures that the SVG file is safe for use on your website.
  4. Insert SVG into Content:
    • After uploading and sanitizing the SVG file, you can insert it into your posts or pages using the WordPress editor.
    • Navigate to the post or page where you want to insert the SVG file.
    • Click on the “Add Block” button and search for “Image” or “Media & Text” block.
    • Choose the SVG file from the media library and insert it into your content.
  5. Customization (Optional):
    • If you have specific sanitization requirements, you can customize the sanitization logic by modifying the plugin code.
    • You can further enhance the plugin’s functionality based on your website’s needs and security considerations.

By following these steps, you can effectively use the “STFQ SVG Upload” plugin to securely upload and use SVG files in your WordPress website, enhancing your site’s visual appeal and flexibility while maintaining security standards.