_______ __ _______
| | |.---.-..----.| |--..-----..----. | | |.-----..--.--.--..-----.
| || _ || __|| < | -__|| _| | || -__|| | | ||__ --|
|___|___||___._||____||__|__||_____||__| |__|____||_____||________||_____|
on Gopher (inofficial)
URI Visit Hacker News on the Web
COMMENT PAGE FOR:
URI SVG Viewer â View, edit, and optimize SVGs
fyt2024 wrote 5 hours 38 min 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 wrote 5 hours 22 min 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 wrote 4 hours 50 min 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.
navigate8310 wrote 8 hours 11 min ago:
Here's another handy tool that I use:
URI [1]: https://squoosh.app/
Arpitbhalla wrote 11 hours 38 min ago:
I'm using it for quite a while, it's really awesome
notpushkin wrote 12 hours 50 min ago:
Neat!
There's a slightly more optimal way to encode SVGs as data URI:
URI [1]: https://yoksel.github.io/url-encoder/
mariushop wrote 13 hours 56 min ago:
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.
albert_e wrote 16 hours 4 min 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.
tiffanyh wrote 17 hours 43 min 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 wrote 15 hours 59 min ago:
It also reduces the precision of numbers. Not sure what else.
namegulf wrote 17 hours 47 min ago:
this is amazing and very useful tool. was looking for something like
this, thank you!
saintradon wrote 19 hours 21 min ago:
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.
awsidiqi wrote 19 hours 36 min 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
( [1] ).
Thanks for posting it and thank you all for your kind words.
Let me know if you have any questions!
URI [1]: https://www.checkersoftware.ca/
qingcharles wrote 11 hours 44 min ago:
Thank you! I use this tool all the time when working with icons.
jfoster wrote 11 hours 59 min 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 wrote 2 hours 43 min 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!
Theodores wrote 23 hours 14 min 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.
breck wrote 23 hours 19 min ago:
I paid $10 for BoxySVG a couple of years ago on Mac and it's been a
solid little tool.
URI [1]: https://boxy-svg.com/
Brajeshwar wrote 15 hours 31 min ago:
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 wrote 20 hours 47 min ago:
A +1 for Boxy as a "quick'n'dirty" SVG tweaker / light editor.
sipjca wrote 23 hours 32 min 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
rambambram wrote 1 day 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'?
jarek-foksa wrote 20 hours 59 min ago:
The flash of unstyled SVG can be fixed by setting explicit view box
(the "viewBox" attribute) and viewport (the "width" and "height"
attributes):
URI [1]: https://www.sarasoueidan.com/blog/svg-style-inheritance-and-...
rambambram wrote 11 hours 5 min ago:
Thanks! I saved your reply and I'm going to look into it.
gopher_space wrote 23 hours 51 min 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 wrote 21 hours 38 min 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 wrote 13 hours 56 min 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 wrote 11 hours 5 min ago:
Thanks! I saved your reply and I'm going to try your idea.
leobg wrote 1 day 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.
Tagbert wrote 22 hours 49 min ago:
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 wrote 1 day 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 wrote 1 day ago:
I have done it, generating a circle with symbols around it, it took a
surprising amount of work to get what I wanted.
lwansbrough wrote 1 day 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.
MengerSponge wrote 1 day ago:
URI [1]: https://www.cnn.com/2023/07/08/us/chatgpt-crochet-patterns...
vegcel wrote 1 day 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.
vegcel wrote 1 day 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.
onthecanposting wrote 4 hours 14 min 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.
gopher_space wrote 23 hours 29 min 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.
thenickevans wrote 1 day ago:
This is great. There should be more and better tools for SVGs. Thank
you for making this.
alex3305 wrote 1 day 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:
URI [1]: https://codebeautify.org/svg-viewer
yboris wrote 1 day 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.
farhanpatel wrote 1 day ago:
I find myself reaching for this pretty often.
Love little tools like this it fits the spirit of HN perfectly.
Waterluvian wrote 1 day 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 wrote 1 day ago:
All right, now we have to hear about your robot mapping software
Waterluvian wrote 1 day 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 wrote 21 hours 18 min ago:
Damn that sounds like a dream gig! Thanks for sharing
noizejoy wrote 1 day ago:
Can this be self-hosted?
awsidiqi wrote 19 hours 36 min ago:
We donât currently have a self-hosted solution, but if you have a
specific need, you can contact us at [1] and weâll see what we can
do.
URI [1]: https://www.svgviewer.dev/contact
cal85 wrote 1 day 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.)
swores wrote 23 hours 20 min 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 wrote 19 hours 51 min 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.
layer8 wrote 1 day 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.â ( [1] )
Apart from that, they let you store and share SVGs on their
servers, so itâs not purely client-side.
URI [1]: https://www.svgviewer.dev/terms
de_nied wrote 1 day 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).
microflash wrote 1 day 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.
lights0123 wrote 1 day ago:
Another web-based SVG tool I use regularly is [1] , an extremely
configurable optimizer.
URI [1]: https://jakearchibald.github.io/svgomg/
KTibow wrote 18 hours 54 min ago:
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 [1]
is merged Jake will release an updated version of SVGOMG.
URI [1]: https://github.com/svg/svgo/pull/1943
moritzwarhier wrote 23 hours 38 min 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!
leptons wrote 1 day 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:
URI [1]: https://svgcrop.com/
qingcharles wrote 11 hours 45 min ago:
Very handy, thank you. I'm always having to do this manually for
icons.
clementmas wrote 18 hours 56 min ago:
Does is translate the element or actually redraw it?
drewbitt wrote 17 hours 56 min ago:
It calculates the minimal bounding box that encompasses all
visible elements within the SVG and crops.
k4rli wrote 19 hours 15 min ago:
Thanks, bookmarked. Have needed this in past but fixed manually.
BostonFern wrote 1 day ago:
I use this tool to prepare collections of SVG symbols:
URI [1]: https://daveknispel.github.io/svg2use/
jarek-foksa wrote 21 hours 40 min ago:
You might also find Boxy SVG useful as it has built-in support for
symbol-based icon sprites:
URI [1]: https://boxy-svg.com/#demo-symbols
thangalin wrote 1 day ago:
Also at:
URI [1]: https://svgomg.net/
beardyw wrote 1 day ago:
Yes, that is permanently open when I am working with SVGs.
Gualdrapo wrote 1 day ago:
I regularly find myself using [1] - I wish Inkscape were that
intuitive when handling the innards of s, letting you convert between
absolute/relative values and so on
URI [1]: https://yqnn.github.io/svg-path-editor/
__jonas wrote 1 day 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 wrote 22 hours 53 min 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?
lovegrenoble wrote 1 day ago:
I like this one:
URI [1]: https://www.softr.io/tools/svg-shape-generator
leptons wrote 14 hours 26 min ago:
I'm not really sure what use case this solves.
DIR <- back to front page