Enabling SVG Support in WordPress

How to enable svg support in WordPress, with and without plugin? Why they’re not considered safe for website?

Without Plugins

To enable SVG uploads in WordPress without plugins:

Add code to functions.php:

function add_svg_support($mimes) { $mimes['svg'] = 'image/svg+xml'; return $mimes; } add_filter('upload_mimes', 'add_svg_support'); // Optional: Add SVG sanitization function sanitize_svg($data) { // Only run on SVG uploads if ($data['type'] === 'image/svg+xml') { // SVG sanitization code would go here } return $data; } add_filter('wp_handle_upload_prefilter', 'sanitize_svg');

Add SVGZ support (optional):php

function add_svgz_support($mimes) { $mimes['svgz'] = 'image/svg+xml'; return $mimes; } add_filter('upload_mimes', 'add_svgz_support');

Using Plugins

Several plugins can enable SVG support:

1. Safe SVG – Popular option with sanitization features
2. SVG Support – Allows SVG uploads and inline embedding
3. WP SVG – Simple solution for SVG uploads

Security Concerns with SVG Files

SVGs aren’t considered safe by default because:

1. They contain XML code – SVGs are XML files that can include scripts and embedded content
2. XSS vulnerability – Can contain JavaScript that executes when loaded
3. SSRF attacks – Can contain external references that make server-side requests
4. XML entities – Can use XML entities for denial of service or data extraction

Safe Implementation Practices

To safely use SVGs:

1. Always sanitize – Remove scripts and potentially harmful elements
2. Use sanitization libraries – Like DOMPurify or SVG sanitizers
3. Limit upload permissions – Only allow trusted users to upload SVGs
4. Serve with correct headers – Use Content-Type: image/svg+xml and consider Content-Security-Policy

Would you like more details on any specific aspect of SVG implementation or security