[HN Gopher] SVG Viewer - View, edit, and optimize SVGs
___________________________________________________________________
SVG Viewer - View, edit, and optimize SVGs
Author : microflash
Score : 279 points
Date : 2024-04-27 15:43 UTC (7 hours ago)
(HTM) web link (www.svgviewer.dev)
(TXT) w3m dump (www.svgviewer.dev)
| lights0123 wrote:
| Another web-based SVG tool I use regularly is
| https://jakearchibald.github.io/svgomg/, an extremely
| configurable optimizer.
| lovegrenoble wrote:
| I like this one: https://www.softr.io/tools/svg-shape-generator
| Gualdrapo wrote:
| 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 wrote:
| 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 wrote:
| > 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?
| beardyw wrote:
| Yes, that is permanently open when I am working with SVGs.
| thangalin wrote:
| Also at:
|
| https://svgomg.net/
| BostonFern wrote:
| I use this tool to prepare collections of SVG symbols:
| https://daveknispel.github.io/svg2use/
| jarek-foksa wrote:
| You might also find Boxy SVG useful as it has built-in
| support for symbol-based icon sprites: https://boxy-
| svg.com/#demo-symbols
| leptons wrote:
| 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:
|
| https://svgcrop.com/
| moritzwarhier wrote:
| 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!
| noizejoy wrote:
| Can this be self-hosted?
| microflash wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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.
| Waterluvian wrote:
| 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 wrote:
| All right, now we have to hear about your robot mapping
| software
| Waterluvian wrote:
| 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 wrote:
| Damn that sounds like a dream gig! Thanks for sharing
| farhanpatel wrote:
| I find myself reaching for this pretty often.
|
| Love little tools like this it fits the spirit of HN perfectly.
| yboris wrote:
| 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 wrote:
| 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
| thenickevans wrote:
| This is great. There should be more and better tools for SVGs.
| Thank you for making this.
| vegcel wrote:
| 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 wrote:
| > 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.
| leobg wrote:
| 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.
| vegcel wrote:
| 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.
| lwansbrough wrote:
| 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.
| MengerSponge wrote:
| https://www.cnn.com/2023/07/08/us/chatgpt-crochet-
| patterns-a...
| nestorD wrote:
| I have done it, generating a circle with symbols around it, it
| took a surprising amount of work to get what I wanted.
| lionkor wrote:
| 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.
| Tagbert wrote:
| 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.
| rambambram wrote:
| 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'?
| gopher_space wrote:
| 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 wrote:
| 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.
| jarek-foksa wrote:
| The flash of unstyled SVG can be fixed by setting explicit view
| box (the "viewBox" attribute) and viewport (the "width" and
| "height" attributes): https://www.sarasoueidan.com/blog/svg-
| style-inheritance-and-...
| sipjca wrote:
| 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
| breck wrote:
| I paid $10 for BoxySVG a couple of years ago on Mac and it's been
| a solid little tool.
|
| https://boxy-svg.com/
| zimpenfish wrote:
| A +1 for Boxy as a "quick'n'dirty" SVG tweaker / light editor.
| Theodores wrote:
| 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.
___________________________________________________________________
(page generated 2024-04-27 23:00 UTC)