En este artículo, conoceremos los conceptos básicos de HTML SVG y su implementación a través de los ejemplos. SVG significa Gráficos vectoriales escalables. Básicamente define gráficos basados en vectores en formato XML. Los gráficos SVG NO pierden calidad si se amplían o redimensionan. Cada elemento y cada atributo en los archivos SVG se pueden animar.
Ventajas de SVG: Las ventajas de usar SVG sobre otros formatos de imagen (como JPEG y GIF) son:
- Las imágenes SVG se pueden crear y editar con cualquier editor de texto.
- Las imágenes SVG se pueden buscar, indexar, codificar y comprimir.
- Las imágenes SVG son escalables.
- Las imágenes SVG se pueden imprimir con alta calidad en cualquier resolución.
Diferencias entre HTML SVG y HTML Canvas:
- SVG es un lenguaje para describir gráficos 2D en XML, mientras que Canvas dibuja gráficos 2D sobre la marcha con JavaScript.
- Si se cambian los atributos de un objeto SVG, el navegador puede volver a representar automáticamente la forma, mientras que Canvas se representa píxel por píxel. En el lienzo, una vez que se dibuja el gráfico, el navegador lo olvida.
- SVG es independiente de la resolución, mientras que CANVAS depende de la resolución.
- SVG admite controladores de eventos, mientras que CANVAS no admite controladores de eventos.
Ejemplo 1: en este ejemplo, creamos una línea SVG en HTML.
HTML
<!DOCTYPE html> <html> <body> <h2>Welcome To GeeksforGeeks</h2> <svg height="250" width="600"> <line x1="10" y1="10" x2="400" y2="400" style="stroke:rgb(0,0,255);stroke-width:3" /> </svg> </body> </html>
Producción:
Dibujo lineal SVG
Ejemplo 2: dibujar un círculo SVG en HTML
HTML
<!DOCTYPE html> <html> <body> <!-- html svg tag is used here --> <svg width="200" height="200"> <circle cx="80" cy="80" r="50" stroke="black" stroke-width="2" fill="grey" /> </svg> </body> </html>
Producción:
Dibujo de círculo SVG
Ejemplo 3: dibujar un rectángulo SVG en HTML
HTML
<DOCTYPE html> <html> <body> <!-- html svg tag is used here --> <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> </body> </html>
Producción:
Dibujo de rectángulo SVG
Ejemplo 4: dibujar un rectángulo redondeado SVG en HTML
HTML
<!DOCTYPE html> <html> <body> <!-- html svg tag is used here --> <svg width="400" height="380"> <rect x="80" y="20" rx="20" ry="20" width="150" height="150" style="fill: orange; stroke: black; stroke-width: 2; opacity: 0.5" /> </svg> </body> </html>
Producción:
Dibujo de rectángulo redondeado SVG
Ejemplo 5: dibujar una estrella SVG en HTML
HTML
<!DOCTYPE html> <html> <body> <!-- html svg tag is used here --> <svg width="300" height="200"> <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill: grey; stroke: orange; stroke-width: 5; fill-rule: evenodd" /> </svg> </body> </html>
Producción:
Dibujo de estrella SVG
Ejemplo 6: dibujar un logotipo en HTML usando SVG
HTML
<!DOCTYPE html> <html> <body> <!-- html svg tag is used here --> <svg height="300" width="700"> <defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color: white; stop-opacity: 1" /> <stop offset="100%" style="stop-color: green; stop-opacity: 1" /> </linearGradient> </defs> <ellipse cx="200" cy="100" rx="120" ry="80" fill="url(#grad1)" /> <text fill="#ffffff" font-size="22" font-family="ARIAL" x="120" y="110"> GeeksforGeeks </text> </svg> </body> </html>
Producción:
Logotipo de GFG usando SVG
Navegadores compatibles:
- Google Chrome 4.0
- Internet Explorer 9.0
- Firefox 3.0
- Ópera 10.1
- Safari 3.2
Publicación traducida automáticamente
Artículo escrito por Shubrodeep Banerjee y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA