HTML -zelfstudie

HTML HOME HTML-introductie HTML-editors HTML basis HTML-elementen HTML-kenmerken HTML-koppen HTML-alinea's HTML-stijlen HTML-opmaak HTML-citaten HTML-opmerkingen HTML-kleuren HTML-CSS HTML-links HTML-afbeeldingen HTML-favicon HTML-tabellen HTML-lijsten HTML-blok en inline HTML-klassen HTML-ID HTML-iframes HTML-JavaScript Paden voor HTML-bestanden HTML-kop HTML-indeling HTML-responsief HTML-computercode HTML-semantiek HTML-stijlgids HTML-entiteiten HTML-symbolen HTML-emoji's HTML-tekenset HTML-URL-codering HTML versus XHTML

HTML -formulieren

HTML-formulieren HTML-formulierkenmerken HTML-formulierelementen HTML-invoertypen HTML-invoerkenmerken Kenmerken HTML-invoerformulier

HTML -afbeeldingen

HTML-canvas HTML-SVG

HTML- media

HTML-media HTML-video HTML-audio HTML-plug-ins HTML-YouTube

HTML API's

HTML-geolocatie HTML slepen/neerzetten HTML-webopslag HTML-webwerkers HTML-SSE

HTML- voorbeelden

HTML-voorbeelden HTML-quiz HTML-oefeningen HTML-certificaat HTML-samenvatting HTML-toegankelijkheid

HTML- verwijzingen

HTML-taglijst HTML-kenmerken Algemene HTML-kenmerken Ondersteuning voor HTML-browser HTML-gebeurtenissen HTML-kleuren HTML-canvas HTML-audio/video HTML-documenttypen HTML-tekensets HTML-URL-codering HTML-taalcodes HTTP-berichten HTTP-methoden PX naar EM-omzetter Toetsenbord sneltoetsen

HTML SVG-afbeeldingen


SVG definieert op vectoren gebaseerde afbeeldingen in XML-indeling.


Wat is SVG?

  • SVG staat voor Scalable Vector Graphics
  • SVG wordt gebruikt om afbeeldingen voor het web te definiëren
  • SVG is een aanbeveling van W3C

Het HTML <svg>-element

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

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


Browserondersteuning

De getallen in de tabel geven de eerste browserversie aan die het <svg>element volledig ondersteunt.

Element
<svg> 4.0 9.0 3.0 3.2 10.1

SVG cirkel

Voorbeeld

<!DOCTYPE html>
<html>
<body>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

</body>
</html>


SVG-rechthoek



Voorbeeld

<svg width="400" height="100">
  <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>

SVG afgeronde rechthoek

Sorry, your browser does not support inline SVG.

Voorbeeld

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

SVG-ster

Sorry, your browser does not support inline SVG.

Voorbeeld

<svg width="300" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

SVG-logo

SVG Sorry, your browser does not support inline SVG.

Voorbeeld

<svg height="130" width="500">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
  Sorry, your browser does not support inline SVG.
</svg>

Verschillen tussen SVG en canvas

SVG is een taal voor het beschrijven van 2D-afbeeldingen in XML.

Canvas tekent direct 2D-graphics (met een JavaScript).

SVG is gebaseerd op XML, wat betekent dat elk element beschikbaar is binnen de SVG DOM. U kunt JavaScript-gebeurtenishandlers voor een element koppelen.

In SVG wordt elke getekende vorm onthouden als een object. Als kenmerken van een SVG-object worden gewijzigd, kan de browser de vorm automatisch opnieuw weergeven.

Canvas wordt pixel voor pixel weergegeven. In canvas, zodra de afbeelding is getekend, wordt deze vergeten door de browser. Als de positie moet worden gewijzigd, moet de hele scène opnieuw worden getekend, inclusief alle objecten die mogelijk door de afbeelding zijn bedekt.


Vergelijking van Canvas en SVG

De onderstaande tabel toont enkele belangrijke verschillen tussen Canvas en SVG:

Canvas SVG
  • Resolution dependent
  • No support for event handlers
  • Poor text rendering capabilities
  • You can save the resulting image as .png or .jpg
  • Well suited for graphic-intensive games
  • Resolution independent
  • Support for event handlers
  • Best suited for applications with large rendering areas (Google Maps)
  • Slow rendering if complex (anything that uses the DOM a lot will be slow)
  • Not suited for game applications

SVG-zelfstudie

Lees onze SVG-zelfstudie voor meer informatie over SVG .