SVG Tutorial
svg-tutorial.com
SVG Tutorial
1–10 of 113 posts
Re: SVG Tutorial
#2Several years ago I was working on an interface and we were using SVGs for some graphics. We had two color schemes but one of the graphics was only in one of them, so I walk across the hall to get the hex codes for the other color. The design guy was blown away when we popped open the svg file and simply find-and-replaced all the colors to get the second color.
Re: SVG Tutorial
#3This is really neat! New SVG concept per lesson. Thanks for sharing!
As usual, a lot of these things I could learn if I decided to, but it’s nice when someone puts it together in a pretty package and shows up on HN.
Re: SVG Tutorial
#4One of the things that kinda clicked for me recently was learning that I can inline SVG tags in a react application as if they were JSX tags.
I dunno specifically if that’s first class or webpack is covering it, but it really feels good in a few cases to make an SVG component with some logic built in. So now I can have an SVG and some react-driven logic modifies its shape, colour, omitting sections of it, etc.
Re: SVG Tutorial
#5Several years ago I was working on an interface and we were using SVGs for some graphics. We had two color schemes but one of the graphics was only in one of them, so I walk across the hall to get the hex codes for the other color. The design guy was blown away when we popped open the svg file and simply find-and-replaced all the colors to get the second color.
Cool story but would you elaborate on this part?
> walk across the hall to get the hex codes for the other color
Re: SVG Tutorial
#6What’s the usual practice — do people code in SVG directly or they draw in for example Figma and generate a SVG file?
Re: SVG Tutorial
#7Several years ago I was working on an interface and we were using SVGs for some graphics. We had two color schemes but one of the graphics was only in one of them, so I walk across the hall to get the hex codes for the other color. The design guy was blown away when we popped open the svg file and simply find-and-replaced all the colors to get the second color.
Cool story but would you elaborate on this part? > walk across the hall to get the hex codes for the other color
it was the location of the cabinet of hex-codes. all neatly sorted alphabetically.
Re: SVG Tutorial
#8One of the things that kinda clicked for me recently was learning that I can inline SVG tags in a react application as if they were JSX tags. I dunno specifically if that’s first class or webpack is covering it, but it really feels good in a few cases to make an SVG component with some logic built in. So now I can have an SVG and some react-driven logic modifies its shape, colour, omitting sections of it, etc.
This is good for simple SVGs, or cases where you will have many variations.
But when you online SVG code, the browser can't cache the image. So if the SVGs are larger, or have only a few variations, you may prefer to have a separate endpoint for each image variant.
https://chat.openai.com/share/49e91be6-bdef-4f4d-a263-80a884...
Re: SVG Tutorial
#9What’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 names in the parts list could be clicked on to highlight the matching part in the diagram.
Re: SVG Tutorial
#10What’s the usual practice — do people code in SVG directly or they draw in for example Figma and generate a SVG file?
Design people will use their editor of choice - Illustrator/Sketch/Inkscape/etc. Some coders might tweak things using that software, but usually I'll edit the SVG directly, especially if there's interactivity.
For complicated shapes/curves I'll sometimes run it through an online editor to help visualize, this is a good one: https://yqnn.github.io/svg-path-editor/