Descarga gratis una guía de etiquetas básicas para SVG

Descarga gratis, por tiempo limitado, una guía para conocer las etiquetas y estilos principales de SVG

SVG es un formato de gráficos vectoriales, basado en XML, que se utiliza para mostrar una variedad de gráficos en la web y otros entornos. Es un formato vectorial poco conocido pero muy útil para su uso en línea por la flexibilidad y la capacidad de mostrar gráficos con calidad.

Los documentos SVG no son más que simples archivos de texto sin formato que describen líneas, curvas, formas, colores y texto; pero para entender cómo funciona, es necesario empezar por su forma más básica, ya que esa es la clave para poder alterarlo y optimizarlo. Por eso, el diseñador web y desarrollador frontend, Javier Usobiaga (@htmlboy), comparte con Domestika una guía de etiquetas básicas para adentrarse en el SVG.

El formato SVG se caracteriza por ser escalable, interactivo y responsive, y su código por ser legible, fácil de entender y modificar, por lo que puede manipularse mediante CSS o JavaScript. Esto le brinda a SVG una flexibilidad y versatilidad a diferencia de formatos tradicionales como PNG, GIF o JPG. Además, puede interactuar fácilmente con otros lenguajes y tecnologías de estándares abiertos, incluidos JavaScript, DOM, CSS y HTML.

SVG cuenta con una practicidad enorme, ya que puede ser usado para realizar ilustraciones y diagramas simples; logos e iconos, con claridad y nitidez en cualquier tamaño; animaciones, incluso permite la interacción; efectos especiales, incluida la transformación de la forma o diferentes efectos pegajosos; y construcción de interfaces y aplicaciones para incorporarse con HTML5.

Con esta guía entenderás cómo funciona el formato SVG en su forma más básica para poder alterarlo y optimizarlo a través de un gráfico básico, sin editores visuales, solo con el editor de código (Codepen).

La guía incluye una pequeña explicación de cómo aplicar estilos a través de atributos y CSS, las etiquetas de línea, polilínea y polígono, etiquetas de texto y las etiquetas de trazo que permiten crear infinidad de curvas, rectas y puntos.

Descubre el curso 'Gráficos vectoriales SVG: ilustrar y animar con código',[/b] en él aprenderás a trabajar con ilustraciones vectoriales en tus páginas web, entenderás cómo funciona el formato SVG, descubrirás sus efectos, filtros y animaciones, para crear ilustraciones y piezas animadas con código HTML, CSS y JavasScript.

También te puede interesar:

- Introducción al Desarrollo Web Responsive con HTML y CSS, un curso de Javier Usobiaga Ferrer.
- Técnicas de desarrollo web con HTML5 y CSS3, un curso de Marta Armada.