SVG Gobbler

Nice little challenge from Ross Moody:

SVG Gobbler is a browser extension that finds the vector content material on the web page you’re viewing and offers you the choice to obtain, optimize, copy, view the code, or export it as a picture.

When a website makes use of SVG as an <img>, you’ll be able to right-click/save-as like another picture. However when SVG is inline as <svg> (which regularly is sensible for styling causes), it’s more durable to snag a duplicate of it. I often find yourself opening DevTools, discovering the <svg>, proper clicking that, utilizing Copy > Copy outerHTML, pasting right into a textual content file, and saving out as no matter.svg. A bit of extra toil than I’d like.

With SVG Gobbler, I click on the browser extension and it presents me a pleasant grid of choices:

I can shortly obtain them from right here, however discover it can even optimize them for me if I like, or export as a PNG as a substitute. Neat! I’ve made use of this immediately already, and I’ve solely simply put in it immediately.

By means of suggestions, I’d say it will be good to:

Have a strategy to dimension the PNG export (may as properly permit me to make it big if I have to).Export in next-gen codecs which may even be higher than PNG so far as file dimension, like WebP or AVIF.SVG that has a fill of white ought to be proven on a non-white background so you’ll be able to see what they’re.Supply, optionally, to let me identify the file as I obtain it reasonably than at all times naming it gobbler-original.svg

A stretch purpose can be to someway extract the CSS used on the positioning into the <svg>. I discover some SVGs it finds look very completely different when exported, as a result of the web page was making use of outside-the-SVG kinds to type it, that are misplaced when exported.

I ponder if the modifications to Safari extensions will permit Ross to simply port this to Safari (even Cell Safari?!).

The put up SVG Gobbler appeared first on CSS-Methods. You may help CSS-Methods by being an MVP Supporter.