I regularly find myself using https://yqnn.github.io/svg-path-editor/ - I wish Inkscape were that intuitive when handling the innards of <path>s, letting you convert between absolute/relative values and so on
__jonas 7 days ago [-]
I use the same tool a lot for the exact same reason.
Really wish the 'mainstream' desktop SVG editors had this level of control of path data.
eMPee584 7 days ago [-]
> I use the same tool a lot for the exact same reason. Really wish the 'mainstream' desktop SVG editors had this level of control of path data.
Inkscape is open source, file a feature request?
7 days ago [-]
tasuki 4 days ago [-]
Ah and it shows the grid and snaps to it, this is really great!
leptons 7 days ago [-]
I'll add one of my favorite SVG tools... a tool to crop SVGs. Sometimes the SVG has a wide border around it or something funky that makes dealing with centering it difficult. This tool just crops it to the visible elements:
Surprised this is being discussed here. It's worth noting that SVGOMG runs SVGO 3.0.0 while the latest version is 3.2.0 (so run SVGO locally for the latest optimizations), but I understand that once https://github.com/svg/svgo/pull/1943 is merged Jake will release an updated version of SVGOMG.
beardyw 8 days ago [-]
Yes, that is permanently open when I am working with SVGs.
moritzwarhier 7 days ago [-]
I've had this one in my bookmaeks as well for more than 5 years :)
Worth noting it deems itself "SVGOs missing GUI" (and does a splendid job at that). If one needs to batch process files or sth like that, svgo's CLI is still there.
Props to Jake Archibald!
awsidiqi 7 days ago [-]
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 (https://www.checkersoftware.ca/).
Thanks for posting it and thank you all for your kind words.
Let me know if you have any questions!
bkyan 1 days ago [-]
Are you planning to keep this webapp ad supported, or will there be a premium "pro" version with additional features in the (near) future?
jfoster 7 days ago [-]
Congrats! It's really cool.
In most of the examples, there's many paths with long sequences of numbers, so it's not obvious which path corresponds to which shape in the image.
I wonder if you could make it temporarily change the color or outline of a path when the cursor is on its code in the editor? (and similarly for text selections)
awsidiqi 7 days ago [-]
I actually tried to implement this exact feature about a year ago, but gave up after a day of working on it because it seemed too difficult. Given this feedback, it might be worth trying again. Thank you!
spartanatreyu 6 days ago [-]
Excuse my ignorance as I'm not a react dev, but what's the use-case of exporting an svg into react?
Why would a react dev use the react export feature over inlining an svg?
dejaydev 5 days ago [-]
Not the person you're replying to - but in my experience, it can be easier to put the SVG in a component by itself to make changes to it wherever it may be used by just navigating to the path of the SVG itself rather than digging up the actual component it's used in.
There are very minor differences between what's a valid SVG and what's valid JSX, and web apps like this one will often offer to translate those fields for you as well as add the rest of the "component stuff" to make it copy-pastable.
skue 5 days ago [-]
Presumably, it would let you dynamically update the SVG the same way that React lets you dynamically update HTML. As simple examples, imagine an SVG clock or some map-based data visualization.
qingcharles 7 days ago [-]
Thank you! I use this tool all the time when working with icons.
rambambram 7 days ago [-]
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's that I use. The UI is easy to understand and it gives clear feedback on changes. I definitely bookmarked this.
[1] The problems that I had with some SVG'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 'stretch'?
Thanks! I saved your reply and I'm going to look into it.
gopher_space 7 days ago [-]
I’d be curious to see if you could convert svg to another format on the fly faster than the browser does. From my layman perspective that behavior sounds like initializing a bitmap to a max size and then parsing the svg into it.
rambambram 7 days ago [-]
I don't know about any bitmaps in my code, but I definitely should look into it, as it feels like it should be solvable, especially with SVGs. I opted for SVGs so I could give my icons the user-selected background color with CSS.
gopher_space 7 days ago [-]
maybe something like: your canvas is set to an initial size and then a smaller SVG is drawn inside it. When that's saved for display the resulting .png isn't the same size as the canvas so the browser moves things around a little?
What would happen if you started your SVG output by drawing a canvas-dimensioned border?
rambambram 7 days ago [-]
Thanks! I saved your reply and I'm going to try your idea.
Theodores 7 days ago [-]
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.
This could do with some better examples to start editing with, using different primitives than just path. A grid would be nice too.
Examples, a search icon is a 'circle' and a 'line' with a 'viewbox' to get right, if you place the origin in the centre of the circle then you don't need x and y values, just a radius. In this way a silly level of optimisation can be made.
A typical search icon will have hundreds of points defined with 'NASA numbers' (six decimal places) and that mashed into a path. Really you just need a circle defined in integers, not Adobe Illustrator exported nonsense.
SVG is an artistic medium and I really like it. However, artists don'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.
vegcel 7 days ago [-]
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'm only scratching the surface on what's possible with them. I've been using svgomg for my optimizations, but this looks to have quite a bit more useful features.
gopher_space 7 days ago [-]
> I feel like I'm only scratching the surface on what's possible with them.
I started down a Qt/QML desktop frontend path that led into wondering how much of it I could do with just a SVG imagemap-style setup.
Getting Jupyter up and running with a connection to data and SVG tools was an illuminating experience.
onthecanposting 7 days ago [-]
I don't think it's logistically or politically possible, but I really wish DWG, DXF and DGN would be replaced by SVG. That 2D drawings for the AEC industry are unusable by the majority of programs is absurd.
fyt2024 7 days ago [-]
I use Inkscape. And if I miss something then it is Xara Xtreme or the former free version vor linux
But what does it mean to optimize an SVG?
ffhhj 7 days ago [-]
To remove the extra info. Inkscape adds a lot of stuff. For example export a simple SVG from Figma and open it in Inkscape, then save and compare.
aothms 7 days ago [-]
It does, when you save. Under export, there is also a "Plain SVG" option which excludes the xmlns:inkscape and xmlns:sodipodi namespaces and therefore eliminates quite a bit.
sipjca 7 days ago [-]
I love this site, I’ve used it countless times. So useful and super quick to see results and just understand weird svg elements
Thank you to the dev
thenickevans 7 days ago [-]
This is great. There should be more and better tools for SVGs. Thank you for making this.
breck 7 days ago [-]
I paid $10 for BoxySVG a couple of years ago on Mac and it's been a solid little tool.
They seem to have gone the Subscription Model. I thought, for $10, I'd buy and keep it as I need them a few times a year. I still love Monodraw for being that tool I bought, kept it, use it a few times, but rarely and happy with it.
zimpenfish 7 days ago [-]
A +1 for Boxy as a "quick'n'dirty" SVG tweaker / light editor.
yboris 8 days ago [-]
This is my favorite resource / tool for messing with SVGs. I've looked around a lot and I can't find better. Thank you to the creator.
alex3305 7 days ago [-]
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: https://codebeautify.org/svg-viewer
farhanpatel 8 days ago [-]
I find myself reaching for this pretty often.
Love little tools like this it fits the spirit of HN perfectly.
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.
Waterluvian 8 days ago [-]
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.
tomcam 7 days ago [-]
All right, now we have to hear about your robot mapping software
Waterluvian 7 days ago [-]
Proprietary so I unfortunately can’t show, but I develop a Web-GIS for lidar mapping of warehouse environments, annotating the space for driving rules (urban planning / Sim City), and real-time site monitoring/issue fixing (like an RTS strategy game) for >10k robots worldwide.
tomcam 7 days ago [-]
Damn that sounds like a dream gig! Thanks for sharing
albert_e 7 days ago [-]
Excellent --
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.
noizejoy 8 days ago [-]
Can this be self-hosted?
awsidiqi 7 days ago [-]
We don’t currently have a self-hosted solution, but if you have a specific need, you can contact us at https://www.svgviewer.dev/contact and we’ll see what we can do.
microflash 8 days ago [-]
I'm not the owner of SVG Viewer, so I can't answer this definitively. I can't find any mention of self-hosting.
cal85 7 days ago [-]
I don’t think there would be anything to host, it’s probably just a static front end app. (On phone so can’t verify.)
layer8 7 days ago [-]
From the terms of service: “You agree not to reproduce, duplicate, copy, sell, resell or exploit any portion of the Service, use of the Service, or access to the Service without SVGViewer's express written permission.” (https://www.svgviewer.dev/terms)
Apart from that, they let you store and share SVGs on their servers, so it’s not purely client-side.
de_nied 7 days ago [-]
Good thing this doesn't apply to fair use, which allows you to have an offline copy for yourself (assuming it isn't for commercial purposes, and you can make your own offline copy).
swores 7 days ago [-]
Even if it were a plain HTML page, or a simple, single-file Javascript web app, that could either be hosted on a remote server that you don't control (as this is), or can be downloaded and hosted on your own computer or server allowing you to modify it.
And although that sort of thing would mean you can just download it straight from where it's being hosted from a technical point of view (for things where there isn't any backend or hidden logic in code at all) there's still the legal question as shown in logic8's comment.
cal85 7 days ago [-]
I didn’t mean it’s a bad question, I just assumed they thought there was a server process involved. But yeah you can self-host a static JS app easily, or put it on GitHub Pages or whatever, if you’re worried about it going offline.
tiffanyh 7 days ago [-]
Doesn't "optimize"
I was expecting the optimization feature to rewrite the SVG to be smaller (less kb).
All the optimize button did was remove whitespace & cartridge returns.
mkl 7 days ago [-]
It also reduces the precision of numbers. Not sure what else.
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.
Arpitbhalla 7 days ago [-]
I'm using it for quite a while, it's really awesome
namegulf 7 days ago [-]
this is amazing and very useful tool. was looking for something like this, thank you!
leobg 7 days ago [-]
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.
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.
lwansbrough 7 days ago [-]
ChatGPT does not have the strong understanding of the connection between ideas and 2D/3D space to draw anything with SVG. It’s limitations in this regard are quite apparent, I don’t think it could even draw a smiley face.
Won’t help for tweaking a logo for an app or adjusting a diagram for a presentation. AI generated images do not have direct control. It’s like trying to do tech support with an elderly relative over the phone.
lionkor 7 days ago [-]
or you could just use a program you learn once, which works anytime, anywhere, for free.
ill choose the one that i cant get vendor locked out of, or that gives me a different result tomorrow than it does today.
nestorD 7 days ago [-]
I have done it, generating a circle with symbols around it, it took a surprising amount of work to get what I wanted.
vegcel 7 days ago [-]
Works well enough for simple shapes, but there's already such a huge amount of free resources (iconbuddy.app) and for paid, I just use a subscription to vectorstock and Illustrator. I don't ever find the need to use ChatGPT. I use ChatGPT for doing stuff like setting up complex gradient animations or filters in SVGs and that works quite well.
Rendered at 05:32:29 GMT+0000 (Coordinated Universal Time) with Vercel.
Inkscape is open source, file a feature request?
https://svgcrop.com/
https://svgomg.net/
Worth noting it deems itself "SVGOs missing GUI" (and does a splendid job at that). If one needs to batch process files or sth like that, svgo's CLI is still there.
Props to Jake Archibald!
Thanks for posting it and thank you all for your kind words.
Let me know if you have any questions!
In most of the examples, there's many paths with long sequences of numbers, so it's not obvious which path corresponds to which shape in the image.
I wonder if you could make it temporarily change the color or outline of a path when the cursor is on its code in the editor? (and similarly for text selections)
Why would a react dev use the react export feature over inlining an svg?
There are very minor differences between what's a valid SVG and what's valid JSX, and web apps like this one will often offer to translate those fields for you as well as add the rest of the "component stuff" to make it copy-pastable.
[1] The problems that I had with some SVG'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 'stretch'?
What would happen if you started your SVG output by drawing a canvas-dimensioned border?
This could do with some better examples to start editing with, using different primitives than just path. A grid would be nice too.
Examples, a search icon is a 'circle' and a 'line' with a 'viewbox' to get right, if you place the origin in the centre of the circle then you don't need x and y values, just a radius. In this way a silly level of optimisation can be made.
A typical search icon will have hundreds of points defined with 'NASA numbers' (six decimal places) and that mashed into a path. Really you just need a circle defined in integers, not Adobe Illustrator exported nonsense.
SVG is an artistic medium and I really like it. However, artists don'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.
I started down a Qt/QML desktop frontend path that led into wondering how much of it I could do with just a SVG imagemap-style setup.
Getting Jupyter up and running with a connection to data and SVG tools was an illuminating experience.
But what does it mean to optimize an SVG?
Thank you to the dev
https://boxy-svg.com/
Love little tools like this it fits the spirit of HN perfectly.
There's a slightly more optimal way to encode SVGs as data URI: https://yoksel.github.io/url-encoder/
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.
Apart from that, they let you store and share SVGs on their servers, so it’s not purely client-side.
And although that sort of thing would mean you can just download it straight from where it's being hosted from a technical point of view (for things where there isn't any backend or hidden logic in code at all) there's still the legal question as shown in logic8's comment.
I was expecting the optimization feature to rewrite the SVG to be smaller (less kb).
All the optimize button did was remove whitespace & cartridge returns.
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.
ill choose the one that i cant get vendor locked out of, or that gives me a different result tomorrow than it does today.