How to Draw Basic Shapes with SVG

1. SVG (Scalable Vector Graphics) has a similar syntax as HTML.
   They are both based on XML.



2. Since HTML5 we can simply inline the code of an SVG image inside an HTML file like below.



3. It displays as:



4. We define an svg element with its width and height properties.
   This defines the drawing canvas where the coordinates go from the (0,0) coordinate from the top-left corner and grow downwards and to the right.



5. How to convert to/from a .svg file:


• inkscape input.svg --export-type=png --export-filename=output.png


• inkscape input.svg --export-type=png --export-dpi=300 --export-filename=output.png


• inkscape input.svg --export-type=pdf --export-filename=output.pdf


• rsvg-convert -o output.png -w 200 -h 200 input.svg



6. You can also combine CSS with SVG.

Some SVG Examples

How to use the viewBox property

1. We can move the origin of the coordinate system by setting the viewBox="minX minY width height" property.


2. For this property, we need to set four numbers.
   The first two are the position of the top-left corner.


3. The last two numbers in the property define the width and height of the region you're viewing.

Path Element

1. The shape of a path is defined by the d attribute.


• M x y ("Move to", where the cursor appears to.)


• L x y ("Line to", draws a straight line from the current point to the given coord.)


• H x ("Horizontal line to")


• V y ("Vertical line to")


• C x1 y1 x2 y2 x y ("Cubic Bézier curve", a smooth curve defined by two control points and an end point.)


• Q x1 y1 x y ("Quadratic Bézier curve", Like C but with only one control point.)


• A rx ry rotation largeArcFlag sweepFlag x y ("Arc / ellipse segment", draws parts of a circle/ellipse. Looks scary but is great for rounded logos.)


• Z ("Close the shape", draw a line back to where the last "M" started.)