Svgi – An SVG inspection tool | Hacker News Reader

Svgi – An SVG inspection tool

angelmmiguel.github.io

133 pointsangelmm15 comments

Great tool. As browser try to improve their Inspector for inpecting SVG, I guess such a tool could be useful.

Discussion about this for the Firefox Devtools here: https://discourse.mozilla-community.org/t/better-svg-editing... Maybe you want to chim in with suggestions ;)

Sure! I will join the conversation. Also, I can get some ideas to improve the tool :)

Maybe include some metrics on the coordinates so that unreasonable precision and floating point nonsense (10.0000001) can be detected.

Thanks for your suggestion. It makes a lot of sense. The next step on this project is to add some "lint" features based on SVG good practices. I'll add this to the list.

A problem I have quite often is finding the bounding box of an SVG file so that I can set a sensible viewBox.

It'd be really nice if your tool could output this, but I don't know whether it'd be in scope. It would mean following through all the paths and transformations for each element.

(This usually comes up if someone has given me their line-art and text logo as a JPG and I use some tool to convert it, then tidy it by hand.)

I agree with you. I found this problem in the past when I added several SVG files from different sources to a site. Every file had a different space, so I needed to fix them manually.

The main idea of this tool is to inspect the SVG. Currently, I don't plan to add any edition feature. However, I want to add a linter and this could be a great suggestion. I think it's possible to calculate the minimum viewBox and show the value as a suggestion if it's different from the current one.

What do you think? Thanks!

I created an issue to track all the ideas about the linters: https://github.com/Angelmmiguel/svgi/issues/7

Yes! bounding box display would be great too.

This looks great.

I tried to make animated SVGs once and I haven't found any reasonable way other than editing the source by hand. It was pretty painful, since Inkscape adds a lot of junk to the SVG.

This would probably help a lot.

I'm glad to hear that. Thanks!

Nodejs-based tool for optimizing SVG vector graphics files. https://jakearchibald.github.io/svgomg/

Inkscapes "Save as optimized" is the best way to go for later hand editing. But yeh it's clunkier than I'd like.

Might be nice to list the number of FuncIRIs that are used in the SVG.

For example, if I see that the number of FuncIRIs is zero, I can know that it is safe to use the SVG inline as there will be no id collisions with other inline SVGs.

Good work, you maybe interested also in this package to generate SVG serverside http://g14n.info/SVGx/

Thank you! It's an interesting tool to combine with svgi :)

Reply on news.ycombinator.com