Diseño

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.

Javier Usobiaga creando SVG
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

Únete Gratis y descarga

Apuntes_Unidad_2.pdf

Únete Gratis con tu email
Al hacer clic en "Únete Gratis" certifico que tengo 16 años o más y acepto las Condiciones de Uso, la Política de Privacidad, la Política de Cookies y recibir novedades y promociones.
¿Ya tienes cuenta? Entrar

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.

Cursos recomendados

Especialización en Diseño Gráfico y Comunicación Visual. Un curso de Diseño de Domestika
Domestika Specialization · 18h

Especialización en Diseño Gráfico y Comunicación Visual

Una especialización de varios profesores

Maestría en diseño gráfico: domina color, composición y percepción visual para crear identidades visuales impactantes y coherentes

  • 1.058
  • 100% (4)
ÚLTIMOS DÍAS GRATIS CON PLUS
94% Dto.
Precio original $99.99USD
Comprar $5.99USD
Diseño de feed de Instagram con Canva. Un curso de Diseño de Isabel Gil Loef

Diseño de feed de Instagram con Canva

Un curso de Isabel Gil Loef

Aprende a diseñar plantillas que facilitarán tu producción de contenido en Instagram de manera homogénea, original e impactante

  • 61.382
  • 99% (1.3K)
ÚLTIMOS DÍAS
95% Dto.
Precio original $19.99USD
Comprar $0.99USD
Introducción a Adobe Photoshop. Un curso de Diseño, Fotografía y Vídeo de Carles Marsal
Domestika Basics · 5 cursos

Introducción a Adobe Photoshop

Un curso de Carles Marsal

Aprende Adobe Photoshop desde cero y domina el mejor software de tratamiento, retoque y creación de imágenes digitales del mercado

  • 371.884
  • 100% (10K)
ÚLTIMOS DÍAS
93% Dto.
Precio original $29.99USD
Comprar $1.99USD