Descargas

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.

Descarga gratis una guía de etiquetas básicas para SVG 1
Javier Usobiaga creando 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.

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

Sign up and download

Guia-etiquetas-basicas-SVG-por-Javier-Usobiaga.pdf

or sign up with your email
By clicking "Create an account" I am confirming I am 16 or older and I accept the Terms of Use, the Privacy Policy, the Cookies Policy, and agree to receive news and promotions.
If you already registered, you may log in

La descarga de este archivo estará disponible hasta el 22 de agosto, si después de dicha fecha quieres disponer de él, podrás hacerlo apuntándote al curso 'Gráficos vectoriales SVG: ilustrar y animar con código', 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.

Get Domestika's news delivered to your inbox