Journey of learning

How to overlay SVG images with svg.js library?

—

by

truth7c
in

What is SVG?

SVG (Scalable Vector Graphics) is an XML-based format for describing two-dimensional graphics.

It is widely used for displaying graphics on the web due to its scalability, light weight and high quality. Recently, browser favicons can be displayed in SVG format.

What is SVG.js library?

SVG.js is a lightweight JavaScript library designed for working with SVG.

It simplifies the process of creating, manipulating, and animating SVG elements directly in the browser.

SVG.js v3.2

Please refer to this article for instructions on how to install SVG.js.

How to add SVG images – Stacking

Look at this svg image. This image was created by simply stacking a pink- square and red and green check mark on top of the Google logo.

The JavaScript code for creating this image is below.

        var draw = SVG().addTo('body').size(100, 100);
        draw.image(message.favicon).size(100, 100);
        draw.rect(50, 50).attr({ fill: '#f06' }).move(50, 0);
        draw.svg(
            '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">' +
            '<path fill="#ff00ff" stroke="#00ff00" stroke-width="30" d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/>' +
            '</svg>'
        );
        const markedFavicon = draw.svg();
  • draw.image(): Adding the image of the google logo to the “draw” object.
  • draw.rect(): Adding the rectangle to the “draw” object.
  • draw.svg(): Importing the <svg> information into “draw” object.

When importing an <svg> into the “draw” object, resizing the imported image itself ends up altering the size of the “draw” object as well, see the code and the sample image below.

draw.svg(
            '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">' +
            '<path fill="#ff00ff" stroke="#00ff00" stroke-width="30" d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/>' +
            '</svg>'
        ).size(50, 50);

How to add SVG images – Nesting

If you want to resize or move only the imported image without affecting the “draw” object, it’s recommended to use the nested() method.

This image is created by using draw.nested() to create a child element, and importing the <svg> data into the child “nested” object.

After that, the size of this child element is adjusted, and it is moved accordingly.

        var draw = SVG().addTo('body').size(100, 100);
        draw.image(message.favicon).size(100, 100);
        draw.rect(50, 50).attr({ fill: '#f06' }).move(50, 0);
        var nested = draw.nested();
        nested.svg(
            '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">' +
            '<path fill="#ff00ff" stroke="#00ff00" stroke-width="80" d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/>' +
            '</svg>'
        ).size(70, 70).move(30, -10);
        
        const markedFavicon = draw.svg();

Stacking or Nesting?

Stacking is straightforward and works well when there are few elements, as it directly layers them at the root level.

On the other hand, using Nesting allows you to apply transformations such as position changes, rotations, and scaling to the entire nested group at once.

Comments

Leave a comment