Gráficos HTML SVG
SVG define gráficos basados en vectores en formato XML.
¿Qué es SVG?
- SVG significa gráficos vectoriales escalables
- SVG se utiliza para definir gráficos para la Web
- SVG es una recomendación del W3C
El elemento HTML <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.
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el
<svg>elemento.
| Element | |||||
|---|---|---|---|---|---|
| <svg> | 4.0 | 9.0 | 3.0 | 3.2 | 10.1 |
Círculo SVG
Ejemplo
<!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
Ejemplo
<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 SVG
Ejemplo
<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
Ejemplo
<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>
Logotipo SVG
Ejemplo
<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.
Comparación de Canvas y SVG
La siguiente tabla muestra algunas diferencias importantes entre Canvas y SVG:
| Canvas | SVG |
|---|---|
|
|
Tutorial SVG
Para obtener más información sobre SVG, lea nuestro tutorial de SVG .