SVG Viewer – View, edit, and optimize SVGs

Another web-based SVG tool I use regularly is <a href="https:&#x2F;&#x2F;jakearchibald.github.io&#x2F;svgomg&#x2F;" rel="nofollow">https:&#x2F;&#x2F;jakearchibald.github.io&#x2F;svgomg&#x2F;</a>, an extremely configurable optimizer.

Didn’t expect this to blow up on Hacker News on the weekend! We’re a small company based out of Vancouver, BC that creates software tools (<a href="https:&#x2F;&#x2F;www.checkersoftware.ca&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.checkersoftware.ca&#x2F;</a>).<p>Thanks for posting it and thank you all for your kind words.<p>Let me know if you have any questions!

Wow! I just fiddled with it a little bit and it seems very useful for when I finally decide to tackle the small problems[1] that I encounter with the SVG&#x27;s that I use. The UI is easy to understand and it gives clear feedback on changes. I definitely bookmarked this.<p>[1] The problems that I had with some SVG&#x27;s is that they seemed to stretch the page wide while loading (in a flash) and then finally settling on their intended size after a split second. I remember that I searched for solutions and fiddled with viewbox, widht and height, but to no avail (they were in the hundreds of pixels). What can I do to mitigate this initial &#x27;stretch&#x27;?

Really nice tool. It has a lot in one place. Normally I use phpStorm and that does not have SVGOMG style optimisation things but the code prettifiers work.<p>This could do with some better examples to start editing with, using different primitives than just path. A grid would be nice too.<p>Examples, a search icon is a &#x27;circle&#x27; and a &#x27;line&#x27; with a &#x27;viewbox&#x27; to get right, if you place the origin in the centre of the circle then you don&#x27;t need x and y values, just a radius. In this way a silly level of optimisation can be made.<p>A typical search icon will have hundreds of points defined with &#x27;NASA numbers&#x27; (six decimal places) and that mashed into a path. Really you just need a circle defined in integers, not Adobe Illustrator exported nonsense.<p>SVG is an artistic medium and I really like it. However, artists don&#x27;t see it that way and neither do developers. Hence most SVGs are not really in the spirit of what is possible. It is more than just a file format.

SVGs are just so powerful. Last week there was a problem with a parallax transparent image with a filter: drop-shadow looking awful on mac safari and ios. Solution was to create an outline of the image in an SVG and use an svg filter with feGaussianBlur for a drop shadow. I feel like I&#x27;m only scratching the surface on what&#x27;s possible with them. I&#x27;ve been using svgomg for my optimizations, but this looks to have quite a bit more useful features.

I use Inkscape. And if I miss something then it is Xara Xtreme or the former free version vor linux<p>But what does it mean to optimize an SVG?

I love this site, I’ve used it countless times. So useful and super quick to see results and just understand weird svg elements<p>Thank you to the dev

This is great. There should be more and better tools for SVGs. Thank you for making this.

I paid $10 for BoxySVG a couple of years ago on Mac and it&#x27;s been a solid little tool.<p><a href="https:&#x2F;&#x2F;boxy-svg.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;boxy-svg.com&#x2F;</a>

This is my favorite resource &#x2F; tool for messing with SVGs. I&#x27;ve looked around a lot and I can&#x27;t find better. Thank you to the creator.

I was generating some SVGs from text last week and thus editor just refused to paarse the generated content. However this viewer worked just fine: <a href="https:&#x2F;&#x2F;codebeautify.org&#x2F;svg-viewer" rel="nofollow">https:&#x2F;&#x2F;codebeautify.org&#x2F;svg-viewer</a>

I find myself reaching for this pretty often.<p>Love little tools like this it fits the spirit of HN perfectly.

Neat!<p>There&#x27;s a slightly more optimal way to encode SVGs as data URI: <a href="https:&#x2F;&#x2F;yoksel.github.io&#x2F;url-encoder&#x2F;" rel="nofollow">https:&#x2F;&#x2F;yoksel.github.io&#x2F;url-encoder&#x2F;</a>

Excellent. I love that the link takes you straight to the editor, browser keeps the history, clear design, a joy to use. Made me click around just to see who did it so I can applaud a job well done.

I’ve been using SVGs in my robot mapping software and it’s amazing how powerful they are. I design them using css custom properties (variables) so that I can style icon colours, borders, etc. at runtime.

Excellent --<p>The library of SVGs on the left is a great feature in itself. I wish a couple of sites like this become super popular so that all of us can both contribute and utilize great vector art.

Can this be self-hosted?

Doesn&#x27;t &quot;optimize&quot;<p>I was expecting the optimization feature to rewrite the SVG to be smaller (less kb).<p>All the optimize button did was remove whitespace &amp; cartridge returns.

Here&#x27;s another handy tool that I use: <a href="https:&#x2F;&#x2F;squoosh.app&#x2F;" rel="nofollow">https:&#x2F;&#x2F;squoosh.app&#x2F;</a>

Not sure if this is a bug or not but the zoom feature seems to go infinitely on the canvas, kinda funny and should be kept in maybe.

I&#x27;m using it for quite a while, it&#x27;s really awesome

this is amazing and very useful tool. was looking for something like this, thank you!

You can probably use ChatGPT to generate SVGs from a description of what you want. Like stable diffusion for simple vector graphics. Maybe even animations.<p>Haven’t yet done it myself and can’t verify right now, but I wouldn’t be surprised if it worked well to brainstorm a favicon or some other symbol.