Question

We like mixing SVG code with JQuery templates. When we save SVG graphics from Adobe Illustrator or Inkscape, they have more than just the xmlns="http://www.w3.org/2000/svg" namespace tags, having proprietary “hints” or code that will be ignored in a HTML 5 browser.

We want to create graphics in Inkscape for example, then use them without having to manually cherry pick the unwanted, ignored tags, possibly even formatting them.

Is there code out there that could remove or minify the non-compliant svg tags produced by these programs based on xmlns="http://www.w3.org/2000/svg"?

We will use ASP.NET MVC 3 to supply these templates using JQuery .ajax calls, so there’s the potential of a C# XML “cleaner” based on a namespace?

Answer 1

If you can use XSLT, the following transform will drop all elements that are not in the SVG namespace:

<xsl:stylesheet version="1.0"
                xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
                xmlns:svg="http://www.w3.org/2000/svg">

<!-- Any element matching svg namespace is copied. -->
<xsl:template match="svg:*">
  <xsl:copy>
    <xsl:copy-of select="@*[namespace-uri()='']"/>
    <xsl:apply-templates select="node()"/>
  </xsl:copy>
</xsl:template>

<!-- Default: Exclude element -->
<xsl:template match="*"/>

</xsl:stylesheet>

A little care is need to handle attribute correctly. Some SVG editing software will add additional attributes, so when we copy attributes, we only copy those in the default namespace so non-SVG standard attributes will also get stripped.