8. Gráficos de vectores (SVG)

  • Son gráficos escalables basados en vectores que permiten ser redimensionados sin perder calidad. Suelen usarse programas específicos como "Inkscape" para crearlos. Para incorporar estos gráficos a la web, pueden seguirse varios métodos:
  • Agregar el archivo .svg ya editado a un elemento "img"<img src="graf.svg"/>. Puede verse "descolocado".
  • Agregar el código directamente con el elemento "svg":
    <svg width="25%"> <circle cx="80" cy="80" r="50" fill="green" /> </svg>
  • Si se sigue el segundo método, los elementos que crean figuras son "n" hace referencia a un número entrecomillado, "txt" a un texto entrecomillado):
    • <circle cx=n cy=n r=n fill=txt />
    • <ellipse cx=n cy=n rx=n ry=n fill=txt/>
    • <rect x=n y=n width=n height=n fill=txt/>
    • <line x1=n y1=n x2=n y2=n style=txt/>
    • <polyline points fill=txt/>
    • <polygon points fill=txt/>
    • <path d="Mn n Ln n Ln n Ln n Z",style="fill:txt" />
  • Las propiedades o parámetros indicados anteriormente significan (las coordenadas x e y tienen su origen en el borde superior izquierdo de la página):
    • points: (x1 y1, x2 y2, x3 y3,…)
    • fill: green, yellow, none,... (para rellenar)
    • style(stroke: black, green, rgb(...)) (para los bordes, en especial para dibujar líneas)
    • M(x y)(punto inicial)
    • L(x y)(punto final de la línea)
    • Z: (final del "path")
    • Las animaciones se crean con el elemento animate:
      <rect width="150" height="150" fill="orange"> <animate attributeName="x" from="0" to="300" dur="3s" fill="freeze" repeatCount="2"/> </rect>
    • En este caso, fill indica si al final de la animación el elemento debe o no mantener su valor final (freeze congela, initial vuelve al valor inicial) tras las repeticiones si las hubiera.

See the Pen 
SVG
 by Ricardo (@RicardoSGZ)
on CodePen.