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

51–60 of 113 posts

Re: SVG Tutorial

#51

Post by sircastor »

thakoppno wrote: post #5
sircastor wrote: post #2

Several 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

Sorry - that wasn't clear. Across the hall were our Design folks. They had the appropriate colors (in hex) that I needed.

Re: SVG Tutorial

#52

Post by simonw »

fy20 wrote: post #45
otteromkram wrote: post #41

Earlier quoted context omitted.

Yeah, there are lots of tools to help with this. Why post a link that is off topic? Might be hard to believe, but some folks want to learn stuff and understand how things work under the hood, which is a group that OP's site appears to target.

Actually I've been working on a task that needs me to generate SVGs today, and satori looks like it's going to be much easier to achieve what I want. So thanks shepherdjerred!

Satori was a really useful tip for me too.

Re: SVG Tutorial

#53

Post by johnfn »

SVG + React is really underrated, IMO. You get all the power and abstractions of React, but instead of rendering DOM, you can render arbitrary graphics. I've used this for rendering graphs and charts, and for a certain subset of use-cases, it demolishes Canvas. For instance, if you need a little bit of interactivity, but you don't need anything too graphically crazy like per-pixel manipulation.

e.g., doing hover effects in Canvas is a huge pain because you have to do all the work to figure out which element the mouse is on top of. With SVG you just use builtins like onmouseover!

Re: SVG Tutorial

#54

Post by HunorBorbely »

johnfn wrote: post #53

SVG + React is really underrated, IMO. You get all the power and abstractions of React, but instead of rendering DOM, you can render arbitrary graphics. I've used this for rendering graphs and charts, and for a certain subset of use-cases, it demolishes Canvas. For instance, if you need a little bit of interactivity, but you don't need anything too graphically crazy like per-pixel manipulation. e.g., doing hover effe…

Totally. There are many cases when HTML Canvas is way more performant, but if you don't build the next Figma, then working with SVG is way more convenient

Re: SVG Tutorial

#55

Post by HunorBorbely »

Thank you for the great feedback, I really appreciate it. I fixed some errors you found. Let me know if something still doesn't work. It's still a bit in the process of fine-tuning.

For instance, does anyone know why the thumbnail preview does not work on Twitter? It works with the sub-pages.

Re: SVG Tutorial

#56

Post by HunorBorbely »

dimmke wrote: post #50

Awesome resource! I wrote a blog post just last week that is very similar in nature to this, but about achieving a specific effect in SVGs: https://daniel.do/article/making-noisy-svgs/

Super cool effect. Yes, SVGs can be a rabbit hole. This is just scratching the surface of it

Re: SVG Tutorial

#57

Post by HunorBorbely »

haroldp wrote: post #44
solardev wrote: post #25

Earlier quoted context omitted.

As a frontend dev who also works in UX and graphics from time to time, I find it helpful to be able to do both, looking at SVGs as both a vector graphics format and a human-readable XML. IME the workflow depends more on whether any SVG is meant to be illustrative (like art) or quantitative (like charts) or interactive and animated/mutable (like a game). For something like this bell example ( https://svg-tutorial.com/…

> And for things like the ringer (is that what you call it? the orange ball thing at the bottom of the bell that strikes the bell to make the sound) The "clapper". I am still on the steep end of the SVG learning curve, but also generally start in Illustrator and then export, clean up, and hand-code the details.

The funny thing about writing tutorials like this as a non-native speaker myself is also googling how to call things like the "clapper". I also didn't know what it was called before writing this article.

Re: SVG Tutorial

#58

Post by simonw »

The advent calendar UI is nice but makes it hard to quickly browse the available content. Here's a full list of the articles:

- How to Draw Basic Shapes with SVG - https://svg-tutorial.com/svg/basic-shapes

- How to Build a Christmas Tree with SVG - https://svg-tutorial.com/svg/polygon

- How to Make a Gingerbread Figure with SVG - https://svg-tutorial.com/svg/gingerbread-figure

- How to Build a House with SVG - https://svg-tutorial.com/svg/house

- How to use clip-path with SVG - https://svg-tutorial.com/svg/clip-path

- How to Draw a Basic Path with SVG - https://svg-tutorial.com/svg/basic-path

- How to Draw a Star with SVG - https://svg-tutorial.com/svg/transform

- How to Draw a Snowflake with SVG - https://svg-tutorial.com/svg/use

- How to Draw a Forest with SVG - https://svg-tutorial.com/svg/forest

- How to Use Gradients with SVG - https://svg-tutorial.com/svg/gradient

- How to Draw Quadratic Bézier Curves with SVG - https://svg-tutorial.com/svg/quadratic-bezier

- How to Draw Cubic Bézier Curves with SVG - https://svg-tutorial.com/svg/cubic-bezier

- How to Draw a Bell with SVG - https://svg-tutorial.com/svg/bell

- How to Draw an Arc with SVG - https://svg-tutorial.com/svg/arc

- How to Draw a Ribbon with SVG - https://svg-tutorial.com/svg/ribbon

- How to Draw a Bear with SVG - https://svg-tutorial.com/svg/bear

- How to Draw Text Along a Path with SVG - https://svg-tutorial.com/svg/text-path

- How to Animate Along a Path with SVG - https://svg-tutorial.com/svg/path-based-animation

- How to Add Animation on Hover of an SVG element - https://svg-tutorial.com/svg/animation-on-hover

- How to Animate a Snowing effect with SVG and CSS - https://svg-tutorial.com/svg/snowing

- How to Create Background Patterns with SVG and CSS - https://svg-tutorial.com/svg/background-pattern

- How to Draw a Clock with SVG and JavaScript that Shows the Actual Time - https://svg-tutorial.com/svg/clock

- How to Add Interaction to SVG elements with JavaScript - https://svg-tutorial.com/svg/interaction

- How to Generate an SVG Diagram from JavaScript - https://svg-tutorial.com/svg/data-driven-diagram

- How to Break Down an SVG Image into Multiple Components - https://svg-tutorial.com/svg/multiple-components

Generated by running this in Firefox DevTools:

    copy(Array.from(document.querySelectorAll('.day'), el => {
        const title = el.querySelector('.title').textContent;
        const url = el.href;
        return `- ${title} - ${url}`
    }).join('\n\n'))

Re: SVG Tutorial

#59

Post by HunorBorbely »

gwnywg wrote: post #49

On day 5 they draw an ornament with motif. Funny how it's rendered in Firefox on Android on my phone- none of the images contains motif clipped to the ornament :)

Ouch. Some browsers might not support every feature. Gradients also have some issues. Luckily it seems to be all right so far in desktop browsers.

Re: SVG Tutorial

#60

Post by HunorBorbely »

simonw wrote: post #58

The advent calendar UI is nice but makes it hard to quickly browse the available content. Here's a full list of the articles: - How to Draw Basic Shapes with SVG - https://svg-tutorial.com/svg/basic-shapes - How to Build a Christmas Tree with SVG - https://svg-tutorial.com/svg/polygon - How to Make a Gingerbread Figure with SVG - https://svg-tutorial.com/svg/gingerbread-figure - How to Build a House with SVG - https:…

Lol :) Maybe I should just put this below the calendar. What do you think?
Post reply on HN