WPMazic WPMazic

SVG File Upload

Product: Admin Framework Pro

The SVG File Upload module enables secure SVG and SVGZ uploads to your WordPress media library. It validates files, sanitizes code, and applies strict security checks to ensure only safe vector graphics are allowed—giving you the flexibility of SVGs without the risks.

How to use

To enable the SVG File Upload Module:

  1. Click on the “Images & Media” category
  2. Search or scroll to locate the SVG File Upload Module
  3. Click on the switch to enable

What’s next?

This module enables secure SVG file uploads to your WordPress media library. Here’s what you need to know:

1. Supported File Types

  • .svg (SVG vector images)
  • .svgz (Compressed SVG files)

2. Security Features

The module includes multiple security measures to ensure safe SVG uploads:

File Validation

  • Verifies the file is a valid SVG
  • Limits file size to 1MB
  • Checks user upload permissions

Content Sanitization

Removes or neutralizes potentially dangerous elements:

  • Script tags and JavaScript code
  • Event handlers (onclick, onload, etc.)
  • External references
  • ForeignObject elements
  • Data URIs (except for embedded images)
  • Potentially malicious attributes

3. Allowed SVG Elements

The module allows these standard SVG elements:

  • Basic shapes: svg, g, path, rect, circle, ellipse, line, polyline, polygon
  • Text elements: text, tspan, tref, textPath
  • Structural elements: defs, desc, title, symbol, clipPath, mask, pattern, filter
  • Gradients: linearGradient, radialGradient, stop
  • Other: marker, metadata, view, switch, style

4. Customization

You can customize the module’s behavior using filters:

Add additional allowed SVG tags:

<code>add_filter('WPMazic/svg-upload/allowed_tags', function($tags) {
    $tags[] = 'custom-element'; // Add custom SVG elements
    return $tags;
});

Modify maximum file size (in bytes):

<code>add_filter('WPMazic/svg-upload/max_file_size', function() {
    return 2 * 1024 * 1024; // 2MB
});

Disable specific security checks (not recommended):

<code>add_filter('WPMazic/svg-upload/disable_checks', '__return_true');

5. Best Practices

  1. Regular Updates: Keep the module updated for the latest security patches
  2. User Permissions: Only allow trusted users to upload SVG files
  3. Content Review: Periodically review uploaded SVGs for any suspicious content
  4. Backup: Maintain regular backups of your site
  5. Monitoring: Monitor your site for any unusual activity after enabling SVG uploads

6. Troubleshooting

If you experience issues:

  1. Upload Fails: Check file size and server upload limits
  2. SVG Not Displaying: Verify the SVG code is valid
  3. Permissions Error: Ensure the uploads directory is writable
  4. Security Warnings: Some security plugins might block SVG uploads by default

7. Performance Considerations

  • SVG files are typically small and scale well
  • Complex SVGs with many elements may impact page load times
  • Consider using CSS for simple shapes and effects when possible

This module is ideal for:

  • Web designers and developers
  • Sites using vector graphics and icons
  • Projects requiring high-quality, scalable graphics
  • Modern web applications with custom UI elements