SVG (Scalable Vector Graphics)
SVG (Scalable Vector Graphics) is a file format for creating graphics that can be scaled to different sizes without losing quality. It is based on XML, and can be created and edited using a text editor or drawing software. Here is a really simple example of a SVG that is a circle, triangle, and square, so that you can see what the code looks like:
<?xml version="1.0" encoding="utf-8"?>
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="40" cy="40" r="40" fill="blue" style=""/>
<rect x="120" y="10" width="60" height="60" fill="red"/>
</svg>
And here is what that will produce visually:
There are a few free online SVG editors that can help you get started quickly:
| Software | Description |
|---|---|
| Boxy SVG | A free, online SVG editor that only requires an email address to signup for an account. |
| Vecteezy Editor | A free, cross-platform vector graphics editor that can be used online in your web browser. |
| Method | Method of Action creates tools, toys and games to help you learn design, for free. |
Core Concepts
Coordinate system
SVG graphics are drawn within a coordinate system, with the origin (0,0) located at the top-left corner of the canvas. You can use the x and y attributes to specify the position of an element within the coordinate system.
Shapes
SVG supports a range of shapes, including rectangles, circles, ellipses, and polygons. You can use the rect, circle, ellipse, and polygon elements to draw these shapes in your SVG.
| Element name | Description |
|---|---|
<circle> | Creates a circle with a given center point and radius. |
<ellipse> | Creates an ellipse with a given center point and x and y radius values. |
<line> | Creates a straight line with a given start and end point. |
<path> | Creates a path using a set of commands that define the shape of the path. |
<polygon> | Creates a polygon using a set of x and y coordinates that specify the vertices of the polygon. |
<polyline> | Creates a series of connected straight lines using a set of x and y coordinates that specify the points through which the lines pass. |
<rect> | Creates a rectangle with a given top-left corner and dimensions. |
Paths
SVG also supports more complex shapes using path elements, which can be created using a set of commands that define the shape of the path. The path element is used to draw paths in SVG.
Style
You can use the style attribute to apply styles to your SVG graphics, such as colors, gradients, and stroke widths. SVG also supports the use of CSS styles, which can be applied to your SVG graphics using the style element or an external stylesheet.
Transformations
You can use the transform attribute to apply transformations to your SVG graphics, such as translation, rotation, and scaling.
Groups
You can use the g element to group multiple graphics elements together, which can make it easier to apply styles or transformations to multiple elements at once.
Resources
CSS-Tricks: Everything You Need To Know About SVG
How to Code Images with 7 Examples
Get Ready for the Awesome Power of SVG: Scalable Vector Graphics