zuubaDigital

Shape Elements

the basics

The shape elements provide the foundational visual building blocks of an SVG.

In this section we'll discuss the basic shape elements and their attributes. A more detailed discussion of the presentation attributes that define look of the shape elements can be found here .

path

The path is the most powerful shape element, allowing for the most visual complexity. We’ll be exploring the path element in detail in the next section.

circle

cx, cy: the x and y coordinates of the center of the circle
r: radius
fill: the internal color of the shape.
stroke: the outline color of the shape.

1
2
3

<svg width="500" height="500" viewbox="0 0 500 500">
  <circle cx="250" cy="250" r="200" fill="orange" />
</svg>

ellipse

cx, cy: the x and y coordinates of the center of the ellipse
rx: the radius of the ellipse along the x axis
ry: the radius of the ellipse along the y axis
fill: the internal color of the shape.
stroke: the outline color of the shape.

1
2
3

<svg width="500" height="500" viewbox="0 0 500 500">
  <ellipse cx="250" cy="250" rx="200" ry="100" fill="orange" />
</svg>

rectangle

x, y: the x and y coordinates of the upper left corner of the rectangle
width: width
height: height
fill: the internal color of the shape.
stroke: the outline color of the shape.

1
2
3

<svg width="500" height="500" viewbox="0 0 500 500">
  <rect x="50" y="50" width="400" height="400" fill="orange"></rect>
</svg>

rectangle (rounded)

x, y: the x and y coordinates of the upper left hand cornder of the rectangle
width: width
height: height
fill: the internal color of the shape.
stroke: the outline color of the shape.
rx, ry: the radius of the circle that defines the corners

<svg width="500" height="500" viewbox="0 0 500 500">
  <rect
    x="50"
    y="50"
    width="400"
    height="400"
    rx="20"
    ry="20"
    fill="orange"
  ></rect>
</svg>

line

x1, y1: the x and y coordinates of the starting point
x2, y2: the x and y coordinates of the end point
stroke: the stroke color of the line

1
2
3

<svg width="500" height="500" viewbox="0 0 500 500">
  <line x1="100" y1="100" x2="400" y2="400" stroke="black" />
</svg>

polyline

points: the x and y coordinates for all the points that define the line
stroke: the stroke color of the line
fill: none if you just want the line, otherwise the browser will try to add a fill color - with sometimes unexpected results

<svg width="500" height="500" viewbox="0 0 500 500">
  <polyline
    points="60,60 90,390 140,70 190,414 240,70 290,350 340,60 390,265 440,80"
    stroke="black"
    fill="none"
  />
</svg>

fill: none

<svg width="500" height="500" viewbox="0 0 500 500">
  <polyline
    points="60,60 90,390 140,70 190,414 240,70 290,350 340,60 390,265 440,80"
    stroke="black"
    fill="orange"
  />
</svg>

fill: orange

polygon

points: the x and y coordinates for all the points that define the line
stroke: the stroke color of the line
fill: fill color
stroke: the outline color of the shape.

<svg width="500" height="500" viewbox="0 0 500 500">
  <polygon
    points="60,60 240,215 440,60 440,340 340,440 140,430 60,340"
    fill="none"
    stroke="black"
  />
</svg>

image

The image element allows you to add bitmap images - pngs or jpegs - to your svg.

href: the image path
x horizontal position
y vertical position
width: width
height: height

<svg width="500" height="500" viewbox="0 0 500 500">
  <image 
      href="https://plus.unsplash.com/premium_vector-1724876723896..." 
      x="50" y="50" height="400" width="400" />
</svg>

*note

The image element also has a preserveAspectRatio attribute that may affect it's appearance. Please refer to the aspect ratio lesson for more information.

stacking order

Shapes are stacked in order of appearance, with later elements on top.

<svg width="500" height="500" viewbox="0 0 500 500">
  <rect x="200" y="100" width="200" height="200" fill="lightgrey"></rect>
  <circle cx="200" cy="300" r="100" fill="orange" />
</svg>

circle is stacked above rect

< Prev: SVG Syntax Next: Paths >