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