Skip to content

Add an image to an SVG drawing

Jump to bottom
bartbutenaers edited this page Jul 20, 2020 · 7 revisions

In an SVG drawing, an "image" element can be used to display an image inside the drawing. This means however that the image should be stored in a location which is accessible by the "image" element via an URL. The image should be available for the Node-RED dashboard, but also - unless you edit your SVG source manually - for the SVG editor (e.g. our integrated DrawSvg).

This tutorial will describe different ways to provide access to an image, each with their own advantages and disadvantages...

Public images

When it is no problem that everybody on the web can see the image, then the easiest solution is to use a public accessible image. Indeed such an image is available for all the tools involved here (SVG editor and the Node-RED dashboard).

You can make an image public accessible in all kind of ways (e.g. via a cloud storage service like Dropbox). However in the following steps we will explain how to accomplish this by only using Node-RED:

  1. Store the image in a folder on your Node-RED server, for example:

    Image in folder

  2. Make that folder public accessible via the settings.js file:

    httpStatic: '/home/pi/node-red-static/',

    Instead of adding this image element manually to your SVG source, it is also possible to use DrawSvg to generate such an "image" element via an SVG editor. To use DrawSvg, specify the public URL as "href" property in the image properties:

    svg_image_public

  3. From now on the image will become public available via the URL of your Node-RED system: https://:1880/background.jpg

  4. Use that absolute URL of the image as "href" attribute value for an image element:

    <image xlink:href="https://www.roomsketcher.com/wp-content/uploads/2016/10/1-Bedroom-Floor-Plans.jpg"/>

  5. Now the image should become visible in any SVG editor and in the Node-RED dashboard.

Summarized:

  • Advantage: public images will be visible both in the Node-RED dashboard and also in your SVG drawing editor.
  • Disadvantage: everybody on the internet has access to that image, which might be a privacy issue ...

Private images

To avoid that everybody on the web can see the image, local images are also supported by this node.

  1. Store the image in a private folder on your Node-RED server, for example:

    Image in folder

  2. That server directory can be made accessible for the config screen of this node (and thus for DrawSvg), by entering the entire path of that directory in the "Settings" tabsheet:

    Server directory

  3. Use the relative path of the local image (which means relative to the specified folder) as href for an image element:

    <image xlink:href="xlink:href="/some_local_file_name"/>

    CAUTION: The first character has to be a / (linux) or \ (windows), otherwise the image won't be visualised!

  4. Now the image should become visible in both DrawSvg and in the Node-RED dashboard.

    CAUTION: The image will only be available in DrawSvg, but not in other SVG editors! |

The local images can be visualised (both in DrawSvg and the Node-RED dashboard) via a little hack: Indeed when DrawSvg (or the Node-RED dashboard) is started, the local path will be converted automatically to a base64 encoded URL (similar to option 3 below). Which means that the image will be stored inside the SVG, so both tools can access it. Once DrawSvg is closed, the base64 encoded URL will be replaced again automatically by the local image path (to make sure you won't notice anything). The following demo shows this for DrawSvg:

svg_base64_demo

Note in the above demo that the first time DrawSvg cannot display the image, since it cannot access the local path. But once you have returned to Node-RED and reopened DrawSvg again, from then on DrawSvg can show the image (since Node-RED will replace the local image path by a base64 URL every time you open DrawSVG).

Summarized:

  • Advantage: the local image is not visible for everybody on the world wide web.
  • Disadvantage: only the Node-RED dashboard and DrawSvg can show the image, but it won't be visible in any other SVG editor (which makes it hard to align other SVG shapes on top).

Base64 data url image

This is only to be used in very specific use cases!

Convert the image to a base64 encoded string, and use this string as a data URL in the image elements:

<image xlink:href="xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD..."/>

This means that the image data is completely stored into the SVG source (as a base64 encoded data URL)!

There are multiple ways to accomplish that:

  • Convert the image manually via a converter, e.g. using this online converter.

  • Use DrawSvg by loading a local image (stored on the pc where the dashboard is opened):

    svg_image_base64

Summarized:

  • Advantage: the image is always available (even in offline setups) for both DrawSvg and the Node-RED dashboard, since the image is stored inside the SVG drawing.
  • Disadvantage: the size of the SVG source string will become huge and full of unreadable (base64 encoded) data. Note that the SVG string is also stored in the Node-RED flow.json file (since it is a property of this SVG node), which means the flow.json file size will also become huge and unreadable!
Clone this wiki locally