SVG (Scalable Vector Graphics)

Anders dan bijvoorbeeld JPG of PNG bestanden bestaat een SVG bestand niet uit pixels. Een SVG bestaat uit een beschrijving van een object. Een belangrijk voordeel van een SVG bestand is dat ze compact zijn en omdat ze schaalbaar zijn heb je aan één afbeelding voldoende. Het vectorbestand schaalt immers keurig met de gewenste grootte. Zie het voorbeeld hieronder.

Een nadeel is echter dat maar weinig grafische bewerkingsprogramma's SVG kunnen bewerken. Ook Windev/Webdev kan dit niet. Je kunt een bestand wel openen maar, na een wijzing, is niet mogelijk om dit op te slaan als een SVG. Duurdere programma's als Adobe Illustrator kunnen dit wel.

Met een een tekst editor (notepad) kun je echter wel wijzingen aanbrengen in het bronbestand. Hieronder de beschrijving van de afbeelding hierboven.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<style type="text/css">
.st0{fill:#ffc44d;}
.st1{fill:#ffc44d;}
</style>
<g>
<path class="st0" d="M256,6C118.1,6,6,118.2,6,256c0,37.2,8.1,73.1,24.2,106.8L13.4,466.7c-1.7,10.5,1.7,21,9.2,28.2
c7.4,7.2,18.1,10.1,28.5,8.1l99.8-20.3C184.2,498.1,219.5,506,256,506c137.9,0,250-112.2,250-250S393.8,6,256,6z M256,472.9
c-33.2,0-65.4-7.6-95.6-22.4l-5.1-2.5L46.1,472l18.4-114.3l-2.4-4.8C46.8,322.4,39,289.8,39,256C39,136.4,136.4,39.1,256,39.1 S473,136.4,473,256S375.6,472.9,256,472.9z"/>
<g>
<path class="st1" d="M298.9,252.7c-2.5,3.6-5,7.1-7.6,10.4s-5,6.5-7.4,9.5h28.6v-41.8c-1.9,3.6-4.1,7.3-6.3,11 C303.8,245.5,301.4,249.1,298.9,252.7z"/>
<path class="st1" d="M256,97.8c-87.4,0-158.2,70.8-158.2,158.2c0,87.4,70.8,158.2,158.2,158.2c87.4,0,158.2-70.8,158.2-158.2
C414.2,168.6,343.4,97.8,256,97.8z M245.2,295v21.9h-79.7v-9c0-6.1,1-11.6,3.1-16.5c2.1-4.9,4.6-9.2,7.8-13.1
c3.1-3.9,6.5-7.3,10.2-10.3c3.7-3,7.2-5.7,10.6-8.1c3.5-2.5,6.6-4.9,9.2-7.2c2.6-2.3,4.9-4.5,6.7-6.8c1.8-2.3,3.1-4.5,4-6.8
c0.9-2.3,1.3-4.8,1.3-7.4c0-5.1-1.4-9-4.3-11.6c-2.9-2.6-7.3-3.9-13.3-3.9c-10.3,0-20.2,4.1-29.6,12.3v-23.2
c10.4-6.7,22.2-10.1,35.2-10.1c6.1,0,11.5,0.8,16.3,2.4c4.8,1.6,8.9,3.9,12.2,6.8c3.3,3,5.9,6.5,7.7,10.7 c1.8,4.2,2.6,8.9,2.6,14.1c0,5.5-0.8,10.4-2.5,14.7c-1.7,4.3-4,8.2-6.8,11.7s-6.1,6.7-9.7,9.6s-7.5,5.7-11.4,8.5
c-2.7,1.9-5.2,3.8-7.7,5.6c-2.5,1.9-4.7,3.7-6.6,5.5c-1.9,1.8-3.4,3.6-4.5,5.3c-1.1,1.7-1.7,3.4-1.7,4.9H245.2z M350.8,292.3
h-14.4v24.5h-24v-24.5h-52.2v-20.6c4.6-5.2,9.4-10.8,14.4-17c5-6.1,9.7-12.5,14.4-19c4.6-6.5,8.9-13.1,12.9-19.7
c4-6.6,7.4-12.9,10.1-18.9h24.5v75.5h14.4V292.3z"/>
</g>
</g>
</svg>

Om nu de afbeelding in het groen te tonen is het een kwestie van de fill color aanpassen en voila.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<style type="text/css">
.st0{fill:green;}
.st1{fill:green;}
</style>
<g>
<path class="st0" d="M256,6C118.1,6,6,118.2,6,256c0,37.2,8.1,73.1,24.2,106.8L13.4,466.7c-1.7,10.5,1.7,21,9.2,28.2
c7.4,7.2,18.1,10.1,28.5,8.1l99.8-20.3C184.2,498.1,219.5,506,256,506c137.9,0,250-112.2,250-250S393.8,6,256,6z M256,472.9
c-33.2,0-65.4-7.6-95.6-22.4l-5.1-2.5L46.1,472l18.4-114.3l-2.4-4.8C46.8,322.4,39,289.8,39,256C39,136.4,136.4,39.1,256,39.1
S473,136.4,473,256S375.6,472.9,256,472.9z"/>
<g>
<path class="st1" d="M298.9,252.7c-2.5,3.6-5,7.1-7.6,10.4s-5,6.5-7.4,9.5h28.6v-41.8c-1.9,3.6-4.1,7.3-6.3,11
C303.8,245.5,301.4,249.1,298.9,252.7z"/>
<path class="st1" d="M256,97.8c-87.4,0-158.2,70.8-158.2,158.2c0,87.4,70.8,158.2,158.2,158.2c87.4,0,158.2-70.8,158.2-158.2
C414.2,168.6,343.4,97.8,256,97.8z M245.2,295v21.9h-79.7v-9c0-6.1,1-11.6,3.1-16.5c2.1-4.9,4.6-9.2,7.8-13.1
c3.1-3.9,6.5-7.3,10.2-10.3c3.7-3,7.2-5.7,10.6-8.1c3.5-2.5,6.6-4.9,9.2-7.2c2.6-2.3,4.9-4.5,6.7-6.8c1.8-2.3,3.1-4.5,4-6.8
c0.9-2.3,1.3-4.8,1.3-7.4c0-5.1-1.4-9-4.3-11.6c-2.9-2.6-7.3-3.9-13.3-3.9c-10.3,0-20.2,4.1-29.6,12.3v-23.2
c10.4-6.7,22.2-10.1,35.2-10.1c6.1,0,11.5,0.8,16.3,2.4c4.8,1.6,8.9,3.9,12.2,6.8c3.3,3,5.9,6.5,7.7,10.7
c1.8,4.2,2.6,8.9,2.6,14.1c0,5.5-0.8,10.4-2.5,14.7c-1.7,4.3-4,8.2-6.8,11.7s-6.1,6.7-9.7,9.6s-7.5,5.7-11.4,8.5
c-2.7,1.9-5.2,3.8-7.7,5.6c-2.5,1.9-4.7,3.7-6.6,5.5c-1.9,1.8-3.4,3.6-4.5,5.3c-1.1,1.7-1.7,3.4-1.7,4.9H245.2z M350.8,292.3
h-14.4v24.5h-24v-24.5h-52.2v-20.6c4.6-5.2,9.4-10.8,14.4-17c5-6.1,9.7-12.5,14.4-19c4.6-6.5,8.9-13.1,12.9-19.7
c4-6.6,7.4-12.9,10.1-18.9h24.5v75.5h14.4V292.3z"/>
</g>
</g>
</svg>

Op de website van W3school staat goed uitgelegd wat je met SVG kunt doen.

https://www.w3schools.com/graphics/svg_intro.asp

Op deze manier kun je eenvoudig zelf icoontjes voor je applicatie maken.