SVG-code opslaan als tekstfile

Voor bepaalde doeleinden is het handig om de (al of niet zelf gegenereerde) code van een SVG-plaatje op schijf op te slaan. Op deze pagina wordt uitgelegd hoe je dat kunt aanpakken. Dat kan op twee manieren, die alleen werken op desktops en laptops. Op het moment dat dit wordt geschreven (juni 2025) kan het (nog?) niet op mobiele browser-versies.

1: De code uit de HTML kopiëren met view-source
Dit is de eenvoudigste manier als de SVG-code hard in de HTML is gezet. Op het toetsenbord type je CTRL+U. Er wordt een nieuw tabblad geopend met broncode. Zoek de betreffende <svg>-tag, kopieer die met CTRL+C naar het klembord en plak hem met CTRL+V in bijv. Windows Kladblok, met de extensie .svg.

Dit kun je uitproberen op het plaatje hier onder. Houd er rekening mee dat het document in een <iframe> zit. Je moet het document daar even uit halen, dat doe je met deze link.
 

2: De code uit de HTML kopiëren met behulp van de Dev-tools
Dit is de aangewezen manier als de SVG-code is gegenereerd door JavaScript en met innerHTML in het document is gezet. of als een extern bestand is gebruikt.
Klik met de rechter muisknop op de figuur en kies "inspecteren" uit het menu. De Dev-tools openen in de tab "Elements".

• Als de code is gegenereerd (zoals bij de items over grafieken en figuren tekenen op deze site), kun je de code zien door met rechts op de <svg>-tag te klikken. Kies uit het menu "Copy" en daarna "Copy element". Plakken met CTRL+V.
   
• Als de svg-figuur met een <img>-tag in het document is gezet, kun je de code zien door te klikken op de filenaam in de <img>-tag. Er komt een pop-up met daarin de url van de figuur. Klik daar op. Er opent een nieuw tabblad met daarin alleen de figuur. De code kun je zien door CTRL+U te typen. Kopiëren en plakken met CTRL+C en CTRL+V.
   
• De svg-figuur kan ook de achtergrond zijn van een element, bijvoorbeeld een <div>-tag. Dat is gebruikt in het item Elementen tegelijkertijd animeren (Figuur in de rechter bovenhoek) Gebruik in dat geval de tab "sources". Zoek in de boomstructuur (linker kolom) de naam van de svg-figuur en selecteer die. De figuur verschijnt in de kolom ernaast. Klik er op met de rechter muistoets en kies "Open image in new tab". De figuur verschijnt nu in een nieuw tabblad. De code kun je zien door CTRL+U te typen. Kopiëren en plakken met CTRL+C en CTRL+V.

Opmerkingen

• Als het document met het svg-plaatje in een <iframe> zit, zie je in de Dev-tools ook het parent-element. Dat kan verwarring geven.
• Kopieer altijd de gehele tag, dus <svg ..... > tot en met </svg>.
• Volgens de standaarden moet een <svg>-tag tenminste het attribuut xmlns="http://www.w3.org/2000/svg" hebben. Gebleken is dat dit attribuut niet nodig is als de SVG-code door de website zelf is gegenereerd. Bij alle door deze website gegenereerde SVG-plaatjes is het attribuut xmlns daarom weggelaten.
  Als je zo'n plaatje in een externe fotobewerker of -viewer wilt bekijken (inclusief de browser) moet je het attribuut handmatig toevoegen. Dat kan met Kladblok of een vergelijkbaar programma. Een uitzondering is IrfanView; dat programma heeft er geen problemen mee als het attribuut ontbreekt. Om SVG te kunnen gebruiken in IrfanView moeten de plugins worden geïnstalleerd.
  Het attribuut xmlns komt niet voor in de HTML-implementatie van de SVG-standaard. De tag <svg> is nl. geen HTML, maar XML. Dat stelt andere eisen.
• Gratis software voor het bewerken van SVG-plaatjes is gemakkelijk te vinden op internet, zowel voor Windows, Linux als MacOS.
  Een paar titels:
  • Inkscape. Dit programma is speciaal ontworpen voor het werken met SVG-bestanden.
  • GIMP. Eigenlijk een fotobewerkingsprogramma. De mMogelijkheden voor SVG zijn beperkt.
  • Paint.Net. Deze laatste heeft een plugin nodig, te downloaden van het Forum.
• Behalve via het menu-item "Inspecteren" kunnen de Dev-tools ook worden gestart met een toets-combinatie:
  • Windows en Linux: F12 of CTRL+SHIFT+I.
  • MacOS: Fn+F12 of CMD+OPTION+I