SVG Basics for beginners

Tutorials & Examples
1

Hi all,
the last days i learned a lot of new things and now wanna share them with the community:

Like a lot of others, i google icon-pictures something like: smarthome.svg and save the prettiest icons to my harddisk. After a few days i have lots of icons collected and now i want to use them.

The format of SVG is quite different to other ‘Picture-Files’ (most of them are Pixel orientated):
The definition in the header of the SVG-File (here a example of one header) can be shown/edited via Notepad or Code,… any texteditor will do.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="1280.000000pt" height="731.000000pt" viewBox="0 0 1280.000000 731.000000"
 preserveAspectRatio="xMidYMid meet">
<metadata>
Created by someone, written by someone
</metadata>

There are a lot of possible attributes that you can define.
The complete picture definition is described via a ‘coordinating system’ to draw a line, box,… to building one/or more icon(s) created from a lot of unique items like lines,boxes,texts and that’s all only described in the XML.
If your file holds more than one icon then you will find one/more <g id="iconname"> block(s) inside the SVG-File. You can easily merge the <g id="iconname"> blocks as described here into one SVG-File holding all the icons for your project (be careful with the attributes stroke and strokewidth).

To address the merged SVG-File use: SVGFile.SVG#IconNameInSVGFile
via HTML for example:
<svg viewBox="0 0 48 48"><use xlink:href="/static/path_to_theme/svgfile.svg#iconname"></use></svg>

But in habPanel i did not get this working via the picture widget, had to read more…

Best regards Jens, maybe this is helpful for other beginners

  • Platform information:
    • Hardware: Popelrechner
    • OS: WIN10
    • Java Runtime Environment: java version “1.8.0_221”
      Java™ SE Runtime Environment (build 1.8.0_221-b11)
      Java HotSpot™ Client VM (build 25.221-b11, mixed mode)
    • openHAB version: 2.5M2
  • Issue of the topic: Definition SVG Icons Beginners
1 Like