SVG (Scalable Vector Graphics) files are widely used for icons, logos, and illustrations because they scale infinitely and have small file sizes. However, WordPress blocks SVG uploads by default for security reasons — SVGs can contain JavaScript, external file references, and other potentially dangerous content. With proper sanitization, SVG can be used safely in WordPress.
This guide covers how to handle SVG files safely in WordPress.
Why WordPress Blocks SVGs
SVG files are XML-based and can contain JavaScript, event handlers, external links, and other content that poses security risks. A malicious SVG could execute cross-site scripting attacks or exfiltrate data. WordPress blocks SVG uploads by default through the upload_mimes filter, which only allows common image formats.
Enabling SVG uploads without sanitization is a security risk. Always sanitize SVGs before storing or serving them.
Enabling SVG Uploads
Enable SVG uploads by adding ‘svg’ to the allowed mime types using the upload_mimes filter. Set the mime type to ‘image/svg+xml’. Only allow this for administrator users. Add file type validation to ensure uploaded files are actually SVGs and not disguised malicious files.
Use a plugin like Safe SVG or SVG Support for a complete solution. These plugins handle mime type registration, sanitization, and thumbnail generation automatically.
Sanitization
Always sanitize SVG files before storing them. Strip all JavaScript, event handlers, external references, and embedded CSS that could pose security risks. Keep structural SVG elements, attributes, and inline styles that are safe. Use a library like svg-sanitizer or a plugin’s built-in sanitization.
After sanitization, validate that the SVG is well-formed XML. Reject files that fail validation. Store sanitized SVGs and discard the original.
Displaying SVGs
Display SVG files as images using standard img tags. Browsers render SVGs from img tags without executing embedded scripts. For inline SVG display — where you need to style SVG elements with CSS — output the SVG markup directly. Inline SVGs should be sanitized and only used from trusted sources.
For SVGs used as icons, consider using an icon sprite system. Combine multiple SVG icons into a single sprite file and reference individual icons by ID.
Performance
Optimize SVG files by removing unnecessary metadata, editor comments, and unused definitions. Tools like SVGO can reduce SVG file sizes by 50% or more. WordPress doesn’t optimize SVGs automatically, so optimize them before uploading.
Serve SVGs with the correct Content-Type header. Configure your server to serve .svg files as image/svg+xml.
The Bottom Line
SVG files can be used safely in WordPress with proper precautions. Enable SVG uploads with sanitization, always strip dangerous content, display SVGs as images when possible, optimize file sizes, and serve with the correct content type. With these practices, SVGs enhance your site’s visual quality without compromising security.
