5 ms·

Svgi – An SVG inspection tool

133 points by angelmm 9y ago

fibo 9y ago
Good work, you maybe interested also in this package to generate SVG serverside http://g14n.info/SVGx/ http://g14n.info/SVGx/
- angelmm 9y ago
  Thank you! It's an interesting tool to combine with svgi :)
anc84 9y ago
Maybe include some metrics on the coordinates so that unreasonable precision and floating point nonsense (10.0000001) can be detected.
- angelmm 9y ago
  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.
  - GlennS 9y ago
    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.)
    - angelmm 9y ago
      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!
  - angelmm 9y ago
    I created an issue to track all the ideas about the linters: https://github.com/Angelmmiguel/svgi/issues/7 https://github.com/Angelmmiguel/svgi/issues/7
- OliverJones 9y ago
  Yes! bounding box display would be great too.
nachtigall 9y ago
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/12925 https://discourse.mozilla-community.org/t/better-svg-editing... Maybe you want to chim in with suggestions ;)
- angelmm 9y ago
  Sure! I will join the conversation. Also, I can get some ideas to improve the tool :)
- deleted 9y ago
  [deleted]
runn1ng 9y ago
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.
- angelmm 9y ago
  I'm glad to hear that. Thanks!
- framel 9y ago
  Nodejs-based tool for optimizing SVG vector graphics files. https://jakearchibald.github.io/svgomg/ https://jakearchibald.github.io/svgomg/
- Already__Taken 9y ago
  Inkscapes "Save as optimized" is the best way to go for later hand editing. But yeh it's clunkier than I'd like.
jancsika 9y ago
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.

133 points by angelmm 9y ago

fibo 9y ago

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

angelmm 9y ago
Thank you! It's an interesting tool to combine with svgi :)

anc84 9y ago

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

angelmm 9y ago
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.
- GlennS 9y ago
  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.)
  - angelmm 9y ago
    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!
- angelmm 9y ago
  I created an issue to track all the ideas about the linters: https://github.com/Angelmmiguel/svgi/issues/7 https://github.com/Angelmmiguel/svgi/issues/7
OliverJones 9y ago
Yes! bounding box display would be great too.

nachtigall 9y ago

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/12925 https://discourse.mozilla-community.org/t/better-svg-editing... Maybe you want to chim in with suggestions ;)

angelmm 9y ago
Sure! I will join the conversation. Also, I can get some ideas to improve the tool :)
deleted 9y ago
[deleted]

runn1ng 9y ago

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.

angelmm 9y ago
I'm glad to hear that. Thanks!
framel 9y ago
Nodejs-based tool for optimizing SVG vector graphics files. https://jakearchibald.github.io/svgomg/ https://jakearchibald.github.io/svgomg/
Already__Taken 9y ago
Inkscapes "Save as optimized" is the best way to go for later hand editing. But yeh it's clunkier than I'd like.

jancsika 9y ago

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.