Validating SVG

This article is part of SVG clean up article.

SVG can contain a lot of stuff that might be dangerous: scripts and external resources.

Style

Global <style> and inline style are converted to attributes.

Style complicates the process of analysing an icon structure, which is needed to later get rid of unused elements and parse the palette, so style should go. If style is too complex to parse or style overrides attribute, an exception is thrown.

Bad tags

During clean up, the icon is also checked for bad stuff.

Validation is very strict and opinionated.

Things that will cause validation to fail (function will throw an exception):

• <script> is found or an event listener is found.
• Text or font. See below.
• Any external resources.
• Raster images. See below.
• Links.

svg<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
 <script>
 // <![CDATA[
 window.addEventListener('DOMContentLoaded', () => {
     alert('Bad stuff!!!');
 })
 // ]]>
 </script>

 <circle cx="5" cy="5" r="4" />
</svg>

svg<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
   <image href="https://example.com/totally-not-a-tracker.png" height="200" width="200"/>
</svg>

Removed tags

Clean up function has a list of all allowed SVG tags and their attributes.

If an unknown tag is encountered, this happens:

• If a tag belongs to a namespace, such as <rdf:RDF>, it is removed with all its children elements.
• If a tag does not have a namespace, an exception is thrown.

Attributes

Clean up function also checks each attribute on each element.

All attributes that do not affect icon rendering are removed.

If an event listener is found, the function throws an exception.

class attribute is allowed.

Inline style is converted to attributes (before parsing other attributes).

Text and fonts

All text tags are not allowed.

Why? Because different operating systems have different fonts, it will cause the icon to render differently.

This rule cannot be disabled.

svg<svg viewBox="0 0 240 80" xmlns="http://www.w3.org/2000/svg">
 <style>
   .small { font: italic 13px sans-serif; }
   .heavy { font: bold 30px sans-serif; }

   /* Note that the color of the text is set with the    *
    * fill property, the color property is for HTML only */
   .Rrrrr { font: italic 40px serif; fill: red; }
 </style>

 <text x="20" y="35" class="small">My</text>
 <text x="40" y="35" class="heavy">cat</text>
 <text x="55" y="55" class="small">is</text>
 <text x="65" y="55" class="Rrrrr">Grumpy!</text>
</svg>

Raster images

Sometimes raster images are used by icons for various purposes, usually masks or masked content.

They are not allowed. Why?

• They do not scale, thus it is no longer a vector icon.
• Validating them adds unnecessary complications. Having content that cannot be fully validated in SVG is not acceptable.

Clean up

Validation is done during clean up process.

It is done with the cleanupSVG() function from Iconify Tools.