HTML => SVG

Invoering

SVG staat voor Scalable Vector Graphics. SVG wordt gebruikt om afbeeldingen voor het web te definiëren

Het HTML <svg> -element is een container voor SVG-afbeeldingen.

SVG heeft verschillende methoden voor het tekenen van paden, vakken, cirkels, tekst en grafische afbeeldingen.

Opmerkingen

SVG is een op XML gebaseerde taal voor het maken van schaalbare vectorafbeeldingen. Het kan rechtstreeks in een HTML-document worden geschreven of worden ingesloten vanuit externe SVG-bestanden. Inline SVG kan worden gerestyled en gewijzigd met respectievelijk CSS en JavaScript.

Browser ondersteuning voor SVG varieert, maar kan worden vastgesteld hier .

Zie de SVG-documentatie voor uitgebreidere informatie.

Externe SVG-bestanden insluiten in HTML

U kunt de elementen <img> of <object> gebruiken om externe SVG-elementen in te sluiten. De hoogte en breedte instellen is optioneel, maar wordt ten zeerste aanbevolen.

Het afbeeldingselement gebruiken

<img src="attention.svg" width="50" height="50">

Met <img> kunt u de SVG niet opmaken met CSS of manipuleren met JavaScript.

Het objectelement gebruiken

<object type="image/svg+xml" data="attention.svg" width="50" height="50">

In tegenstelling tot <img> importeert <object> de SVG rechtstreeks in het document en kan deze daarom worden gemanipuleerd met behulp van Javascript en CSS.

Inline SVG

SVG kan rechtstreeks in een HTML-document worden geschreven. Inline SVG kan worden gestileerd en gemanipuleerd met behulp van CSS en JavaScript.

<body>
    <svg class="attention" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 1000" >
        <path id="attention" d="m571,767l0,-106q0,-8,-5,-13t-12,-5l-108,0q-7,0,-12,5t-5,13l0,106q0,8,5,13t12,6l108,0q7,0,12,-6t5,-13Zm-1,-208l10,-257q0,-6,-5,-10q-7,-6,-14,-6l-122,0q-7,0,-14,6q-5,4,-5,12l9,255q0,5,6,9t13,3l103,0q8,0,13,-3t6,-9Zm-7,-522l428,786q20,35,-1,70q-10,17,-26,26t-35,10l-858,0q-18,0,-35,-10t-26,-26q-21,-35,-1,-70l429,-786q9,-17,26,-27t36,-10t36,10t27,27Z" />
    </svg>
</body>

De bovenstaande inline SVG kan vervolgens worden gestileerd met behulp van de overeenkomstige CSS-klasse:

.attention {
    fill: red;
    width: 50px;
    height: 50px;
}

Het resultaat ziet er als volgt uit:

SVG insluiten met CSS

U kunt externe SVG-bestanden toevoegen met de eigenschap background-image , net zoals u met elke andere afbeelding zou doen.

HTML:

<div class="attention"></div>

CSS:

.attention {
    background-image: url(attention.svg);
    background-size: 100% 100%;
    width: 50px;
    height: 50px;
}

U kunt de afbeelding ook rechtstreeks in een CSS-bestand insluiten met een gegevens-URL:

background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%201000%201000%22%20%3E%0D%0A%3Cpath%20id%3D%22attention%22%20d%3D%22m571%2C767l0%2C-106q0%2C-8%2C-5%2C-13t-12%2C-5l-108%2C0q-7%2C0%2C-12%2C5t-5%2C13l0%2C106q0%2C8%2C5%2C13t12%2C6l108%2C0q7%2C0%2C12%2C-6t5%2C-13Zm-1%2C-208l10%2C-257q0%2C-6%2C-5%2C-10q-7%2C-6%2C-14%2C-6l-122%2C0q-7%2C0%2C-14%2C6q-5%2C4%2C-5%2C12l9%2C255q0%2C5%2C6%2C9t13%2C3l103%2C0q8%2C0%2C13%2C-3t6%2C-9Zm-7%2C-522l428%2C786q20%2C35%2C-1%2C70q-10%2C17%2C-26%2C26t-35%2C10l-858%2C0q-18%2C0%2C-35%2C-10t-26%2C-26q-21%2C-35%2C-1%2C-70l429%2C-786q9%2C-17%2C26%2C-27t36%2C-10t36%2C10t27%2C27Z%22%20%2F%3E%0D%0A%3C%2Fsvg%3E);

Modified text is an extract of the original Stack Overflow Documentation

Licentie onder CC BY-SA 3.0

Niet aangesloten bij Stack Overflow

HTML
SVG

Zoeken…