This is a short guide on how to draw a vector graphic using the <svg> element in html5.
Table of contents
An example
Draw a path
Draw a circle
The svg element
Use svg as a background
References
An example
This is a couple of easy shapes you can do with the svg.
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" style="background-color: #f9f9f9">
<path d="M0,0 L100,0 L75,25 L75,75 L100,100 L0,100 L25,75 L25,25 L0,0" fill="#f15bb5"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" style="background-color: #f9f9f9">
<circle cx="50" cy="50" r="50" fill="#f15bb5" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" style="background-color: #f9f9f9">
<path d="M0,45 L40,85 L100,25 L85,10 L40,55 L15,30 L0,45" fill="#f15bb5"></path>
</svg>Draw a path
The path element is placed as a child of the svg element.
<path d="M0,0 L100,0 L50,50 L0,0" fill="#f15bb5" />[d]
This is where the drawing is made. First you need to set a starting point (M) for the marker/”pen”. Then you can draw lines (L) and arches (A). Refer to the example above for the following code.
M0,0 moves the marker to the coordinates X0, Y0.
L100,0 draws a line from the marker position (X0, Y0) to X100, Y0. This creates a horizontal line that is 100 units long.
L50,50 draws a line form the marker position (X100, Y0) to X50, Y50. This creates a line that goes 50 units to the left and 50 units down.
L0,0 draws a line from the marker position (X50, Y50) to X0, Y0 which is the starting position, finishing the triangle.
[fill]
This sets the fill color of the drawing. If no color is set the drawing is filled with black color. Set fill=”none” to not fill.
[stroke]
This sets the stroke color.
Draw a circle
The circle element is placed as a child of the svg element.
<circle cx="50" cy="50" r="50" fill="#f15bb5" />[cx] and [cy]
The cx and cy determins where the center of the circle should be. In the example above it’s set to X50, Y50 pixels.
[r]
This is the radius of the circle.
[fill] and [stroke]
See path above…
The svg element
[width] and [height]
Width and height defines the the svg container size in pixels. These sizes are used as reference for the other sizing values.
[viewBox]
The viewBox can be a little complex to understand. See this website for an interactive explanation and the YouTube clip below for a demonstation.
The values of viewBox are defined as x, y, width and height.
X and Y is an offset of each axis. If the x value is 50 the starting point of the canvas is panned 50% of the container size (see width and height above) to the left. To pan to the right x is set to -50. Same for the y axis. Using these values you can position your drawing inside the svg container. However, by doing this your content may be cropped since it’s pushed from the original starting point of the canvas.
The example below shows a circle that is pushed 50% to the right.
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="-50 0 100 100">
<circle cx="50" cy="50" r="50" fill="#f15bb5" />
</svg>To scale or ”zoom” the content so that it fits inside the container, use the width and height values. If the width is increased, more units fit inside the canvas which will give the effect of zooming out and the content will appear smaller. The drawing is 100 units wide so making the viewBox 200 units wide will ”zoom out” the canvas so that the drawing appears smaller.
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 200 100">
<circle cx="50" cy="50" r="50" fill="#f15bb5" />
</svg>The svg will always keep its aspect ratio so when zooming in too much will effect the aspect ratio, it won’t zoom any more, just start panning to the side.
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 50 100">
<circle cx="50" cy="50" r="50" fill="#f15bb5" />
</svg>Use svg as a background
If you want to use an svg drawing as a background image you should use css. In the example below the svg is used as a custom select indicator.
<style>
.select {
/* General styling */
padding: 10px;
padding-right: 30px;
border: 1px solid #ddd;
border-radius: 5px;
color: #333;
height: initial; /* Fix WordPress fixed select height */
/* Remove default indicator */
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
/* Add custom svg indicator */
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='5' viewBox='0 0 100 50'><path fill='%23333' d='M0,0 L100,0 L50,50 L0,0' /></svg>");
background-position: right 10px top 50%;
background-repeat: no-repeat;
background-size: 10px;
}
</style>
<select class="select">
<option>Option 1</option>
<option>Option 2</option>
</select>The code explained
General styling
This part is basiclly just visual design of the select element except for the right padding that needs to be larger to make som air to the left of the arrow. The width of the arrow is 10px and it’s positioned 10px from the right which makes another 10px a good choice for the distance to the content on the left.
Add custom svg indicator
- background-image: url() – First, define the data type with ”data:image/svg+xml” followed by a comma. Then you can add the svg tag. It might be helpful to design the design in a separate document and when it’s finished paste it in this line. For the fill color, the ”#” must be replaced with the unicode character ”%23”. %23333 is really #333.
- background-position: right 10px top 50% – Position the svg 10px from the right and vertically aligned in the middle.
- background-repeat: no-repeat – Do not repeat the background, we only want one arrow.
- background-size: 10px – The size, in this case width, of the svg.