If you were here on Friday, I talked about the headache of using SVGs on AMP pages. In that post I mentioned that one of the fixes was to ‘clean’ the SVG file.

Why would be bother? The simple answer is that smaller files are better. But as we learned with AMP being picky, it’s also because we want our files to be fully compatible with all browsers and servers. SVG standards are important, after all.

So let’s clean!

Remove Headers

If your SVG starts with this, just remove it:

<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN">

Remove Less Standard Tags

I wouldn’t have realized these weren’t super standard if it hadn’t been for AMP alerts. But these aren’t:

xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"

Again, remove them. But also you want to remove tags like <g i:extraneous="self"> and that’s tricky because you’ll usually see it like this:

<g i:extraneous="self">
    <g>
        [Image stuff]
    </g>
</g>

If you use a regular expression like I did, be very cautious. I checked every single one of my 700 SVGs after the edits to make sure they still worked. There were cases where the only call to the <g> tag was with the extraneous stuff, so I had to very cautiously replace. I missed about 40.

Remove Illustrator’s Extra Shit

Here’s where you’re going to save the most space. First remove the requiredExtensions stuff:

	<foreignObject requiredExtensions="&ns_ai;" x="0" y="0" width="1" height="1">
		<i:pgfRef  xlink:href="#adobe_illustrator_pgf">
		</i:pgfRef>
	</foreignObject>

And then remove the big hunk of PGF:

<i:pgf  id="adobe_illustrator_pgf">(.*)</i:pgf>

I can’t show you the actual content. It’s huge. It’s way huge. It’s up to 20k huge.

Remove Switch

If you’re not using the switch, you want to remove it.

<switch>
	<g i:extraneous="self">
		<rect fill="#231F20" width="28" height="28"/>
	</g>
</switch>

End Result?

A 29 KB file is 4KB. And that is a faster internet.