SVG Zelfstudie
Aan de slag met SVG
Zoeken…
Opmerkingen
Scalable Vector Graphics (SVG) is een W3C-standaard voor het tekenen van vectorafbeeldingen.
Hier is een eenvoudig zelfstandig SVG-bestand:
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="25" fill="blue"/>
</svg>
SVG kan ook worden ingesloten in HTML, in welk geval het kenmerk xmlns niet vereist is.
Andere grafische elementen zijn:
-
<line> -
<ellipse> -
<path> -
<polygon>en<polyline> -
<text>inclusief onderliggende elementen zoals<tspan>en<textPath>
CSS wordt gebruikt voor styling, hoewel niet alle CSS-eigenschappen van toepassing zijn op SVG en SVG zelf definieert enkele specifieke eigenschappen zoals fill en stroke die elders niet worden gebruikt.
Vormen kunnen worden gevuld met verlopen of patronen en extra rastereffecten kunnen worden bereikt met behulp van filters.
Clipping is beschikbaar door de bovenstaande grafische elementen als clippaden te gebruiken.
Betreffende versies van de W3C SVG-standaard:
- De huidige versie is SVG 1.1 (tweede editie)
- De W3C werkt momenteel aan een concept van SVG 2
versies
| Versie | Publicatiedatum |
|---|---|
| 1.0 | 2001/09/04 |
| 1.1 Eerste editie | 2003-01-14 |
| 1.2 Klein | 2008-12-22 |
| 1.1 Tweede editie | 2011-08-16 |
Inline SVG
Met Inline SVG kan SVG-opmaak, geschreven in HTML, afbeeldingen genereren in de browser.
Bij gebruik van SVG inline is een DOCTYPE niet strikt vereist. In plaats daarvan volstaan alleen de <svg> openings- en sluitingstags samen met een viewBox of breedte- en hoogtekenmerken :
<svg width="100%" height="100%">
<!-- SVG elements go here -->
</svg>
Het <svg> -fragment hierboven fungeert als zowel een container als een structureel element. Dit fragment heeft zijn eigen coördinatensysteem.
Hieronder ziet u een voorbeeld van het weergeven van een SVG-fragment met wat inhoud. Het zal een rechthoek produceren met "Hallo wereld!" tekst erin.
<svg width="50%" viewBox="0 0 10 10">
<rect x="1" y="1" width="5" height="3" fill="teal" />
<text x="2" y="2" font-family="Palatino, Georgia, serif" font-size="3%" font-weight="bold" fill="white">Hello World!</text>
</svg>
Resultaat:
SVG als een ![]()
U kunt de inhoud van een SVG-bestand weergeven als een afbeelding in een HTML-document met een <img> -tag. Bijvoorbeeld:
<img src="my_svg_file.svg" alt="Image description">
De afmetingen van de afbeelding worden standaard weergegeven volgens de eigenschappen breedte en hoogte die zijn opgegeven in het SVG-bestand waarnaar wordt verwezen in het kenmerk src .
Het is vermeldenswaard dat verschillende beperkingen inherent aan deze aanpak zijn:
- Browserondersteuning, hoewel goed, omvat niet Internet Explorer 8 en eerdere versies, noch Android 2.3 en eerdere versies.
- U kunt de afzonderlijke elementen in het SVG-bestand niet opmaken met behulp van CSS die extern is aan het SVG-bestand. Alle CSS moet zich in het afbeeldingsbestand zelf bevinden.
- JavaScript wordt niet uitgevoerd.
- De afbeelding moet volledig zijn in één bestand. Als het SVG-bestand bijvoorbeeld rasterafbeeldingen bevat, moeten die interne afbeeldingen worden gecodeerd als gegevens-URL's.
SVG als achtergrondafbeelding
U kunt een SVG-bestand in een HTML-document weergeven door het als achtergrondafbeelding in CSS op te geven. Bijvoorbeeld:
.element {
background-size: 100px 100px;
background: url(my_svg_file.svg);
height: 100px;
width: 100px;
}
Als de in uw SVG-bestand gespecificeerde afmetingen groter zijn dan de afmetingen van uw HTML-element, kan het wenselijk zijn om de eigenschap background-size te geven, om de SVG te schalen zodat deze binnen het element past.
Net als bij het gebruik van SVG als een <img> , is het vermeldenswaard enkele beperkingen met deze aanpak:
- Browserondersteuning omvat Internet Explorer 8 en eerdere versies, noch Android 2.3 en eerdere versies.
- U kunt de afzonderlijke elementen in het SVG-bestand niet opmaken met behulp van CSS die extern is aan het SVG-bestand. Alle CSS moet zich in het afbeeldingsbestand zelf bevinden.