SVG define gráficos basados en vectores en formato XML.
Qué es SVG?
- SVG significa Scalable Vector Graphics
- SVG se utiliza para definir gráficos para la Web
- SVG es una recomendación del W3C
El elemento <svg>
El elemento HTML <svg> es un contenedor para gráficos SVG. SVG tiene varios métodos para dibujar rutas, cuadros, círculos, texto e imágenes gráficas.
SVG círculo
<!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>
Rectángulo SVG
<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>
Rectángulo redondeado con SVG
<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>
Estrella SVG
<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 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>
Diferencias entre SVG y Canvas
SVG es un lenguaje para describir gráficos 2D en XML. Canvas dibuja gráficos 2D, sobre la marcha (con JavaScript). SVG está basado en XML, lo que significa que todos los elementos están disponibles dentro del SVG DOM. Puede adjuntar controladores de eventos de JavaScript para un elemento.
En SVG, cada forma dibujada se recuerda como un objeto. Si se cambian los atributos de un objeto SVG, el navegador puede volver a representar automáticamente la forma.
El lienzo se representa píxel por píxel. En el lienzo, una vez que se dibuja el gráfico, el navegador lo olvida. Si se debe cambiar su posición, se debe volver a dibujar toda la escena, incluidos los objetos que podrían haber estado cubiertos por el gráfico.