The symbol element for SVGs in HTML

Example Download

In this entry we will see a very useful element to work with SVGs, which is the <symbol> element; this element saves a lot of work and allows you to group series of basic figures to paint them using the <use> element.

The <symbol> and <use> element in SVGs

Taking our Android logo which we put together in a previous post Building our own Android logo with SVG in HTML, we define ourselves (or rather, the figures that make up the Android logo) inside the <symbol> element and then we simply paint the logo with <use> element; Let's first remember the HTML of our Android SVG/HTML logo:

<svg>
<!--cabeza-->
  <ellipse cx="170" cy="100" rx="50" ry="45"></ellipse>
	No support SVG :/s

  <!--antena izquierdo-->
  <rect x="197" y="0" width="4" height="30" rx="3" ry="3" id="antena1"></rect>
	No support SVG :/

  <!--antena derecho-->
  <rect x="124" y="77" width="4" height="30" rx="3" ry="3" id="antena2"></rect>
	No support SVG :/

  <!--ojos-->
  <circle cx="150" cy="80" r="7"></circle>
	No support SVG :/
  <circle cx="190" cy="80" r="7"></circle>
	No support SVG :/

  <!--pierna izquierdo-->
  <rect x="140" y="190" width="20" height="60" rx="15" ry="15" id="c"></rect>
	No support SVG :/
  <!--pierna derecho-->
  <rect x="180" y="190" width="20" height="60" rx="15" ry="15" id="c"></rect>
	No support SVG :/

  <!--brazo izquierdo-->
  <rect x="90" y="100" width="20" height="100" rx="15" ry="15" id="c"></rect>
	No support SVG :/

  <!--torzo-->
  <rect x="120" y="90" width="100" height="120" rx="15" ry="15" id="c"></rect>
	No support SVG :/
  <!--brazo derecho-->
  <rect x="230" y="100" width="20" height="100" rx="15" ry="15" id="c"></rect>
	No support SVG :/

  <rect x="115" y="100" width="110" height="10" id="b"></rect>
	No support SVG :/
</svg>

Grouping the logo figures with the <symbol> element

Now let's see how to group all the primitives that make up our Android logo with the <symbol> element:

    <symbol id= "android" viewBox= "0 0 500 500">
        <!--cabeza-->
        <ellipse cx="170" cy="100" rx="50" ry="45"></ellipse>
        No support SVG :/s

        <!--antena izquierdo-->
        <rect x="197" y="0" width="4" height="30" rx="3" ry="3" id="antena1"></rect>
        No support SVG :/

        <!--antena derecho-->
        <rect x="124" y="77" width="4" height="30" rx="3" ry="3" id="antena2"></rect>
        No support SVG :/

        <!--ojos-->
        <circle cx="150" cy="80" r="7"></circle>
        No support SVG :/
        <circle cx="190" cy="80" r="7"></circle>
        No support SVG :/

        <!--pierna izquierdo-->
        <rect x="140" y="190" width="20" height="60" rx="15" ry="15" id="c"></rect>
        No support SVG :/
        <!--pierna derecho-->
        <rect x="180" y="190" width="20" height="60" rx="15" ry="15" id="c"></rect>
        No support SVG :/

        <!--brazo izquierdo-->
        <rect x="90" y="100" width="20" height="100" rx="15" ry="15" id="c"></rect>
        No support SVG :/

        <!--torzo-->
        <rect x="120" y="90" width="100" height="120" rx="15" ry="15" id="c"></rect>
        No support SVG :/
        <!--brazo derecho-->
        <rect x="230" y="100" width="20" height="100" rx="15" ry="15" id="c"></rect>
        No support SVG :/

        <rect x="115" y="100" width="110" height="10" id="b"></rect>
        No support SVG :/
    </symbol>

Showing the Android logo with the <use> element

But with the HTML defined above it is not enough to display the Android logo; To display the logo it is necessary to use the <use> element by placing the identifier of the <symbol> element within the xlink:href attribute:

<symbol id= "android">
…
</symbol>
<use xlink:href= "#android" ... />

Changing the color of the path

It is possible to change the color of the path using the fill attribute:

<use xlink:href= "#android" fill= "DarkOrange"  width= "250" height= "250" />

Although for our logo it is not necessary.

Putting it all together:

By placing everything seen above, we obtain:

Your browser does not support SVG :/s Your browser does not support SVG :/ Your browser does not support SVG :/ Your browser does not support SVG :/ Your browser does not support SVG :/ Your browser does not support SVG :/ Your browser does not support SVG :/ Your browser does not support SVG :/ Your browser does not support SVG :/ Your browser does not support SVG :/ Your browser does not support SVG :/

Resizing and replicating our logo

Finally, using the <use> element repeatedly as shown in the following HTML:

    <use xlink:href= "#android" width= "150" height= "250" />
    <use xlink:href= "#android" width= "300" height= "500" />
    <use xlink:href= "#android" width= "600" height= "1000" />

The real advantage of defining the Android logo inside the <symbol> element is being able to resize and paint it as many times as we want.

We can paint as many Android logos as we want (three for our example) and by defining their width and length to vary their dimensions (resize the logos) we obtain:

We can define as many <use> elements as there are Android logos we want to paint.

The viewBox attribute

If you notice, we use the viewBox attribute in the <symbol> element; This attribute allows you to control the size of the elements within the SVG; The attribute is composed of the following values:

min-x
min-y
width
height

Therefore, if the min-x and min-y values are equal to the width and height of the SVG, there is a 1:1 relationship where each pixel will occupy exactly the size of the pixel, but if on the contrary, if the value of min -x and min-y are width/2 and height/2 of the width and height of the SVG; that is to say:

min-x = width/2
min-y = height/2

So each pixel occupies twice its space (a 1:2 ratio); that is, two pixels.

Example Download

Android

SVG

Figura

CSS

HTML

Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz In Udemy