In web design, Scalable Vector Graphics (SVG) is known for good quality and adaptability. Yet, in WordPress, support for SVG is curiously absent from the default settings.
SVG security
SVGs, though visually captivating, have their dark side. These XML files, while immensely versatile, also have vulnerabilities untouched by conventional image formats:
- XML External Entity Attacks (XXE)
- Bomb Nested Entities
- Cross-Site Scripting (XSS) intrusions
Diving deeper, SVG plugins for WordPress often present a solution. Many allow SVG uploads by activating the MIME type, as demonstrated below:
function website_update_mime_types($mimes) {
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter('upload_mimes', 'website_update_mime_types');This route, while direct, sidesteps the essential safety nets, leaving a potential trapdoor for intruders.
SVG browser support
When it comes to browsers, SVGs enjoy almost universal support. The list of fans includes all the major players, and this list proudly extends to the mobile browser sphere as well.
However, there can be issues with dated browsers. It’s important to remember that IE8, IE9, and IE10 have had their time under the spotlight, but the stage is evolving.
Online tool for SVG in WordPress
One solution in WordPress is SVGinWP.
Tailored specifically for the WordPress ecosystem, this online tool converts SVG codes into URLs (in the form data:image/svg+xml). These URLs can be directly added into the default Image block.
You get the elegance of SVGs without the hassle of uploading the actual SVG file to your website.
Plugins for SVG in WordPress
A potent method to bring SVGs seamlessly into your WordPress narrative is by leveraging the SVG Support plugin. Another approach to SVGs is embodied by the Safe SVG plugin, which emphasizes the sanitization of SVGs upon upload.
SVGs can elevate a website from the ordinary to the extraordinary. Understanding their nature, the risks they carry, and the best practices helps to harness their potential safely.