Well, for my noob steps I usually go to sites like w3schools.com/graphics/svg_intro.asp :) But I personally also like to learn the hard way..trial error and lots of experimenting :)
If you install Inkscape you can try to create few simple files like: dot, straight line, circle, 2-point arc, triangle. Then save as SVG and open in any text editor to see how they are formed.
In basic form, it is xml style that describes shapes. Some shapes have predetermined tags, but going "drawing" mostly ends up with lines (paths). Just imagine it describes positions of pen drawing on canvas through coordinates, while defining stroke size (thickness of pen so to say) and color along the way.
Edit: just went through the link I posted real quick, it's real basic but good enough for quick start for all except paths. For a more in depth about paths you can use other resources, but I feel crucial for complete understanding is to know how vector graphics in general works. There are few types of points, simple points that is something like polyline if you have them connected, then two types of points that form a curve. If you have smooth wave like curve thats one type, if your points result in sharp .. "pointy" points (lol sorry, second language) that's other type. So if you were to draw a triangle you'd use one type, to draw a circle you'd use other type, to draw a moon-like shape you'd use third type, and to draw shape like capital letter "R" you'd mix and match. Thing is that with those 3 basic types, and using "move to" (moving pen in air) and "line to" (moving pen on canvas) you can form any line and shape, then color it with stroke and fills of different kinds... And you can create wonders, all in perfect vector graphics that can be resized infinitely.
Hope my edit helps some more to point you in the right direction :) In short SVG is VECTOR graphics described in XML. Once you learn vectors and XML you'll learn SVG automatically :D
Also, good way to learn even more about vectors, paths, strokes, and.moveTo LineTo logicnis by learning about Ghostscript and ... In few more tutorials you'll go from HTML to SVG to Ghostscript to PDF.. And then your views of digital worlds will expand crazily, yet will suddenly become "easy" and quite understandable :) I hope :D good luck!
Thanks for your detailed explanation! =) Just by reading your explanation I understand more - especially that SVG is a description of coordinate (vector), stroke size and color. Will certainly try to create SVG by using Inkscape and observe what its SVG in text is.
Will explore Ghostscript too, hear about it but didn't look very close at it before. I am mainly interested in SVG due to its capabilities to create very nice performant animation in the web.
http://perpetual.education is a design/programming school. We like to be part of the discussion over here at Dev.to / We have time-slots for free conversations for career advice IRL : )
@luxzg , any nice resources on learning svg? =) I am having trouble understanding how it works easily
Well, for my noob steps I usually go to sites like w3schools.com/graphics/svg_intro.asp :) But I personally also like to learn the hard way..trial error and lots of experimenting :)
If you install Inkscape you can try to create few simple files like: dot, straight line, circle, 2-point arc, triangle. Then save as SVG and open in any text editor to see how they are formed.
In basic form, it is xml style that describes shapes. Some shapes have predetermined tags, but going "drawing" mostly ends up with lines (paths). Just imagine it describes positions of pen drawing on canvas through coordinates, while defining stroke size (thickness of pen so to say) and color along the way.
Edit: just went through the link I posted real quick, it's real basic but good enough for quick start for all except paths. For a more in depth about paths you can use other resources, but I feel crucial for complete understanding is to know how vector graphics in general works. There are few types of points, simple points that is something like polyline if you have them connected, then two types of points that form a curve. If you have smooth wave like curve thats one type, if your points result in sharp .. "pointy" points (lol sorry, second language) that's other type. So if you were to draw a triangle you'd use one type, to draw a circle you'd use other type, to draw a moon-like shape you'd use third type, and to draw shape like capital letter "R" you'd mix and match. Thing is that with those 3 basic types, and using "move to" (moving pen in air) and "line to" (moving pen on canvas) you can form any line and shape, then color it with stroke and fills of different kinds... And you can create wonders, all in perfect vector graphics that can be resized infinitely.
Hope my edit helps some more to point you in the right direction :) In short SVG is VECTOR graphics described in XML. Once you learn vectors and XML you'll learn SVG automatically :D
Also, good way to learn even more about vectors, paths, strokes, and.moveTo LineTo logicnis by learning about Ghostscript and ... In few more tutorials you'll go from HTML to SVG to Ghostscript to PDF.. And then your views of digital worlds will expand crazily, yet will suddenly become "easy" and quite understandable :) I hope :D good luck!
Thanks for your detailed explanation! =) Just by reading your explanation I understand more - especially that SVG is a description of coordinate (vector), stroke size and color. Will certainly try to create SVG by using Inkscape and observe what its SVG in text is.
Will explore Ghostscript too, hear about it but didn't look very close at it before. I am mainly interested in SVG due to its capabilities to create very nice performant animation in the web.
We like Chris Coyier's book: abookapart.com/products/practical-svg
and css-tricks.com/lodge/svg/
Going through the css-trick url. Looking compact and nice. Thank you!