I just realized Polymer logo : http://svgporn.com/polymer.svg reminds me of Visual Studio for some reason - I needed to hover over it to see it's not some VS version.
The site owner should seriously consider running these SVG images through "scour" because each image is roughly 2X the size it should be.
Since SVG images are using XML, they can be minified just like JS, CSS, or HTML documents. Scour is a python script that does just that, but is SVG aware so it removes unused XML attributes, etc. Like any lossless optimization, the resulting file is a pixel perfect copy (can you still say that for vector images?)
Does this really help. Yes actually. I'm getting over 800 KB of savings across all the images applying scour.
No no no! Plz do not shrink them! Every developer knows how to shrink SVG. But it's really hard to get nice readable SVG back from shrinked ones. Better this way...
There isn't much you can do to SVG to hurt readability, actually. Scour mostly removes things such as superfluous IDs, superfluous elements in <defs> that are not used, shortens IDs, rewrites CSS into XML attributes where appropriate, removes attributes that replicate defaults, rewrites paths with a bit less whitespace and most importantly reduces the accuracy of numeric constants. The latter is in many cases the greatest reduction. And you don't notice the difference between 8 digits after the decimal point or 5 (unless the local viewBox is seriously fucked up).
Depends, though - speaking from the perspective of a front-end developer/designer, it's almost universally preferable to have the non-minified versions of any image, and in this case, being able to easily work directly on the XML is a massive plus. Ideally they should be minified as part of a build step. A minified version for prototyping/rapid development would be handy though.
I completely agree. Keep original unminified versions of all of your resources, and do the optimizations as part of a build process, so your production visitors are getting the smaller version
Scour isn't 'lossless'. "Scour attempts to optimize the file, and as result, it will change the file's structure and (possibly) its semantics"
Scour can do things like change Ids, remove 'unused' data, and so on - but if you are planning on operating on the SVG using script, maybe you need those IDs or that data.
These logos appear to relate specifically to development tools & libraries. Facebook is a tech product, but not typically considered a development tool/library. Similarly, you don't see Twitter, G+, Reddit, Instagram, etc. logos.
44 comments
[ 2.8 ms ] story [ 93.5 ms ] threadsvgcandy.com is available, which would convey much of the same idea
Turns out that momentary pause is a killer.
P.S.: I bet that most people never seem the JSON logo (http://svgporn.com/json.svg).
Shouldn't there be attribution?
Don't link me it here, it should be on the site.
Since SVG images are using XML, they can be minified just like JS, CSS, or HTML documents. Scour is a python script that does just that, but is SVG aware so it removes unused XML attributes, etc. Like any lossless optimization, the resulting file is a pixel perfect copy (can you still say that for vector images?)
Does this really help. Yes actually. I'm getting over 800 KB of savings across all the images applying scour.
https://my.zoompf.com/s/165313?tid=im&srt=sev&asc=false&pgo=...
Scour can do things like change Ids, remove 'unused' data, and so on - but if you are planning on operating on the SVG using script, maybe you need those IDs or that data.