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.

 




Reacties

  1. Henk Ouwejan2 januari 2022 om 06:41

    Nog een kleine toevoeging. Handige tool om zelf SVG bestanden te maken.

    https://editor.method.ac/

    BeantwoordenVerwijderen

Een reactie posten

Bedankt voor je reactie. We mailen je zo snel mogelijk terug! WDG

Populaire posts van deze blog

Soms lijkt het alsof de CSS niet werkt.

-
Afbeelding
  Gepost door Huib Preij op 4 augustus 2022. WebDev. Soms (heel soms gelukkig) als ik een Website op de server heb geïnstalleerd in WebDev Deploiment, dan lijkt het alsof de CSS niet werkt. Alles staat door elkaar en er is geen enkele opmaak, zoals hierboven. Het moet er zo uitzien: Voer je dan de diagnose uit in de WebDev Administrator en kies je de betreffende Website, dan komt hij met een foutmelding die voor een doorsnee WebDev-programmeur moeilijk te begrijpen is. De oplossing was echter simpel. In de IIS heb ik onder Default Website de _web map van mijn applicatie verwijderd. Vervolgens de de zaak opnieuw geïnstalleerd en toen werkte alles weer.
Meer lezen

MARIA DB

-
Afbeelding
 WDG ZOOM 21 juli 2023 Snelle queries met Maria DB. Uitgebreid gesproken over de mogelijkheden en voordelen van MariaDB in vergelijking tot HFSQL. - PC SOFT heeft een Native driver voor MariaDB dat betekent dat je gewoon met de H-commando's van wLanguage kan werken. Alleen  hCheckStructure werkt niet (en misschien nog een paar analyse gerelateerde commando's) - In de Analyse gewoon Hyperfile Classic bestanden aanmaken. - HeidiSQL gebruiken om bestanden te bewerken.  https://www.heidisql.com/ - dBeaver is net zo iets als HeidiSQL Jan de Bruin had een voorbeeld van een Query met ca 2 miljoen records dat in HFSQL ongeveer 6 minuten duurde en in MariaDB 6 seconden. Jan zei dat je makkelijk in een Query met parameters kan werken. Marc Muylaert merkte op dat Param tussen accolades niet door MariaDB ongezet werden. Maar ..... merkte op als je het anders doet dan worden de Accolades al vervangen voordat het naar MariaDB gaat. . qryFlightsStat is SQL Query = [ SELECT * FROM  Flights W
Meer lezen

Strato problemen

-
Afbeelding
SERVER CRASH. ER VALT VEEL TE REDDEN  Als er een probleem ontstaat met je Strato server, ga dan heel voorzichtig te werk. Mijn server gaf een storing. Wilden niet meer starten. Later bleek dat ws door een samenloop van omstandigheden een update van de windows server was onderbroken en dat nu het systeem niet meer werkte. Hulp van Strato was meer dan moeizaam en slecht. Wel kreeg ik altijd snel iemand aan de lijn. Totaal 6x helpdesk gebeld. De laatste man leek iets meer op de hoogte te zijn en zette me op het goede spoor. De kans dat je een nieuwe installatie moet doen is heel groot. Had ik ook al van Jan de Bruin gehoord. GOEDE BACKUP OP ANDERE SERVER. Bij Strato kan de prijs voor een backup heel kostbaar zijn. 1.5 GB bakcup space kost €100/mnd Maar je kan bijvoorbeeld met Duplicati heel goed backups naar een andere server maken. Zorgt dat daar ook de Backup van HFSQL bij zit, Via Veilige Modus heb ik gelukkig alle relevante data kunnen redden. Zoals de huidige BDD-map met alle databas
Meer lezen