Create an SVG

Creating an SVG isn't as intimidating as it looks. Let's create a basic one from scratch.

Because an SVG is just a text file written in XML, you can write the code directly inside your HTML web pages. Let's write our first SVG by combining the required root element with a basic shape.

Your First SVG

Here is an example of an SVG square embedded into an HTML document.

View Output

Let's break down the code above line-by-line so you understand how it works.

1. The <svg> Tag

All scalable vector graphic code must live inside an svg container. This tells the browser to expect mathematical coordinates rather than standard text or HTML formatting.

In our example, the tag requires three important attributes:

  1. width and height: These dictate the physical dimensions of the image canvas shown in the browser (in pixels). Here, we created a canvas 200 pixels wide and 200 pixels tall.
  2. xmlns: This stands for "XML Namespace". Because SVG isn't natively HTML, this URL tells the browser exactly which markup language specification to follow so it renders the code correctly. The standard SVG namespace URL is almost always http://www.w3.org/2000/svg.

2. The Shape (rect)

Inside the svg tag, we use elements to declare different shapes, paths, text, or definitions. In this example, we used the rect tag to draw a simple rectangle.

  1. x and y: These dictate the starting point for drawing our shape. In SVG, coordinates start at the top-left corner (0,0). Our rectangle begins drawing 50 pixels to the right, and 50 pixels down.
  2. width and height: The size of the actual shape being drawn. In this case, 100 pixels wide and 100 pixels tall.
  3. fill: This acts just like the background-color property in CSS. We've set the color of our square to darkorange.

Congratulations, you just wrote an SVG from scratch! With the basic structure out of the way, the rest of the tutorial will teach you the syntax for drawing far more complex paths, lines, and curves.