Yes but what I really like of that tool is that it "dissects" the entire d parameter into its bits and it's much easier to understand what's going on, and draw "parametrically" stuff - whereas with Inkscape the process is way more organic and you just can pretty much forget about the innards of it.
I've built so many custom SVGs in Inkscape - I used to be an expert at it, but that information evaporates QUICKLY - and I open inkscape, and I cant even recall the mappings any longer...
But inkscape had a lot of really fast keybindings that helped me on many a huge project...
It's a shame because SVG is amazing. I came to web development from the art/design world, and I'd been using Adobe Illustrator for years. I was really excited to learn that I could program vectors, but was shocked to learn how little the average developer knew about them or SVG (at the time).
SVG 1.1, the last widely supported standard, came out in 2003, and the web has changed a lot in 20 years.
There are a lot of changes (probably a factor in lack of support) but broadly it is to bring CSS support to SVG, that the browsers have been doing for years.
I worked on a side project to learn SVG and the two biggest features that SVG 2 has is
* support for z-index. SVG elements are currently rendered in the order they are written in markup. This is very annoying if you have common groups of things that interweave with other things visually; but you can’t put them under a single element to select.
* HTML style text rendering. Today in HTML, you can have text respect a container’s width and break to newline when needed, and you can align any corner of a text element to the general CSS box model. SVG text does not have a way to specify a width, and you can only align to the baseline of the first line of multiline text. This is very infuriating.
—-
The major reason for lack of progress is that updating the w3c standards is like herding cats; and SVG needs to include the professional authoring tools that produce it, which is the 800-pound gorilla that is Adobe Creative, and everyone else trying to eat Adobe’s lunch, so it’s hardly a cooperative bunch.
A few months ago I looked into how to do an angled gradient in SVG and was baffled that is isn't supported. Now looking at this spec, it's also not in there. Why the hell is this something nobody talks about. Photoshop has it since ages...
Love the detail and thought that has been put into this post, along with the other blog posts as well. Visualizations and animations go along way. A very ascetically pleasing site that is informative as well.
I agree on the aesthetic quality of the entire site.
Given the amount of detail included in the post, I was surprised that the author didn't mention that the primitives used in the d attribute for the <path> element allow one to synthesise most of the other SVG elements ... or did I just miss that somewhere?
If you are looking for solid content on Bezier curves then Freya Holmér's video on The Beauty of Bézier Curves [1] is well worth the time it takes to watch.
It has interactive editor, and introduces the available commands/shapes.
Its not really a guide but it has links to relevant parts of svg specification which honestly has pretty decent images and such for understanding the commands.
Not sure if it's me, it says NaN above the title, and the button that says "Bend!" or "Straighten" doesn't actually do anything. I've tried multiple hard refreshes.
This happened to me, too. You have to scroll down to get the Bend/Straighten button to work. Basically, the visuals on the right side of the page correspond to what part of the instructions you have scrolled top the top.
This SVG path editor is incredibly useful if you're building or editing SVGs by hand: https://yqnn.github.io/svg-path-editor/
You can also do this in inkscape (although you have to hand-edit if you want to really optimize it)
Yes but what I really like of that tool is that it "dissects" the entire d parameter into its bits and it's much easier to understand what's going on, and draw "parametrically" stuff - whereas with Inkscape the process is way more organic and you just can pretty much forget about the innards of it.
I've built so many custom SVGs in Inkscape - I used to be an expert at it, but that information evaporates QUICKLY - and I open inkscape, and I cant even recall the mappings any longer...
But inkscape had a lot of really fast keybindings that helped me on many a huge project...
SVG is quite nice.
It would be a lot nicer if the proposal for SVG 2 was ever adopted, but that has been stuck in draft for years. https://svgwg.org/svg2-draft/
It's a shame because SVG is amazing. I came to web development from the art/design world, and I'd been using Adobe Illustrator for years. I was really excited to learn that I could program vectors, but was shocked to learn how little the average developer knew about them or SVG (at the time).
What are the key differences?
Why hasn't it been?
SVG 1.1, the last widely supported standard, came out in 2003, and the web has changed a lot in 20 years.
There are a lot of changes (probably a factor in lack of support) but broadly it is to bring CSS support to SVG, that the browsers have been doing for years.
I worked on a side project to learn SVG and the two biggest features that SVG 2 has is
* support for z-index. SVG elements are currently rendered in the order they are written in markup. This is very annoying if you have common groups of things that interweave with other things visually; but you can’t put them under a single element to select.
* HTML style text rendering. Today in HTML, you can have text respect a container’s width and break to newline when needed, and you can align any corner of a text element to the general CSS box model. SVG text does not have a way to specify a width, and you can only align to the baseline of the first line of multiline text. This is very infuriating.
—-
The major reason for lack of progress is that updating the w3c standards is like herding cats; and SVG needs to include the professional authoring tools that produce it, which is the 800-pound gorilla that is Adobe Creative, and everyone else trying to eat Adobe’s lunch, so it’s hardly a cooperative bunch.
8 replies →
Here's a feature I desperately wanted a dozen years ago. Browser vendors kind of lost interest in improving their SVG support around that time.
https://dev.w3.org/SVG/modules/vectoreffects/master/SVGVecto...
2 replies →
A few months ago I looked into how to do an angled gradient in SVG and was baffled that is isn't supported. Now looking at this spec, it's also not in there. Why the hell is this something nobody talks about. Photoshop has it since ages...
It's definitely supported via the `gradientTransform` attribute on e.g. linear gradients, as in this example: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/lin...
1 reply →
Love the detail and thought that has been put into this post, along with the other blog posts as well. Visualizations and animations go along way. A very ascetically pleasing site that is informative as well.
I agree on the aesthetic quality of the entire site.
Given the amount of detail included in the post, I was surprised that the author didn't mention that the primitives used in the d attribute for the <path> element allow one to synthesise most of the other SVG elements ... or did I just miss that somewhere?
Also good: https://svg-path-visualizer.netlify.app/
That one might even be better for some people.
Beatutifully made guide.
The numerical represention of Bezier curves is quite a challenge to internalize and the clean interactive canvas helps build some intuition.
Vector graphics and SVG deserve far more love.
If you are looking for solid content on Bezier curves then Freya Holmér's video on The Beauty of Bézier Curves [1] is well worth the time it takes to watch.
1. https://www.youtube.com/watch?v=aVwxzDHniEw&ab_channel=Freya...
Back when I helped out on the assembly instructions for the Shapeoko 2:
http://shapeoko.github.io/Docs/index.html
one of the things which was worked up was a way to make an SVG interactive:
http://shapeoko.github.io/Docs/content/tPictures/PS20028-100...
(click on part #11 in the list --- in retrospect the parts of the drawing itself should have highlighted the matching part entry in the list)
I like the explanations, but it's jarring to see Bézier treated with such little respect that he doesn't even get his name spelled correctly.
Specifically, the author wrote "bezier" in lowercase and without the accent.
There is https://svgbattle.andyfx.net
It has interactive editor, and introduces the available commands/shapes.
Its not really a guide but it has links to relevant parts of svg specification which honestly has pretty decent images and such for understanding the commands.
Excellent tutorial!
The hands-on practice built into each page is brilliant. I wish more tutorials were like this!
Excellent use of scroll jacking here
Amazing guide, love how "tactile" the animations feel!
Not sure if it's me, it says NaN above the title, and the button that says "Bend!" or "Straighten" doesn't actually do anything. I've tried multiple hard refreshes.
> it says NaN above the title
That is the name of the blog, the domain is nan.fyi.
NaN is the name of the blog. The animation is working for me on iOS Safari, but the text isn’t aligned perfectly.
This happened to me, too. You have to scroll down to get the Bend/Straighten button to work. Basically, the visuals on the right side of the page correspond to what part of the instructions you have scrolled top the top.
The NaN fooled me too, before I realized it was in the domain name too and must just be the name.