> Up next SVG. This takes a lot of effort, time and patience
Because SVG's not that different from HTML, I simply cheated when it came to learning the basics.
I would just create a base image (like a bar chart) in something like Inkscape and then open the file up in a browser.
I would then manually manipulate the SVG code in a text editor (or a browser's development tools) and refresh the browser to see changes. You get the feel for how an SVG image works pretty quickly by adding and removing elements and altering attribute values, etc.
On web projects where I'm using something like Haml, I sometimes create SVG templates in Haml (from a base Inkscape file) if the requirements for the image are simple and specific. I've used this method to create donut charts, and small microcharts like bar charts and win-loss charts. The amount of template code I used was minimal, and there was no large client side library required.
Disclaimer: I know this is not the best way to learn how to create SVGs, but it worked for me for certain use cases. YMMV.
Comments
Because SVG's not that different from HTML, I simply cheated when it came to learning the basics.
I would just create a base image (like a bar chart) in something like Inkscape and then open the file up in a browser.
I would then manually manipulate the SVG code in a text editor (or a browser's development tools) and refresh the browser to see changes. You get the feel for how an SVG image works pretty quickly by adding and removing elements and altering attribute values, etc.
On web projects where I'm using something like Haml, I sometimes create SVG templates in Haml (from a base Inkscape file) if the requirements for the image are simple and specific. I've used this method to create donut charts, and small microcharts like bar charts and win-loss charts. The amount of template code I used was minimal, and there was no large client side library required.
Disclaimer: I know this is not the best way to learn how to create SVGs, but it worked for me for certain use cases. YMMV.