Scalable Vector Graphics (SVG) es un lenguaje de marcado basado en XML que se utiliza para describir gráficos vectoriales bidimensionales. Como estándar web abierto basado en texto, SVG puede representar gráficos de diferentes tamaños de manera elegante y concisa, y se integra sin problemas con otros estándares web como CSS, DOM, JavaScript y SMIL. En esencia, SVG es relativo a las imágenes, al igual que HTML es relativo al texto.
Las imágenes SVG y sus comportamientos relacionados se definen en archivos de texto XML, lo que significa que se pueden buscar, indexar, codificar y comprimir. Además, esto también significa que se puede utilizar cualquier editor de texto y software de dibujo para crearlos y editarlos.
A diferencia de los modos de imagen de mapa de bits tradicionales, como JPEG y PNG, el formato SVG proporciona gráficos vectoriales, lo que significa que sus imágenes se pueden ampliar infinitamente sin distorsión o degradación de la calidad, y el contenido se puede modificar fácilmente.
SVG es un estándar abierto desarrollado por el World Wide Web Consortium (W3C) desde 1999.
Entender los elementos svg
Las imágenes SVG se crean utilizando varios elementos, que se aplican a la estructura, el dibujo y el diseño de las imágenes vectoriales. Aquí, el documento de referencia para cada elemento SVG se puede encontrar en el enlace del documento de referencia .
Por ejemplo, el elemento de línea es una forma SVG básica que se utiliza para crear una línea que conecta dos puntos. Los atributos propietarios x1, x2, y1, y2 representan las posiciones de las coordenadas de dos puntos.
<svg class="container">
<line x1="0" y1="10" x2="270" y2="10" class="line"/>
</svg>
Los elementos SVG se pueden modificar mediante atributos, que especifican información detallada sobre cómo procesar o representar el elemento. Consulte los enlaces a la documentación para comprender qué elementos los respaldan y cómo funcionan.
SVG proporciona una amplia gama de atributos de trazo para describir contornos, que incluyen
1. El trazo especifica el color
2. El ancho del trazo especifica el ancho
3. Stroke-linecap especifica el estilo del punto final
4. Stroke-dasharray especifica la matriz de líneas de intervalo
5. Stroke-dashoffset especifica el desplazamiento de posición
Cuando stroke-dasharray tiene dos valores, representa la longitud de la línea punteada y la distancia entre cada línea punteada. El atributo stroke-dashoffset es el desplazamiento relativo al punto de partida. Cuando el valor de x está compensado por un número positivo, equivale a mover x hacia la izquierda. Unidades de longitud, cuando un número negativo está compensado por x, equivale a mover x unidades de longitud hacia la derecha.
Usando estas dos propiedades, podemos crear efectos de animación atractivos, que pueden realizar el segmento de línea desde cero, de corto a largo.
Cuando se mueve el mouse, el desplazamiento se cambia de 270 a 0 para lograr el efecto en la animación.
.line {
stroke-dashoffset: 270;
stroke: #eee;
stroke-dasharray: 270;
stroke-width: 20;
transition: stroke-dashoffset 0.3;
}
.container:hover .line{
stroke-dashoffset: 0;
}
Al igual que HTML, SVG también tiene un modelo de objetos de documento (DOM) y eventos a los que se puede acceder mediante JavaScript. Esto permite a los desarrolladores crear animaciones enriquecidas e imágenes interactivas. Un poco de SVG puede enriquecer enormemente el contenido web.