Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

SVG Tutorial

svg-tutorial.com

Post reply on HN
Print view View original

31–40 of 113 posts

Re: SVG Tutorial

#31

Post by chefandy »

WillAdams wrote: post #9
mi_lk wrote: post #6

What’s the usual practice — do people code in SVG directly or they draw in for example Figma and generate a SVG file?

I was trained as a graphic designer, so I either drew stuff in Inkscape, or imported it from some other program. Had to do quite a bit of work to get filesizes down to something reasonable for: http://shapeoko.github.io/Docs/ One late development was working up a mechanism where an image could be clicked on to open it in a new window: http://shapeoko.github.io/Docs/content/tPictures/PS20028-100... and then the part n…

Also having a formal GD background, I tend to do the same... Trying get things like type polished enough for proper design work without using a graphical editor is a fool's errand. Depending on the use case, I often end up using the results inline. That way, I can easily modify/animate/script it with my code editor without having to jump back-and-forth between environments, and things like element IDs stay consistent.

Re: SVG Tutorial

#32

Post by lxe »

Can I somehow put the css classes inside the svg to have it self contained without resorting to inline styles?

Re: SVG Tutorial

#33

Post by chrismorgan »

bambax wrote: post #20

All in all, excellent ressource! Great and super clear examples. Minor nitpick @clip-path; they propose the following code: But that means describing the big circle twice. If you want to change the size of the circle you will have to modify it in two places. Since we're already using defs it would be better to write this IMHO: (rest unchanged)

You don’t even need the second , you can just render the normally and use it in the clipPath:

   
     
       
  -      
  +      
       
     
  
  -  
  +
(Personally I’d also drop the -wrapping. Never did understand why structuring them that way is recommended, I don’t think it actually gets you anything except for the vanishingly rare case where you want to put something that would render if it were not in a tag—I say “vanishingly rare” because situations like you showed—//defs/circle—should normally actually use .)

Re: SVG Tutorial

#34

Post by edw519 »

This is fantastic! I especially like the examples with curves, which I continue to struggle with, along with clipping.

Personally, I'm partial to path which can do almost anything and tends to be less verbose than other methods.

Long time student, but I see that I still have lots to learn.

I suck so much at drawing and dislike images so much that for ease and performance, I built my entire side project with svg.

After today, it looks like I have quite a bit of refactoring to do. Thank you, OP!

https://eddiots.com/1

Re: SVG Tutorial

#35

Post by Minor49er »

mi_lk wrote: post #6

What’s the usual practice — do people code in SVG directly or they draw in for example Figma and generate a SVG file?

In projects I've worked on, I've used Inkscape to create or edit files, then link them in like a typical image. On occasion, I've had a few static pages that needed a unique graphic that would be embedded into the page, though the graphics in those cases were not very complex

Re: SVG Tutorial

#36

Post by solardev »

lxe wrote: post #32

Can I somehow put the css classes inside the svg to have it self contained without resorting to inline styles?

Yeah, just add the style tag in there like you would with HTML:

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/sty...

And SVG elements can have classes: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/c...

Re: SVG Tutorial

#38

Post by shepherdjerred »

Another way is to write HTML/CSS and use satori [0] to convert that to SVG. It's meant for Open Graph images (the images that show up when you link a site in Discord, Slack, Twitter, etc.), but it works quite well for anything.

This is obviously not as flexible as true SVG, but it is familiar to author for anyone who's written a React application. I've used it on the backend to generate match reports for League of Legends [1]

[0]: https://github.com/vercel/satori

[1]: https://github.com/shepherdjerred/glitter-boys

Re: SVG Tutorial

#40

Post by HunorBorbely »

edw519 wrote: post #34

This is fantastic! I especially like the examples with curves, which I continue to struggle with, along with clipping. Personally, I'm partial to path which can do almost anything and tends to be less verbose than other methods. Long time student, but I see that I still have lots to learn. I suck so much at drawing and dislike images so much that for ease and performance, I built my entire side project with svg. Afte…

Thank you, I'm glad it helped. Cool comics!
Post reply on HN