SVG Handledning
Komma igång med SVG

Android Angular 2 AngularJS CSS HTML Java Language JavaScript jQuery PHP Python Language
Sök…


Anmärkningar

Scalable Vector Graphics (SVG) är en W3C-standard för ritning av vektorbilder.

Här är en enkel fristående SVG-fil: 

<svg xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="25" fill="blue"/>
</svg>

SVG kan också inbäddas i HTML, i vilket fall xmlns attributet inte krävs.

Andra grafiska element är:

  • <line>
  • <ellipse>
  • <path>
  • <polygon> och <polyline>
  • <text> inklusive <tspan> som <tspan> och <textPath>

CSS används för styling men inte alla CSS-egenskaper gäller SVG och SVG definierar själv vissa specifika egenskaper som fill och stroke som inte används någon annanstans.

Former kan fyllas med lutningar eller mönster och ytterligare rastereffekter kan uppnås med filter.

Klippning är tillgänglig genom att använda ovanstående grafiska element som klippvägar.

Beträffande versioner av W3C SVG-standarden:

versioner

Version Utgivningsdatum
1,0 2001/09/04
1.1 Första upplagan 2003-01-14
1.2 Liten 2008-12-22
1.1 Andra upplagan 2011-08-16

Inline SVG

Inline SVG tillåter SVG-markering, skriven i HTML, att generera grafik i webbläsaren.

När du använder SVG inline krävs inte en DOCTYPE. Istället är det bara <svg> öppna och stänga taggarna tillsammans med antingen en viewBox eller attribut för bredd och höjd: 

<svg width="100%" height="100%">
    <!-- SVG elements go here -->
</svg>

<svg> -fragmentet ovan fungerar som både en behållare och ett strukturellt element. Detta fragment upprättar sitt eget koordinatsystem.

Nedan är ett exempel på att rendera ett SVG-fragment med viss innehåll. Det kommer att producera en rektangel med "Hello World!" text i den. 

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

Resultat:

Enkel SVG-exempelutgång

SVG som en

Du kan återge innehållet i en SVG-fil som en bild i ett HTML-dokument med en <img> -tagg. Till exempel: 

<img src="my_svg_file.svg" alt="Image description">

Dimensionerna hos bilden, som standard, display enligt bredd- och höjd egenskaper som anges i SVG-filen refereras till i src attributet.

Det är värt att notera olika begränsningar som ingår i denna strategi:

  • Webbläsarsupport, även om det är bra, inkluderar inte Internet Explorer 8 och tidigare versioner, inte heller Android 2.3 och tidigare versioner.
  • Du kan inte utforma de enskilda elementen i SVG-filen med hjälp av CSS som är externt till SVG-filen. All CSS måste vara i själva bildfilen.
  • JavaScript körs inte.
  • Bilden måste vara komplett i en enda fil. Om till exempel SVG-filen innehåller rasterbilder måste dessa interna bilder kodas som data-URL: er.

SVG som bakgrundsbild

Du kan visa en SVG-fil i ett HTML-dokument genom att ange den som en bakgrundsbild i CSS. Till exempel: 

.element {
    background-size: 100px 100px;
    background: url(my_svg_file.svg);
    height: 100px;
    width: 100px;
}

Om dimensionerna som anges i din SVG-fil är större än dimensionerna för ditt HTML-element kan det vara önskvärt att ange egenskapen background-size att skala SVG så att den passar in i dess element.

Liksom med att använda SVG som en <img> , är det värt att notera några begränsningar med denna strategi:

  • Webbläsarsupport inkluderar inte Internet Explorer 8 och tidigare versioner, inte heller Android 2.3 och tidigare versioner.
  • Du kan inte utforma de enskilda elementen i SVG-filen med hjälp av CSS som är externt till SVG-filen. All CSS måste vara i själva bildfilen.


Modified text is an extract of the original Stack Overflow Documentation
Licensierat under CC BY-SA 3.0
Inte anslutet till Stack Overflow