¿Qué es exactamente SVG?
SVG significa Gráficos vectoriales escalables. Se utiliza para crear y definir gráficos para la página web. Básicamente define gráficos basados en vectores en formato XML. Los gráficos SVG NO pierden calidad si se amplían o redimensionan. Todos los elementos y atributos de los archivos SVG se pueden animar.
¿Cuál es su Contenedor en HTML?
El contenedor de elementos HTML <svg> se utiliza para definir los gráficos SVG. Los gráficos vectoriales creados con el generador SVG son compatibles con todos los navegadores web modernos como Google Chrome, Mozilla Firefox, Microsoft Edge, etc. Todos estos navegadores web pueden mostrar gráficos SVG sin necesidad de un software de terceros, como PNG, GIF, etc.
Nota: ¡SVG es una recomendación del W3C! (Fecha: 14 de enero de 2003).
¿Cómo crear gráficos usando SVG?
A continuación se presentan algunos ejemplos de gráficos SVG. Estas muestras son solo para su comprensión.
1. Rectángulo SVG
HTML
<!DOCTYPE html> <html> <head> <title>SVG - Rectangle</title> </head> <body> <svg width="300" height="100"> <rect width="300" height="100" style="fill:green;stroke-width:5;stroke:rgb(0,0,0)" /> </svg> </body> </html>
SVG – Rectángulo
2. Círculo SVG
HTML
<!DOCTYPE html> <html> <head> <title>SVG - Circle</title> </head> <body> <svg width="300" height="300"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="5" fill="orange" /> </svg> </body> </html>
SVG – Círculo
3. Estrella SVG
HTML
<!DOCTYPE html> <html> <head> <title>SVG - Star</title> </head> <body> <svg width="300" height="200"> <polygon points= "100,10 40,198 190,78 10,78 160,198" style="fill:purple; stroke:black;stroke-width:3;" /> </svg> </body> </html>
SVG – Estrella
¿Qué tienen de especial los SVG?
SVG tiene algunas ventajas que lo hacen preferible a otros formatos de imagen como JPEG, PNG, GIF , etc.
- SVG se puede crear y editar con cualquier editor de texto.
- SVG se puede escalar o ampliar fácilmente.
- SVG ofrece alta calidad para cualquier resolución.
- SVG son puramente scripts XML.
Nota: SVG se utiliza para definir gráficos 2D. Es una herramienta basada en XML.
Además del generador de SVG , Canvas también es una herramienta de generación de gráficos 2D que se basa en JavaScript. La diferencia en SVG es que cada forma descrita se recuerda como un objeto, es decir, no es necesario volver a renderizar la forma si se cambian los atributos de los gráficos SVG.
Publicación traducida automáticamente
Artículo escrito por iamartyayadav y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA