1. svg

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:

Images

There are a few free online SVG editors that can help you get started quickly:

SoftwareDescription
Boxy SVGA free, online SVG editor that only requires an email address to signup for an account.
Vecteezy EditorA free, cross-platform vector graphics editor that can be used online in your web browser.
MethodMethod 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 nameDescription
<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