Does anybody know how to learn SVG for web? Maybe there are some free courses or tutorials like FreeCodeCamp or Codecademy?
I can draw smth in the Inkscape. Sometimes I can change props of drawing. But I don’t feel free with this, like with HTML and CSS. I don’t know how to make SVG responsive and how to create SVG animation.
Can anybody help me, or give an advice?
1 Like
You can read specification https://www.w3.org/TR/SVG/ and experiment with some simple examples. Basic SVG animations are quite easy but you have to remember a few nuances. For example you must place SVG inline if you want to access it with javascript. Also styling in css is somewhat different. You have to use properties like “fill” and “stroke” which you don’t normally use for html elements. For simple animations you can also use SMIL. If you, however need some complex and programmable animations I strongly advise to use external library like http://snapsvg.io/ it makes it easier and works across all major broswers (even IE). As far as responsivenes is concerned it’s rather easy. You just set width and height of an SVG element to 100% and leave the viewbox as it is. Then the SVG element will fill 100% of the parent container.
Thank you, I think I will check w3 and snapsvg first