SVG Basics:
SVG means Scalable Vector graphics which means an image saved in svg format can be scaled without any degradation in the pixel quality. SVG uses XML to define an image grapics.
SVG starts with an svg tag followed by the attributes and elements of svg and then ends with an svg tag. All the elements of an svg can be animated in css, javascript and jquery.
SVG Text:
Text in SVG starts with a text element. The following is simple text in svg
In the above example x and y are the starting positions of the text inside svg and fill is the color of the text.
Basic SVG Shapes:
Shape element in SVG starts with the name of the shape followed by it's attributes. The following are a few examples of the shapes in svg:
In the above example rect means rectangle shape, width and height defines the width and height of rectangle, fill is the background of the rectangle in r,g,b and stroke is the border color of rectangle.
In the above example cx and cy are the co-ordinates of the center of the circle and r is the radius of the circle.
In the above example cx and cy are the co-ordinates of the center of the ellipse and cx and cy are the horizontal and vertical radii of the ellipse respectively. If we keep cx = cy, ellipse will take a circular shape.
In the above example x1 and y1 are the start postions of the line and x2 and y2 are the end positions of the line.
Stay tuned for more lessons...
Draw a glowing lamp using SVG
SVG Filter Effects
Drawing Paths in SVG
Drawing a cup using SVG Path Element
SVG Text Element And Attributes
No comments:
Post a Comment