Gebruiker:IIVQ/SVGclub

Uit Wikipedia, de vrije encyclopedie

Ik ben mogelijk even wat minder actief op wikipedia.

	overleg
	(archief)

tips

laboratorium

bronnen

bijdragen

album

Project
basiskaart

SVGclub

( laat een nieuw bericht achter )

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.

[bewerk] Introductie

[bewerk] 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.

[bewerk] Wat zijn de voordelen?

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!

[bewerk] Wat zijn de nadelen?

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)

[bewerk] Inleiding

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

Via een teksteditor rechtstreeks de XML-code bewerken, of
Met een tekenprogramma werken, en opslaan/exporteren als SVG.
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.

[bewerk] 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

Voel je vrij en ga je gang!

[bewerk] 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.

[bewerk] Tips & Trucs

[bewerk] 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

[bewerk] Afbeelding ziet er slecht uit

Afbeeldingen waarvan de canvas size groter dan 1024 pixels is worden niet groter dan 1024 pix als PNG gerenderd, maar wel met de (grotere) canvas size weergegeven [1]. Dit zorgt ervoor dat het schalingsalgorithme van de browser aangesproken wordt, dat hier erg slecht in is. Zorg er dus voor dat je afbeelding niet groter is dan 1024 pix canvas size.

[bewerk] Markers doen het niet

Klopt, en in inkscape zit helaas niet een handige "marker to path"-fuctie :-( ... Hopen dat het gaat werken dus.

meta:Talk:SVG_image_support#Arrow_problem_and_fonts

[bewerk] 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.

[bewerk] Meteen beginnen

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

[bewerk] 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)

[bewerk] Showcase

Voorbeelden van afbeeldingen in SVG gemaakt:

Fietsventiel door IIVQ	Fietsventiel door IIVQ	Toestel van Hoffman door IIVQ	Fundering op staal door GeeKaa
Plunjerpomp door MADe	Zuigerpomp door MADe	Verhanglijn door MADe	Weerstandsmoment door GeeKaa
Vlag van Zuid-Holland door GeeKaa	Kippen (Techniek) door GeeKaa	Hondenbot door IIVQ	Turborotonde door IIVQ
Etage door IIVQ	Etage door IIVQ	Regenboogtrui (en zo'n 20 andere truien) door IIVQ