Interactief SVG-plaatjes tekenen en wijzigen

Op deze pagina wordt beschreven hoe je het aanpakt om SVG.plaatjes interactief te wijzigen. Zoals met alles op deze website, komt er geen server aan te pas. Alles gebeurt lokaal, in de browser.

Hieronder zie je een plaatje, dat is getekend met SVG. Als je er op klikt of tikt verschijnt de code van dat onderdeel in het tekstveld onder het plaatje. Daar kun je wijzigen. Als je op "Klaar" klikt worden de wijzigen in het plaatje verwerkt.
Als je op "Nieuw" klikt, wordt het plaatje gewist en kun je code voor een nieuw plaatje invoeren.
De afmetingen van het nieuwe plaatje zijn h × b = 320px × 600px. Die kun je naar eigen inzicht wijzigen.
In alle gevallen is het nodig dat de <svg>-tag, met hoogte- en breedteattributen en eind-tag, in de code aanwezig is. Anders verdwijnt het plaatje uit beeld.
Met een klik op "Reset" wordt de pagina opnieuw geladen en ga je terug naar het oorspronkelijke plaatje. Er is geen 'undo'-functie.

N.B.: De bewerkte plaatjes kunnen niet direct worden opgeslagen. De aanpak om dat te doen (met Windows) is als volgt:
•   Selecteer alle code in het editveld en kopieer die naar het klembord met CTRL+C.
•   Open Kladblok of een andere teksteditor en plak de code met CTRL+V.
•   Sla het bestand op in je PC
Terugladen van het gewijzigde plaatje in de editor gaat als volgt:
•   Open het opgeslagen bestand in Kladblok
•   Selecteer de inhoud en kopieer die naar het klembord met CTRL+C.
•   Selecteer de volledige inhoud van het editveld.
•   Plak de code op het klembord in het editveld met CTRL+V. en klik op Klaar.

• Er worden twee items besproken:
  1. De werking van het script.
  2. Toepassen in je eigen site.
   
• De werking van het script
• De code bestaat uit HTML en JavaScript. Het JavaScript van het voorbeeld staat in het document, maar je kunt het ook in een apart bestand zetten.
  Voor de opmaak is alleen inline-CSS gebruikt.
   
• HTML
• De HTML van het voorbeeld beschrijft twee dingen:
  1. Het SVG-plaatje.
  2. Het formulier om de code van het plaatje te wijzigen.
• Ad. 1: Het plaatje is een enkele <svg>-tag, die gewoon links is gepositioneerd in het document. De afmetingen zijn 600px breed × 320px hoog. De zwarte rand is gemaakt met een inline style-attribuut.
• Ten behoeve van het wijzigen van het plaatje is de <svg>-tag ingebed in een <div>-tag met id="plaatje", waardoor het mogelijk is de volledige svg-code te vervangen en zo het plaatje te wijzigen.
• De meest gebruikte svg-tags staan in de broncode van het plaatje. Raadpleeg ook het item Graphics op je website II: <svg>-tag.
• De volledige specificatie van de hier gebruikte versie 1.1 (second edition) van SVG vind je op de site van W3C.
• Ad. 2: Het formulier is een enkele <form>-tag, die gewoon links is gepositioneerd in het document. Alle opmaak binnen dit formulier gaat met inline style-attributen.
• Het formulier bevat vier elementen, te weten een <textarea> met id="codeEdit" en drie knoppen die zijn gemaakt met input.
• De knop "Klaar" heeft type="submit". Deze knop activeert de JavaScript-function verwerkEdit(), via het action-attribuut in de form-tag.
• De knoppen "Reset" en "Nieuw" hebben type="button". Deze knoppen activeren de JavaScript-functions reloadEdit() resp. clearEdit(), via onclick.
   
  
• JavaScript
• [Het JavaScript bestaat uit vijf functions, die hieronder worden besproken. Centraal is de variabele svgPlaatje, die wordt gebruikt voor de communicatie tussen het platje en het formulier.
• De function initialiseer() haalt de svg-code van het plaatje op en zet die in svgPlaatje. Vervolgens wordt maakEdit() aangeroepen, die de code in het editveld (tetxarea)van het formulier plaatst.
  Deze function wordt éénmalig uitgevoerd, na het laden van de pagina, via window.addEventListener().
• maakEdit() plaatst de code van het plaatje, die in svgPlaatje staat, in het editveld van het formulier.
• De function verwerkEdit() wordt aangeroepen als er op de knop Klaar wordt geklikt. De inhoud van het editveld wordt opgehaald en in svgPlaatje gezet. Deze wordt vervolgens in de innerHTML van de div-tag, die om de svg-tag staat, gezet.
• De function reloadEdit() wordt aangeroepen als er op de Reset-knop wordt geklikt. Deze herlaadt de pagina, zodat het oorspronkelijke plaatje weer wordt getoond.
• De function clearEdit() wordt aangeroepen als er op de knop Nieuw wordt geklikt. Er wordt een nieuwe code aangemaakt, die alléén een svg-tag bevat. Deze code wordt in svgPlaatje gezet, die vervolgens in het editveld en in het plaatje zelf wordt geplaatst.
   
• Toepassen in eigen site
• Download de .zip-file en pak hem uit. Bouw de code in in je eigen document zoals hieronder is aangegeven.
• Pas de inline style in de HTML aan, aan je eigen behoefte: Opmaak van het editveld, de knoppen, enz..
• Pas desgewenst de afmetingen van het plaatje aan in de svg-tag. Neem in dat geval ook de eerste regel van de function clearEdit() mee.
• Het JavaScript behoeft —behalve het hierboven genoemde— geen aanpassing.

Gebruik:

• De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.

De code van het voorbeeld ziet er als volgt uit:
 
(Zet dit in de <HEAD>).

<script>
let svgPlaatje = "";
function maakEdit() {
    document.getElementById('codeEdit').value = svgPlaatje;
}
function verwerkEdit() {
  svgPlaatje = document.getElementById('codeEdit').value;
  document.getElementById('plaatje').innerHTML = svgPlaatje;
}
function clearEdit() {
  svgPlaatje = '<svg width="600" height="320" style="border:1px solid black">\n';
  svgPlaatje += '</svg>';
  document.getElementById('plaatje').innerHTML = svgPlaatje;
  document.getElementById('codeEdit').value = svgPlaatje;
}
function reloadEdit() {
  window.location.reload();
}
function initialiseer() {
  svgPlaatje = document.getElementById('plaatje').innerHTML;
  maakEdit();
}
window.addEventListener('load',initialiseer);
</script>

(Zet dit in de <BODY> op de plaats waar het plaatje en de editor moeten verschijnen).

<div id='plaatje'>
<svg width="600" height="320" style="border:1px solid black">

<!-- Cirkel -->
<circle cx="500" cy="210" r="80" stroke="green" stroke-width="4" fill="#ff7" />
<!-- Rechthoek -->
<rect x="290" y="10" width="300" height="100" style="fill:rgb(0,0,240);stroke-width:5;stroke:#888" />
<!-- Vierkant met afgeronde hoeken -->
<rect x="10" y="160" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
<!-- Ster -->
<polygon points="270,110 210,298 360,178 190,178 330,298"
&style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
<!-- Ellips met verlopende achtergrond -->
<defs>
  <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="80%" >
  <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
  <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
  </linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<!-- Tekst -->
<text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">Mooi</text>
<!-- Rechte lijn -->
<line x1="300" y1="0" x2="500" y2="200" style="stroke:rgb(255,0,0);stroke-width:5" />
Sorry, uw browser heeft geen ondersteuning voor de &lt;svg&gt;-tag.
</svg>
</div>

<form action="JavaScript:verwerkEdit()"
    style="width:600px; text-align:center">
  <textarea id="codeEdit" rows="20" cols="65"
    style="margin:15px auto 15px auto"></textarea>
  <input type="submit" value="&lt;&lt; &nbsp; Klaar &nbsp; &gt;&gt;"
    style="text-align:center; font-size:16px; color:navy;
      font-weight:bold">
  <input type="button" value=" &nbsp;* Nieuw *&nbsp; "
    style="text-align:center; font-size:16px; color:maroon;
      font-weight:bold; float:right; margin-right:50px"
      onclick="clearEdit()">
  <input type="button" value=" &nbsp;Reset&nbsp; "
    style="text-align:center; font-size:16px; font-weight:bold;
      float:right; margin-right:50px" onclick="reloadEdit()">
</form>

Downloaden:
 
Druk op de knop:  File: voorb673.zip, 1282 bytes.

Opmerking:
 
Het voorbeeld is beschikbaar als "losse" applicatie. Zie daar voor de listbox JavaScript Applicaties op het voorblad van deze site, kies Codegeneratoren, daarna Code editor voor SVG plaatjes.