Ik heb deze pagina aangemaakt als een soort van forumpje van de Wikipedia-SVG-gebruikers. Deze pagina is bedoeld voor tips & trucs, mooie resultaten etc, terwijl discussie en vragen 't beste op de overlegpagina kan.

Introductie

Wat is SVG?

Links een uitvergroting van een vectorafbeelding, rechts van een rasterafbeelding.

SVG of Scalable Vector Graphics is een grafisch formaat voor vectorafbeeldingen. Vectorafbeeldingen zijn bestanden waarbij elk element omschreven is. Van bijvoorbeeld een lijn zijn begin- en eindpunt, kleur en dikte beschreven. Dit in tegenstelling tot rasterafbeeldingen als GIF, JPG en PNG, waarbij elke pixel apart opgeslagen wordt.

Wat zijn de voordelen?

Wat zijn de nadelen?

Inleiding

Er zijn diverse manieren om aan een SVG-bestand te werken, onder andere:

  1. Via een teksteditor rechtstreeks de XML-code bewerken, of
  2. Met een tekenprogramma werken, en opslaan/exporteren als SVG.
  3. Een combinatie van bovenstaande

Voor de beginner is aan te raden de tweede optie te kiezen. Steeds meer tekenprogramma's kunnen het SVG-formaat lezen en schrijven. Er is een enorme diversiteit aan kwaliteit en gemak.

Inkscape is een programma dat op diverse platforms gebruikt kan worden, bijvoorbeeld op Linux, Windows en Mac. Dit programma is redelijk makkelijk te gebruiken en heeft bovendien een geïntegreerde XML-editor zodat je de code van het document kunt bewerken.

Objecten en Attributen

Een tekening bestaat uit objecten die gedefinieerd worden door hun eigenschappen, de attributen of properties. Bijvoorbeeld <svg:rect id="rect0017">is een rechthoek (rectangle). Id is een unieke referentie aan die specifieke rechthoek, in dit geval rect0017, waarvoor een zinvolle naam ingevuld zou kunnen worden. Een rechthoek heeft attributen als x, y (de coordinaten van de rechterbovenhoek), height en width, waarvan de waarden gewijzigd kunnen worden om bijvoorbeeld het object groter of kleiner te maken of te verplaatsen. SVG beschrijft de figuren slechts, de uiteindelijke weergave hangt sterk af van de gebruikte software en het medium.

Een speciaal attribuut is de "style", dat onder andere de kleur en dikten van randen en de vulkleuren bepaalt

Ik heb een mooi plaatje gemaakt, en nu?

Uploaden op wikipedia doe je precies hetzelfde als bij elk ander plaatje, via Speciaal:Upload upload je het svg-bestand.

Tips & Trucs

Tekst wordt zwart vlak / Tekstproblemen

Veel mensen hebben problemen met teksten die een zwart vlak worden in mediawiki. Probleem is dat de tekst hier in een zogenaamde svg:flowroot zit. Zit de tekst in een svg:text-veld gaat het wel goed. Een flowroot krijg je door met de A-tool een vierkant te slepen, een tekst-element door slechts ergens te klikken (dus niet te slepen).

Lukt het dan nog niet met tekst of gaat iets anders mis, selecteer dan de tekst en doe een Object to Path. De tekst is nu een Pad en dat kan mediawiki wel aan.

http://wiki.inkscape.org/wiki/index.php/FAQ#What_about_flowed_text.3F

Afbeelding Gevraagd!

Heeft u/je een verzoek voor een afbeelding die goed in .SVG kan, plaats hieronder dan een verzoek. Als je eraan gaat werken, meldt dat dan even om dubbel werk te voorkomen.

Opmerking: zoiets bestaat al, maar met bolletjes in plaats van rechthoeken: File:2021_Dutch_House_of_Representatives.svg. En deze is wel met rechthoekjes, maar van 2017: File:Dutch House of Representatives, 2017.svg. Zie voor meer commons:Category:Election apportionment diagrams of the House of Representatives of the Netherlands. ∼ Wimmel (overleg) 14 sep 2021 15:30 (CEST)
O dat had ik allemaal nog niet gezien. Ik ga daar wel mee aan de slag, dat is makkelijker. Bedankt voor het meedenken! Dajasj (overleg) 14 sep 2021 15:34 (CEST)

Meteen beginnen

Vraag & Antwoord

Heeft u een vraag over hoe te werken met SVG of last van vage probleempjes, vraag dit dan in het Testlab!. (Oude discussie daarheen verplaatst)

Showcase

Voorbeelden van afbeeldingen in SVG gemaakt: