SGV (Scalable Vector Graphics)

• standard web
• grafica 2D
• se poate utiliza de toate browsere (versiunile curente)
• formele care se desenează sunt precizate în format XML
• punctele se precizează într-un sistem de coordonate ce se deduce din imaginea următoare, cu (0,0) în colţul din stânga-sus
  
• tagurile pentru desenare (generează o imagine) se includ în tagul svg:
  

  <svg xmlns="http://www.w3.org/2000/svg" [lista_atribute]>
   . . . taguri pentru diverse obiecte grafice
  </svg>
  

• unitatea de măsură pentru coordonatele punctelor este asemănătoare cu cea din CSS:
  % (procent din dimensiunile obiectului svg părinte),
  cm, mm, in, px, pt (1/72 in), pc (1/6 in),
  em (înălţimea unui caracter), ex (înălţimea caracterului 'x').
  Dacă nu se precizează unitatea de măsură, atunci se consideră px.
  Imaginea (din browser) care se generează cu tagul svg are dimensiunile stabilite de atributele width şi height.
  Din plan se ia în considerare (pentru desenare) un dreptunghi (viewport) precizat de atributul viewBox (din tagul svg). Valoarea acestui atribut este de forma: "xmin ymin width height" (pot apare şi unităţile de măsură). Deoarece viewportul şi zona ecran pentru imaginea generată pot avea dimensiuni diferite, este utilă valoarea atributului preserveAspectRatio (cu unele valori pot apare deformări ale desenelor).
• la desenare se iau în considerare valorile unor proprietăţi din tagurile de desenare sau proprietăţi din stiluri.
  O culoare se poate preciza: denumire (de ex. orange); o valoare hexa (#rrggbb sau #rgb); o valoare RGB: rgb(r, g, b); sau o valoare RGBA: rgba(r, g, b, t) - unde t este transparenta (între 0 şi 1).
  Atribute utile (listă minimală): fill (culoarea cu care se face umplerea interiorului obiectului), stroke (culoarea cu care se face desenarea conturului obiectului), stroke-width (dimensiunea conturului), opacity, font-family, font-size.
• tagul svg (cu tagurile de desenare incluse) se poate folosi pentru generarea de imagini, diverse grafice şi diagrame.
  Un fişier care conţine tagul svg poate fi folosit pentru sursa unui iframe, sursa unui tag img, fondul unui tag (de exemplu div), sau să fie inclus într-un document html.
• mai multe taguri de desenare se pot include într-un tag g (grupare de taguri)
• un tag oarecare (inclusiv g) se poate transforma cu ajutorul unor transformări elementare:
  transform "succesiune_transformari"
  Transformările elementare sunt:
  translate(x,y)
  rotate(unghi)
  scale(sx, sy)
  skew(), matrix()
• în tagul svg se pot include următoarele taguri de desenare (corespund la obiecte "pline"):
  1. Segment: <line>
     

     <svg width="160" height="160">
       <line x1="10" y1="10" x2="100" y2="100" style="stroke:#f00; stroke-width:1"/>
       <line x1="10" y1="20" x2="150" y2="60"  style="stroke:#0f0; stroke-width:3"/>
       <line x1="30" y1="20" x2="150" y2="100" style="stroke:#00f; stroke-width:5"/>
     </svg>
     
  2. Dreptunghi cu vârfurile rotunjite: <rect>
     

     <svg x="10" y="10" width="400" height="110">
       <rect width="300" height="100" style="fill:#f00;stroke-width:1;stroke:#00f;" />
     </svg>

     <svg width="400" height="110">
       <rect x="10"  y="10" width="80" height="50" rx="0" ry="0" 
         style="fill:#f00;stroke-width:1;stroke:#00f;"/>
       <rect x="100" y="10" width="80" height="50" rx="5" ry="5" 
         style="fill:#f00;stroke-width:1;stroke:#00f;"/>
       <rect x="200" y="10" width="80" height="50" rx="15" ry="15" 
         style="fill:#f00;stroke-width:1;stroke:#00f;"/>
     </svg>

     
     
  3. Cerc: <circle>
     

     <svg height="100" width="100">
       <circle cx="50" cy="50" r="40" style="stroke:black; stroke-width:3; fill:red;" />
     </svg>
     

     <svg width="300" height="100">
     <circle cx="50"  cy="50" r="40" style="fill:rgba(255, 0, 0, 1.0)"/>
     <circle cx="100" cy="50" r="40" style="fill:rgba(0, 255, 0, 0.75)"/>
     <circle cx="150" cy="50" r="40" style="fill:rgba(0, 0, 255, 0.5)"/>
     <circle cx="200" cy="50" r="40" style="fill:rgba(255, 255, 0, 0.25)"/>
     <circle cx="250" cy="50" r="40" style="fill:rgba(0, 255, 255, 0.1)"/>
     </svg>
     
  4. Elipsa: <ellipse>
     

     <svg width="220" height="150">
       <ellipse cx="110" cy="80" rx="100" ry="50"
       style="fill:#0ff;stroke:#00f;stroke-width:2" />
     </svg>
     
  5. Linie poligonală: <polyline>
     

     <svg width="650" height="160">
       <polyline points="50,50 20,100 50,100" 
         style="stroke: #0000ff; stroke-width: 3px; fill: #00ffff;"/>
       <polyline points="100,100 200,10 250,100 100,150" 
         style="stroke: #0000ff; stroke-width: 3px; fill: #00ffff;"/>
       <polyline points="250,50 280,100 350,100 450,50 300,10" 
         style="stroke: #0000ff; stroke-width: 3px; fill: #00ffff;"/>
       <polyline points="550,5 600,5 625,30 625,80 600,105 550,105 525,80 525,30 " 
         style="stroke: #0000ff; stroke-width: 3px; fill: #00ffff;"/>
     </svg>
     
  6. Poligon: <polygon>
     

     <svg width="650" height="160">
       <polygon points="50,50 20,100 50,100" 
         style="stroke: #0000ff; stroke-width: 3px; fill: #00ffff;"/>
       <polygon points="100,100 200,10 250,100 100,150" 
         style="stroke: #0000ff; stroke-width: 3px; fill: #00ffff;"/>
       <polygon points="250,50 280,100 350,100 450,50 300,10" 
         style="stroke: #0000ff; stroke-width: 3px; fill: #00ffff;"/>
       <polygon points="550,5 600,5 625,30 625,80 600,105 550,105 525,80 525,30 " 
         style="stroke: #0000ff; stroke-width: 3px; fill: #00ffff;"/>
     </svg>
     
  7. Path: <path>
     Obiectul path este cel mai complex şi se descrie cu succesiuni de comenzi de forma următoare (cu litere mari se precizează un punct în mod absolut, iar cu litere mici precizarea se face relativ cu un precedent punct curent):
     • M = moveto: M x,y sau m dx,dy
     • L = lineto: L x,y sau l dx,dy
       

       <svg width="300" height="200" viewBox="0 0 400 250">
         <path d="M10 200 L90 10 L170 200" 
           style="stroke:#f00; stroke-width:1; fill: #ffffff;" />
         <path d="M210 200 L290 10 L370 200 Z" 
           style="stroke:#00f; stroke-width:1; fill: #ff0;" />
       </svg>          
       
     • H = horizontal lineto: H x sau h dx
     • V = vertical lineto: V y sau v dy
     • Q = quadratic Bézier curve (curba Bezier patratică generată cu punctul curent, un punct de control, punctul final):
       Q x1,y1 x, y sau q dx1,dy1 dx, dy
       

       <svg width="380" height="210">
         <path d="M10,200 L90,10 L170,200 M50,105 L130,105" 
           style="stroke:#f00; stroke-width:1; fill: #ffffff;" />
         <path d="M50,105 L130,105" 
           style="stroke:#0f0; stroke-width:1; fill: #ffffff;" />
         <path d="M10 200 Q90,10 170,200" 
           style="stroke:#00f; stroke-width:1; fill: #ffffff;" />
       </svg>          
       
     • T = smooth quadratic Bézier curveto (curba Bezier patratică generată cu punctul curent, un punct de control care este simetricul punctului de control precedent faţă de punctul curent, punctul final)
       T x,y sau t dx,dy
       

       <svg width="300" height="250" viewBox="0 0 400 410">
         <path d="M10,200 L90,10 L170,200" 
           style="stroke:#f00; stroke-width:1; fill: #ffffff;" />
         <path d="M170,200 L250,390 L330,200" 
           style="stroke:#0f0; stroke-width:1; fill: #ffffff;" />
         <path d="M10 200 Q90,10 170,200 T330,200" 
           style="stroke:#00f; stroke-width:1; fill: #ffffff;" />
       </svg>          
       
     • C = curveto (curba Bezier cubică generată cu punctul curent,două puncte intermediare, punctul final):
       C x1,y1 x2,y2 x, y sau c dx1,dy1 dx2,dy2 dx,dy
       

       <svg width="380" height="210">
         <path d="M10,200 L50,10 M130,10 L170,200" 
           style="stroke:#f00; stroke-width:1; fill: #ffffff;" />
         <path d="M10 200 C50,10 130,10 170,200" 
           style="stroke:#00f; stroke-width:1; fill: #ffffff;" />
       </svg>          
       
     • S = smooth curveto (curba Bezier cubică generată cu punctul curent, simetricul punctului de control precedent faţă de punctul curent, un nou punct intermediar, punctul final)
       S x2,y2 x, y sau s dx2,dy2 dx,dy
       

       <svg width="300" height="250" viewBox="0 0 400 410">
         <path d="M10,200 L50,10 M130,10 L170,200 M290,390 L330,200" 
           style="stroke:#f00; stroke-width:1; fill: #ffffff;" />
         <path d="M170,200 L210,390" 
           style="stroke:#0f0; stroke-width:1; fill: #ffffff;" />
         <path d="M10 200 C50,10 130,10 170,200 S290,390 330,200" 
           style="stroke:#00f; stroke-width:1; fill: #ffffff;" />
       </svg>          
       
     • A = elliptical arc
       A rx,ry x-axis-rotation large-arc-flag sweep-flag x,y sau a rx,ry x-axis-rotation large-arc-flag sweep-flag dx,dy
       - se desenează o elipsă cu axele rx şi ry
       - elipsa se roteşte cu unghiul "x-axis-rotation" (centrul elipsei este fix)
       
       - punctul curent şi punctul final se pun pe elipsă. Vor rezulta patru situaţii, care se aleg după urmatorii parametri:
       large-arc-flag=1 (arcul mare), large-arc-flag=0 (arcul mic)
       sweep-flag=0 (trecerea de la punctul iniţial la cel final se face cu parcurgerea arcului în sens trigonometric)
       
     • Z = closepath (închide traiectoria, deci va fi un contur închis): Z sau z
     http://commons.wikimedia.org/wiki/SVG_examples

     <svg  width="304" height="290">
        <path d="M2,111 h300 l-242.7,176.3 92.7,-285.3 92.7,285.3 z" 
        style="fill:#ff0;stroke:#f00;stroke-width:2;"/>
     </svg>
     

     
     
     http://www.carto.net/svg/samples/svg_html.shtml

     Fisierul "Austria.svg" din directorul curent
     

     
     Judetul Cluj:
     

     Fisierul "cj.svg" din directorul curent
     
  8. text: desenează un text începând cu o pozitie (x,y). Proprietatea text-anchor precizează poziţia, pe orizontală, a punctului (x,y) relativ cu dreptunghiul în care se desenează textul.
     

     <svg width="300" height="60">
       <text x="10" y="50" style="font-size:35; stroke:#00f;">Servere de date</text>
       <text x="10" y="100" style="font-size:35; fill:#f00;">Servere de date</text>
       <text x="10" y="150" style="font-size:35; stroke:#00f; fill:#f00;">Servere de date</text>
     </svg>          
     

     <svg width="300" height="200">
       <text x="50" y="50" transform="rotate(30)" 
         style="font-size:35; stroke:#00f;">
         Servere de date
       </text>
     </svg>          
     

     <svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">
       <rect width="100%" height="100%" style="fill:#f00;" />
       <circle cx="150" cy="100" r="80" style="fill:#0f0;" />
       <text x="150" y="110" style="font-size:22; text-anchor:middle; fill:#00f;">Servere de date</text>
     </svg>
     

• Jakob Jenkov, SVG Tutorial, http://tutorials.jenkov.com/svg/index.html
• SVG Tutorial, https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial
• SVG Tutorial, http://www.w3schools.com/svg/default.asp
• Scalable Vector Graphics (SVG) 1.1, http://www.w3.org/TR/SVG/Overview.html
• File:Romania judete.svg, http://commons.wikimedia.org/wiki/File:Romania_judete.svg
• svg-edit, https://code.google.com/p/svg-edit/
• sgv-edit: http://svg-edit.googlecode.com/svn-history/r1771/trunk/editor/svg-editor.html