SVG's are scalable vector graphics. They consist of instructions for the computer to follow to create the drawing.
An SVG file is an XML markup file and thus is super simple to create yourself. All SVG's start out with an outer
<svg version="1.1" width="300" height="200" viewBox="x1 y1 x2 y2" xmlns="http://www.w3.org/2000/svg"> <!-- Version is not necessary --> <!-- W/H set during render, can be overwritten via CSS --> <!-- Viewbox is the part of grid to be shown --> <!-- xmlns is required only for SVG files, not inline HTML --> </svg>
Drawing Shapes and Paths
SVG's use a grid system, where positive X is right and positive Y is down. The top left of the document is then
By default, renderings that come first, are placed below renderings that come later.
<svg ...> <rect ...></rect> // Behind the circle <circle ...></circle> // On top of the rect </svg>
You can group SVG elements in a
<g> container, and all transformations made on the container will occur to their children.
path element is how you "pick up" and "put down" your "pen", as well as draw the lines which can make up a filled shape or just a stroked line. The directions go within the
M x y is when you place your pen a given position without a stroke.
L x yis when you draw a line to (x,y) from your starting point.
<!-- This will move the pen to (0, 10) and draw a line to (10, 0) in the given box --> <path d="M 0 10 L 10 0"></path>
Rectangles are drawn with the
Circles are drawn with the
circle element, with a center X/Y and a radius.
<circle cx="50" cy="50" r="50"/>
Other polygons are drawn with the
polygon element and a series of
X,Y points separated by spaces.
<polygon points="0,100 50,25 50,75 100,0" />
External file or inline HTML?
External files allow the computer to only have to load the data once and then reuse it throughout the page. If you have it written out multiple times, that is a lot of extra work.
Last modified: 202107020546