SVG Tutorial / Transformations / Day 11

How to Reuse Image Elements in SVG

Instead of repeating the same code over and over again we can also reuse image elements.

How to draw a Sun icon with SVG

After drawing a Moon Icon it’s time to draw a Sun icon. You can also check out this YouTube tutorial that covers these icons in more details.

Let’s draw simple sun icon. We start with a circle element to draw the core of the sun, and we draw a line to draw a sunray.

-15, -15
0, 0 0, 11 0, 14 0, 0 0, 11 0, 14
30, 30 
<svg
  width="200"
  height="200"
  viewBox="-15 -15 30 30"
>
  <circle r="6" />


  <line
    stroke="black"
    stroke-width="2"
    stroke-linecap="round"
    x1="0"
    y1="11"
    x2="0"
    y2="14"
  />
</svg>

Now, once we have one ray, we can reuse the same line element to draw the others. We can give this ray an id and reuse it with the use element.

Then, we can move the lines to their correct position with the transform command in the same way we did with the star example, except that this time, we increment the rotation by 45 degrees for each ray.

-15, -15
0, 0 0, 11 0, 14 0, 0 0, 11 0, 14
30, 30 
<svg
  width="200"
  height="200"
  viewBox="-15 -15 30 30"
>
  <circle r="6" />


  <line
    id="ray"
    stroke="black"
    stroke-width="2"
    stroke-linecap="round"
    x1="0"
    y1="11"
    x2="0"
    y2="14"
  />


  <use
    href="#ray"
    transform="rotate(45)" />
  <use
    href="#ray"
    transform="rotate(90)" />
  <use
    href="#ray"
    transform="rotate(135)" />
  <use
    href="#ray"
    transform="rotate(180)" />
  <use
    href="#ray"
    transform="rotate(225)" />
  <use
    href="#ray"
    transform="rotate(270)" />
  <use
    href="#ray"
    transform="rotate(315)" />
</svg>

You can use the Sun icon above and the Moon icon we are about to cover later to create a toggle button that can switch between bright and dark modes. Check out this YouTube tutorial to learn how.

How to Draw a Snowflake with SVG

We can use the same technique to define a branch of a snowflake and then reuse it six times to draw a snowflake.

How to Draw Basic Paths with SVG

The branch is defined as a path. Earlier we already covered how to draw basic paths. Here we draw the branch in a similar way. We can draw a simple line – the main branch – by using the move to (M) and line to (L) commands:

-100, -100
0, 0 0, -90 0, 0 0, -90
200, 200 
<svg
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <path
    d="M 0 0 L 0 -90"
    stroke="#E5C39C"
    stroke-width="5"
  />
</svg>

Then we can continue drawing, and add a side branch by adding another move to and line to command. Hover over the coordinates in the code or on the image to see how they are positioned.

-100, -100
0, 0 0, -90 0, -20 20, -34 0, 0 0, -90 0, -20 20, -34
200, 200 
<svg
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <path
    d="
      M 0 0 L 0 -90
      M 0 -20 L 20 -34"
    stroke="#E5C39C"
    stroke-width="5"
  />
</svg>

We continue adding side branches with the move-to and line-to command. The finished branch looks like this:

-100, -100
0, 0 0, -90 0, -20 20, -34 0, -20 -20, -34 0, -40 20, -54 0, -40 -20, -54 0, -60 20, -74 0, -60 -20, -74 0, 0 0, -90 0, -20 20, -34 0, -20 -20, -34 0, -40 20, -54 0, -40 -20, -54 0, -60 20, -74 0, -60 -20, -74
200, 200 
<svg
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <path
    id="branch"
    d="
        M 0   0 L   0 -90
        M 0 -20 L  20 -34
        M 0 -20 L -20 -34
        M 0 -40 L  20 -54
        M 0 -40 L -20 -54
        M 0 -60 L  20 -74
        M 0 -60 L -20 -74"
    stroke="#E5C39C"
    stroke-width="5"
  />
</svg>

Note that we also assigned an id for this path. Once we define the branch, we can reuse it multiple times with the use command.

<svg width="200" height="200" viewBox="-100 -100 200 200">
  <path
    id="branch"
    d="
      M 0 0 L 0 -90
      M 0 -20 L 20 -34
      M 0 -20 L -20 -34
      M 0 -40 L 20 -54
      M 0 -40 L -20 -54
      M 0 -60 L 20 -74
      M 0 -60 L -20 -74"
    stroke="#E5C39C"
    stroke-width="5"
  />


  <use href="#branch" transform="rotate(60)" />
  <use href="#branch" transform="rotate(120)" />
  <use href="#branch" transform="rotate(180)" />
  <use href="#branch" transform="rotate(240)" />
  <use href="#branch" transform="rotate(300)" />
</svg>