SVG

SVG sau Scalable Vector Graphics este un standard web pentru definirea graficelor vectoriale în paginile web. Bazat pe XML, standardul SVG oferă marcaje pentru a descrie căi, forme și text într-o fereastră de vizualizare. Marcajul poate fi încorporat direct în HTML pentru afișare sau salvat într-un fișier .svg fișier și inserat ca orice altă imagine.

Puteți scrie SVG de mână, dar grafica mai complicată poate fi proiectată în editori de grafică vectorială precum Illustrator sau InkScape și exportată în fișiere sau cod SVG.

Noțiuni de bază SVG

Dezvoltatorii încep o grafică SVG cu <svg> etichetă și spațiu de nume XML așa:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

</svg>

Eșantionul include, de asemenea, un version atribut. version atributul este opțional, dar este recomandat pentru reclamații cu specificațiile XML.

Acest eșantion nu va afișa nimic, ci doar a creat o fereastră. Poti sa adaugi height și width atribute pentru a seta o dimensiune de afișare pentru fereastra de vizualizare, aceasta stabilește în esență o pânză în care să lucrați.

Cu o fereastră de vizualizare în loc, puteți adăuga elemente grafice de bază, text și cale.

<svg
     version="1.1"
     width="100%"
     viewbox="0 0 600 300"
     xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="100" height="100" fill="#f7b2c1" />
  <circle cx="240" cy="60" r="50" fill="#c1b2f7" stroke="#b2c1f7" stroke-width="15"/>
  <text x="450" y="70" font-size="20" text-anchor="middle">SVG Text is browser readable!</text>
  <g stroke="#b2c1f7"> <!-- g is for group -->
    <path stroke-width="2" d="M10 170 l590 0" />
    <path stroke-width="4" d="M10 190 l590 0" />
    <path stroke-width="6" d="M10 210 l590 0" />
  </g>  
</svg>  

Puteți vedea ieșirea și vă puteți juca cu codul acest codepen.

În deschidere svg tag adăugăm un atribut de lățime pentru a seta lățimea ferestrei la 100% din lățimea containerului, puteți utiliza procente sau lățimi de pixeli. Eticheta SVG de deschidere are, de asemenea viewbox atribut care definește o fereastră prin care sunt vizibile elementele svg-ului dvs., în acest caz, vizualizarea se întinde de la (0,0) la (600,300). În spațiul SVG, axa X începe cu zero în stânga și crește în dreapta; axa Y începe cu zero în partea de sus și crește spre partea de jos.

Prima etichetă nouă este <rect /> etichetă care definește un dreptunghi în fereastra SVG. În acest caz, definim un pătrat care este la 10 unități de sus și la stânga și 100 de unități înălțime și lățime. fill atributul setează culoarea de umplere pentru formă.

Apoi definim un cerc sau oval cu <circle /> etichetă. Eșantionul definește un cerc centrat la (240,60) cu o rază de 50 de unități. stroke și stroke-width atributele stabilesc o culoare și o dimensiune a liniei.

Puteți adăuga text la grafic cu ajutorul text etichetă. Exemplul de text este ancorat de la mijlocul textului la un punct la (450, 70) și are o dimensiune a fontului de 20 de unități. Lucrul frumos despre textul în SVG este că va scala cu restul graficului dvs., dar este în continuare lizibil de browser și de roboții web.

Când doriți să aplicați aceleași atribute sau stiluri CSS la mai multe elemente SVG, le puteți grupa cu <g> etichetă. Atribute atribuite <g> etichetă, cum ar fi stroke atributul din exemplu, va fi aplicat tuturor elementelor din cadrul grupului. În acest caz trei <path /> elemente.

<path /> elementul definește o cale vectorială în fereastra de vizualizare. Calea este definită de d atribut. În primul exemplu, definiția arată „trecerea la coordonata absolută (10, 170) și trasați o linie la coordonatele relative 590 în direcția X și 0 în direcția Y.

Următoarele comenzi pot fi folosite pentru a vă crea calea:

M = deplasare la L = linie la H = linie orizontală la V = linie verticală la Z = cale închisă C = (bezier cubic) curbă la S = curbă netedă la Q = curbă bezier pătratică la T = curbă bezier pătratică lină la A = arc

Elementul pânză

Grafica pe pânză poate fi desenată pe un

Un context este creat prin metoda getContext de pe

<p> Before canvas</p >
<canvas width ="120" height ="60"> </canvas>
<p >After canvas</p>
<script>
    var canvas = document.querySelector("canvas");
    var context = canvas.getContext("2d");
    context.fillStyle = "red";
    context.fillRect (10, 10, 100, 50);
</script>
Ce este un fisier SVG Imagine si etichete SVG

După crearea obiectului contextual, exemplul desenează un dreptunghi roșu de 100 pixeli lățime și 50 pixeli înălțime, cu colțul din stânga sus la coordonate (10,10).

Desenarea unei diagrame

Variabila rezultate conține o serie de obiecte care reprezintă răspunsurile la sondaj.

var results = [
{ name : "Satisfied", count: 1043, color: "lightblue"} ,
{ name : Neutral", count: 563 , color: "lightgreen"} ,
{ name : Unsatisfied", count: 510 , color: "pink"} ,
{ name : "No comment", count: 175 , color: "silver"}
];

Pentru a desena o diagramă circulară, desenăm o serie de felii de plăcintă, fiecare alcătuită dintr-un arc și o pereche de linii în centrul acelui arc. Putem calcula unghiul preluat de fiecare arc împărțind un cerc complet (2 π) la numărul total de răspunsuri și apoi înmulțind acel număr (unghiul per răspuns) cu numărul de persoane care au ales o alegere dată.

<canvas width ="200" height ="200"></canvas>
<script>
    var cx = document.querySelector("canvas").getContext("2d");
    var total = results.reduce(function (sum, choice) {
    return sum + choice.count;
    }, 0);

    // Start at the top

    var currentAngle = -0.5 * Math.PI;
    results.forEach (function (result) {
    var sliceAngle = (result.count / total) * 2 * Math.PI;
    cx.beginPath() ;
    // center = 100, 100, radius = 100
    // from current angle, clockwise by slice's angle
    cx.arc(100, 100, 100, currentAngle, currentAngle + sliceAngle);
    currentAngle += sliceAngle;
    cx.lineTo(100, 100);
    cx.fillStyle = result.color ;
    cx.fill() ;
    });
</script>

Aceasta desenează următoarea diagramă:

Ce este un fisier SVG Imagine si etichete SVG

Suport pentru browser

Suport pentru browser pentru SVG este disponibil în toate browserele moderne. Există câteva probleme cu scalarea în IE 9 până la IE 11, însă acestea pot fi depășite cu utilizarea fișierului width, height, viewboxși CSS.

Editorii

  • Vectr – instrument web și desktop pentru crearea și editarea graficelor SVG, gratuit

Instrumente pentru crearea SVG

Există puține instrumente disponibile pentru a crea SVG sub formă de program de desen.

  • Inkscape – Este un instrument open source pentru desen vectorial de ultimă generație, cu o interfață grafică ușor de utilizat.
  • Adobe Illustrator – Adobe Illustrator este un instrument comercial pentru imagini vectoriale.

Pentru mai multe instrumente, consultați W3C listă de instrumente care acceptă SVG

De ce ar trebui să utilizați SVG-uri

Ca format de imagine vectorială, vă permite să redimensionați o imagine fără pierderi de calitate și o greutate deosebită. Ca format XML, vă permite să beneficiați de întreaga putere a JavaScript-ului și în special a CSS.

Mai multe informații despre SVG-uri:

  • De ce ar trebui să utilizați imagini SVG
  • Ce trebuie să știți pentru a lucra cu SVG în VS Code
  • Cum să faci accesibil butonul tău elegant SVG