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.

IntroductieBewerken

Wat is SVG?Bewerken

 
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?Bewerken

  • Schaalbaar: Als je Bitmap-bestanden inzoomt krijg je blokjes te zien, bij SVG (en andere vector-formaten) blijft alles scherp.
  • Opslagruimte: Meestal neemt een SVG-bestand veel minder opslagruimte in dan een vergelijkbaar JPG- of PNG-bestand.
  • Scherp: Zoals al genoemd bij schaalbaarheid blijven lijnen scherp bij het inzoomen, maar ook bij het normale beeld is alles veel scherper dan bij JPG.
  • Makkelijk bewerkbaar: Je kan delen of teksten heel makkelijk aanpassen zonder dat je de onderliggende afbeelding eerst moet "weggummen". Vooral voor vertalingen heel handig dus!

Wat zijn de nadelen?Bewerken

  • Niet geschikt voor foto's, omdat dat bitmaps zijn. SVG is slechts geschikt voor vectorgraphics.
  • Niet op alle browsers te zien: Niet alle browsers ondersteunen SVG, maar voor Wikipedia is dit geen probleem want die vormt SVG zelf om naar PNG dat bijna iedere browser aankan.
  • Mediawiki ondersteunt niet alle SVG-tags, daardoor komen afbeeldingen er soms niet uit te zien zoals het hoort. (vooral flowroot en markers)

InleidingBewerken

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 AttributenBewerken

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

  • Voel je vrij en ga je gang!

Ik heb een mooi plaatje gemaakt, en nu?Bewerken

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

Tips & TrucsBewerken

Tekst wordt zwart vlak / TekstproblemenBewerken

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!Bewerken

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.

Meteen beginnenBewerken

  • Download een installeer een svg-editor (zie bij de Externe links)
  • Start de editor, maak een plaatje, en bewaar deze op uw harde schijf als svg
  • Upload het bestand

Vraag & AntwoordBewerken

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)

ShowcaseBewerken

Voorbeelden van afbeeldingen in SVG gemaakt:

Externe LinksBewerken