SVG Gobbler

This little project by Ross Moody is great:

SVG Gobbler is a browser extension that finds vector content on the page you are viewing and allows you to download, optimize, copy, view code, or export it as an image.

When a website uses SVG as an image, you can right-click/save as just like you would with other images. However, when SVG is<svg></svg> When the form is displayed inline (which usually makes sense for style reasons), it is difficult to get a copy of it. I usually end up opening the developer tool and find<svg></svg> , right-click it, use Copy > Copy External HTML, paste into a text file, and save it as whatever.svg. This is much more troublesome than I want.

Using SVG Gobbler, I click on the browser extension and it displays a nice grid of options:

I can download them from here quickly, but note that it can even optimize them for me if I want, or export as PNG. very nice! I've used it today and I just installed it today.

As far as feedback goes, I want to say it's best:

1. There is a way to adjust the size of the PNG export (it is better to allow me to enlarge it if needed).
2. Export in a next-generation format with better size than PNG file, such as WebP or AVIF.
3. SVGs filled with white should be displayed on a non-white background so you can see what they are.
4. Optionally, I'm allowed to name the file when downloading, rather than always name it gobbler-original.svg.

A larger goal is to extract CSS used on the website to<svg></svg> middle. I noticed that some of the SVGs it found look very different when exporting, because the page is using styles outside of the SVG to style it, which are lost when exporting.

I'm wondering if the changes to the Safari extension allow Ross to easily port it to Safari (or even mobile Safari?!).

The above is the detailed content of SVG Gobbler. For more information, please follow other related articles on the PHP Chinese website!