LenguajeHTML.com

Lenguaje SVG

Lenguaje de imágenes de gráficos vectoriales SVG, derivado del lenguaje de marcado HTML.

← Volver Guía rápida Más sobre ManzDev

Introducción a SVG

¿Qué es SVG? Scalable Vector Graphics (SVG)

Elemento o etiqueta SVG La etiqueta principal de un archivo vectorial SVG

Formas básicas

Rectángulos y cuadrados El elemento SVG <rect>

Círculos y elipses El elemento <circle> y el elemento <ellipse>

Líneas y polígonos Etiquetas <line>, <polyline> o <polygon>

Atributos SVG

Trazos (stroke) El atributo stroke de SVG

Forma del trazo El atributo stroke-linecap de SVG

Patrones en trazos El atributo stroke-dasharray de SVG

Rellenos (fill) El atributo fill y relacionados

Transformaciones SVG Funciones de transformación

Organización

Agrupaciones La etiqueta de grupo <g>

Metadatos en SVG Las etiquetas <title>, <desc>, <metadata> y <switch>

Plantillas reutilizables (símbolos) Las etiquetas <symbol>, <defs> y <use>

Estilos CSS y Javascript La etiqueta <style> y <script>

Trayectos

Trayectos lineales La etiqueta <path>

Trayectos con curvas La etiqueta <path> para curvas

Trayectos relativos Trayectos con coordenadas relativas

Flechas (markers) La etiqueta <marker>

Textos

Textos en SVG La etiqueta <text> y <tspan>

Textos en trayectos La etiqueta <textPath>

Aprender más

Si lo prefieres, puedes aprender también sobre estas temáticas:

¿Quién soy yo?

Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.

Puedes encontrar más sobre mi en Manz.dev