¿Cuál es SVG?
- SVG significa Scalable Vector Graphics
- SVG se utiliza para definir los gráficos para la Web
- SVG es una recomendación del W3C
Scalable Vector Graphics (SVG) es un formato de imagen vectorial basado en XML para gráficos bidimensionales con el apoyo para la interactividad y animación. La especificación SVG es un estándar abierto desarrollado por el World Wide Web Consortium (W3C) desde 1999.
Las imágenes SVG y sus comportamientos están definidos en archivos de texto XML. Esto significa que se pueden buscar, indexar, secuencias de comandos, y se comprimen. Como archivos XML, imágenes SVG pueden ser creados y editados con cualquier editor de texto, así como con software de dibujo.
Todos los principales navegadores web modernos, incluyendo Mozilla Firefox, Internet Explorer, Google Chrome, Opera, Safari y Microsoft Edge-renderizado SVG tienen apoyo.
El HTML <svg> Element
El HTML <svg> elemento (introduced in HTML5) es un contenedor para gráficos SVG.
SVG tiene varios métodos para caminos de dibujo, cajas, círculos, texto e imágenes gráficas.
Soporte del navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el <svg> elemento.
| Elemento | |||||
|---|---|---|---|---|---|
| <svg> | 4.0 | 9.0 | 3.0 | 3.2 | 10.1 |
SVG Círculo
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> Inténtalo tú mismo " SVG rectángulo
rgb (0,0,0) ">
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>
SVG rectángulo redondeado
Lo sentimos, su navegador no soporta SVG en línea.
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>
SVG estrella
Lo sentimos, su navegador no soporta SVG en línea.
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>
SVG Logo
SVG Lo sentimos, su navegador no soporta SVG en línea.
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 (with a JavaScript) .
SVG está basado en XML, lo que significa que cada elemento está disponible dentro del DOM SVG. Puede asociar controladores de eventos de JavaScript para un elemento.
En SVG, cada forma dibujado es recordado como un objeto. Si se cambian los atributos de un objeto SVG, el navegador puede automáticamente volver a hacer la forma.
Lienzo se vuelve pixel por pixel. En la lona, una vez que se dibuja el gráfico, se olvida por el navegador. Si su posición debe ser cambiado, toda la escena necesita ser redibujado, incluyendo todos los objetos que podrían haber sido incluidos en el gráfico.
Comparación de la lona y SVG
La siguiente tabla muestra algunas diferencias importantes entre la lona y SVG:
| Canvas | SVG |
|---|---|
|
|
Para obtener más información sobre SVG, por favor lea nuestra Tutorial SVG .