Referencia SVG
Los dibujos e imágenes SVG se crean con diferentes elementos. Aquí encontrarás una tabla de elementos SVG con descripciones y atributos correspondientes.
SVG (Scalable Vector Graphics) es un lenguaje de marcado basado en XML para describir gráficos bidimensionales que permanecen nítidos a cualquier tamaño. Cada forma, degradado, filtro o animación en un documento SVG se escribe con un elemento dedicado. Esta página es una tabla de referencia rápida de todos los elementos SVG estándar, agrupados por propósito, con una breve descripción y los atributos que se usan con más frecuencia. Úsala como complemento de los capítulos prácticos — comienza con introducción a SVG y SVG en HTML5 — y vuelve aquí cuando necesites recordar qué hace un elemento o qué atributos acepta.
En la columna Atributos, una entrada como attr="…" describe el valor que espera un atributo editable, mientras que presentation attributes: … lista los grupos de atributos de presentación que admiten estilo CSS compatibles con el elemento. Los elementos obsoletos están marcados y, donde existe uno, apuntan al reemplazo moderno.
Formas básicas
Primitivas geométricas usadas para dibujar los gráficos visibles de un SVG.
| Elemento | Descripción | Atributos |
|---|---|---|
<circle> | Dibuja un círculo. Consulta el capítulo SVG circle. | cx="centro del círculo en el eje x" cy="centro del círculo en el eje y" r="radio del círculo (obligatorio)" presentation attributes: Color, FillStroke, Graphics |
<ellipse> | Dibuja una elipse. Consulta el capítulo SVG ellipse. | cx="centro de la elipse en el eje x" cy="centro de la elipse en el eje y" rx="radio a lo largo del eje x (obligatorio)" ry="radio a lo largo del eje y (obligatorio)" presentation attributes: Color, FillStroke, Graphics |
<line> | Dibuja una línea recta entre dos puntos. Consulta el capítulo SVG line. | x1="punto de inicio x de la línea" y1="punto de inicio y de la línea" x2="punto final x de la línea" y2="punto final y de la línea" presentation attributes: Color, FillStroke, Graphics, Markers |
<path> | Dibuja una forma arbitraria a partir de una serie de comandos de trazado. Consulta el capítulo SVG path. | d="un conjunto de comandos que especifican el trazado" pathLength="la longitud total del trazado" transform="una lista de transformaciones" presentation attributes: Color, FillStroke, Graphics, Markers |
<polygon> | Dibuja una forma cerrada a partir de una lista de al menos tres puntos. Consulta el capítulo SVG polygon. | points="los puntos del polígono (se requieren al menos tres)" fill-rule="parte de los atributos de presentación FillStroke" presentation attributes: Color, FillStroke, Graphics, Markers |
<polyline> | Dibuja una forma abierta formada por segmentos de línea recta conectados. Consulta el capítulo SVG polyline. | points="los puntos de la polilínea (obligatorio)" presentation attributes: Color, FillStroke, Graphics, Markers |
<rect> | Dibuja un rectángulo, opcionalmente con esquinas redondeadas. Consulta el capítulo SVG rectangle. | x="esquina superior izquierda del rectángulo en el eje x" y="esquina superior izquierda del rectángulo en el eje y" rx="radio de la esquina en el eje x (para redondear el elemento)" ry="radio de la esquina en el eje y (para redondear el elemento)" width="ancho del rectángulo (obligatorio)" height="alto del rectángulo (obligatorio)" presentation attributes: Color, FillStroke, Graphics |
Texto
Elementos para renderizar y distribuir texto dentro de un SVG. Consulta el capítulo SVG text.
| Elemento | Descripción | Atributos |
|---|---|---|
<text> | Dibuja un fragmento de texto en una posición determinada. | x="una lista de posiciones en el eje x; la posición n se asigna al carácter n (predeterminado 0)" y="una lista de posiciones en el eje y (véase x; predeterminado 0)" dx="longitudes que desplazan los caracteres respecto a la posición absoluta del último glifo (véase x)" dy="longitudes que desplazan los caracteres respecto a la posición absoluta del último glifo (véase x)" rotate="una lista de rotaciones; la rotación n se aplica al carácter n" textLength="una longitud objetivo que el visor intenta ajustar al texto modificando el espaciado y/o los glifos (predeterminado: la longitud normal del texto)" lengthAdjust="qué ajustar para encajar en textLength: 'spacing' o 'spacingAndGlyphs'" presentation attributes: Color, FillStroke, Graphics, FontSpecification, TextContentElements |
<textPath> | Distribuye texto a lo largo de la forma de un elemento <path> referenciado. | href="referencia URI al trazado sobre el que se distribuye el texto" |
<tspan> | Marca un sub-fragmento de texto dentro de un <text> o <tspan> para aplicarle estilo o reposicionarlo. | Idéntico al elemento <text>, y además: href="referencia a un elemento <text>" |
Degradados y patrones
Servidores de pintura que rellenan o trazan formas con degradados o mosaicos repetidos. Consulta los capítulos de degradados lineales y degradados radiales.
| Elemento | Descripción | Atributos |
|---|---|---|
<linearGradient> | Define un degradado que realiza transiciones de color a lo largo de un vector recto. | id="un id único usado para referenciar este degradado (obligatorio para referenciarlo)" gradientUnits="'userSpaceOnUse' u 'objectBoundingBox' (predeterminado 'objectBoundingBox')" gradientTransform="la transformación a aplicar al degradado" x1="inicio x del vector del degradado (número o %; predeterminado 0%)" y1="inicio y del vector del degradado (predeterminado 0%)" x2="fin x del vector del degradado (predeterminado 100%)" y2="fin y del vector del degradado (predeterminado 0%)" spreadMethod="'pad', 'reflect' o 'repeat'" href="referencia a otro degradado cuyos atributos y paradas se heredan como valores predeterminados (recursivo)" |
<radialGradient> | Define un degradado que realiza transiciones de color hacia el exterior desde un punto central. | gradientUnits="'userSpaceOnUse' u 'objectBoundingBox' (predeterminado 'objectBoundingBox')" gradientTransform="transformación a aplicar al degradado" cx="centro del degradado (número o %; predeterminado 50%)" cy="centro del degradado (predeterminado 50%)" r="radio del degradado (predeterminado 50%)" fx="punto focal del degradado (predeterminado 0%)" fy="punto focal del degradado (predeterminado 0%)" spreadMethod="'pad', 'reflect' o 'repeat'" href="referencia a otro degradado cuyos atributos y paradas se heredan como valores predeterminados (recursivo)" |
<stop> | Define un color y su posición dentro de un degradado. | offset="posición de esta parada, de 0 a 1 o de 0% a 100% (obligatorio)" stop-color="color de esta parada" stop-opacity="opacidad de esta parada, de 0 a 1" |
<pattern> | Define un mosaico gráfico que se repite para rellenar o trazar una forma. | id="id único usado para referenciar este patrón (obligatorio)" patternUnits="'userSpaceOnUse' u 'objectBoundingBox'; el segundo valor hace que x, y, width, height sean una fracción (o %) del cuadro delimitador del objeto que usa el patrón" patternContentUnits="'userSpaceOnUse' u 'objectBoundingBox'" patternTransform="una transformación aplicada a todo el patrón" x="desplazamiento del patrón desde la esquina superior izquierda (predeterminado 0)" y="desplazamiento del patrón desde la esquina superior izquierda (predeterminado 0)" width="ancho del mosaico del patrón (predeterminado 100%)" height="alto del mosaico del patrón (predeterminado 100%)" viewBox="la región visible en esta área de dibujo: min-x, min-y, width, height (separados por espacios o comas)" href="referencia a otro patrón cuyos atributos se heredan como valores predeterminados y cuyos hijos se heredan (recursivo)" |
Filtros
Primitivas de filtro (la familia fe*) y el contenedor <filter> que se combinan para producir efectos gráficos como desenfoque, iluminación y cambios de color. Consulta los capítulos de introducción a filtros SVG, efectos de desenfoque y sombras proyectadas.
| Elemento | Descripción | Atributos |
|---|---|---|
<filter> | Contenedor que agrupa primitivas de filtro en un efecto de filtro reutilizable y con nombre. | |
<feBlend> | Mezcla dos imágenes de entrada usando un modo de fusión. | mode="modo de fusión: normal|multiply|screen|darken|lighten" in="primera entrada: SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>" in2="la segunda entrada de la mezcla" result |
<feColorMatrix> | Aplica una transformación matricial a los canales de color y alfa de la entrada. | in="identifica la imagen de entrada" type="matrix|saturate|hueRotate|luminanceToAlpha" values="los valores para el tipo elegido" result |
<feComponentTransfer> | Reasigna cada canal de color/alfa de forma independiente usando sus hijos feFunc*. | in="identifica la imagen de entrada" result |
<feFuncA> | Define la función de transferencia para el canal alfa de <feComponentTransfer>. | type="identity|table|discrete|linear|gamma" tableValues slope intercept amplitude exponent offset |
<feFuncR> | Define la función de transferencia para el canal rojo de <feComponentTransfer>. | type="identity|table|discrete|linear|gamma" tableValues slope intercept amplitude exponent offset |
<feFuncG> | Define la función de transferencia para el canal verde de <feComponentTransfer>. | type="identity|table|discrete|linear|gamma" tableValues slope intercept amplitude exponent offset |
<feFuncB> | Define la función de transferencia para el canal azul de <feComponentTransfer>. | type="identity|table|discrete|linear|gamma" tableValues slope intercept amplitude exponent offset |
<feComposite> | Combina dos entradas usando operadores de composición Porter-Duff o aritméticos. | in="identifica la primera imagen de entrada" in2="identifica la segunda imagen de entrada" operator="over|in|out|atop|xor|arithmetic" k1="coeficiente aritmético" k2="coeficiente aritmético" k3="coeficiente aritmético" k4="coeficiente aritmético" result |
<feConvolveMatrix> | Aplica una matriz de convolución (kernel) para efectos como enfoque o relieve. | in="identifica la imagen de entrada" order="número de columnas y filas en la matriz del kernel" kernelMatrix="lista de valores del kernel" divisor="divisor para los valores del kernel" bias="valor de sesgo" targetX="posición x de la matriz de convolución" targetY="posición y de la matriz de convolución" edgeMode="duplicate|wrap|none" kernelUnitLength="longitud del kernel" preserveAlpha="true|false" result |
<feDiffuseLighting> | Ilumina la imagen de entrada como una superficie difusa (mate) usando su alfa como mapa de relieve. | in="identifica la imagen de entrada" surfaceScale="factor de escala de la superficie" diffuseConstant="constante de reflexión difusa" kernelUnitLength="longitud del kernel" result |
<feDisplacementMap> | Desplaza los píxeles de una entrada usando los canales de color de otra. | in="identifica la primera imagen de entrada" in2="identifica la segunda imagen de entrada" scale="factor de escala" xChannelSelector="R|G|B|A" yChannelSelector="R|G|B|A" result |
<feDistantLight> | Define una fuente de luz distante (direccional) para un filtro de iluminación. | azimuth="ángulo azimutal" elevation="ángulo de elevación" |
<feFlood> | Rellena la región del filtro con un único color y opacidad. | flood-color="color de relleno" flood-opacity="opacidad de relleno" result |
<feGaussianBlur> | Aplica un desenfoque gaussiano a la imagen de entrada. | in="identifica la imagen de entrada" stdDeviation="desviación estándar para el desenfoque" edgeMode="duplicate|wrap|none" result |
<feImage> | Carga una imagen externa o un elemento referenciado como entrada de filtro. | href="referencia URI a la imagen" preserveAspectRatio="'none' o cualquiera de las 9 combinaciones de 'xVALYVAL'" result |
<feMerge> | Apila varias entradas en capas usando hijos <feMergeNode>. | result |
<feMergeNode> | Identifica una capa de entrada para un <feMerge> padre. | in="identifica la imagen de entrada" |
<feMorphology> | Adelgaza (erosiona) o engrosa (dilata) la imagen de entrada. | in="identifica la imagen de entrada" operator="erode|dilate" radius="radio del efecto" result |
<feOffset> | Desplaza la imagen de entrada un desplazamiento dado (la base de las sombras proyectadas). | in="identifica la imagen de entrada" dx="desplazamiento horizontal" dy="desplazamiento vertical" result |
<fePointLight> | Define una fuente de luz puntual para un filtro de iluminación. | x="posición x de la fuente de luz" y="posición y de la fuente de luz" z="posición z de la fuente de luz" |
<feSpecularLighting> | Ilumina la imagen de entrada como una superficie especular (brillante) usando su alfa como mapa de relieve. | in="identifica la imagen de entrada" surfaceScale="factor de escala de la superficie" specularConstant="constante de reflexión especular" specularExponent="exponente especular" kernelUnitLength="longitud del kernel" result |
<feSpotLight> | Define una fuente de luz focal para un filtro de iluminación. | x="posición x de la fuente de luz" y="posición y de la fuente de luz" z="posición z de la fuente de luz" pointsAtX="coordenada x hacia la que apunta la luz" pointsAtY="coordenada y hacia la que apunta la luz" pointsAtZ="coordenada z hacia la que apunta la luz" specularExponent="exponente especular" limitingConeAngle="ángulo del cono límite" |
<feTile> | Repite (en mosaico) una entrada de filtro para rellenar la región del filtro. | in="identifica la imagen de entrada" result |
<feTurbulence> | Genera turbulencia de Perlin o ruido fractal (para texturas como nubes o mármol). | baseFrequency="frecuencia base" numOctaves="número de octavas" seed="valor de semilla" stitchTiles="stitch|noStitch" type="fractalNoise|turbulence" result |
Animación
Elementos que cambian los valores de los atributos con el tiempo. Son hijos del elemento que animan (o lo referencian).
| Elemento | Descripción | Atributos |
|---|---|---|
<animate> | Anima un único atributo o propiedad de un elemento durante un intervalo de tiempo. | attributeName="el nombre del atributo de destino" by="un valor de desplazamiento relativo" from="el valor inicial" to="el valor final" dur="la duración" repeatCount="el número de veces que se ejecuta la animación" |
<animateMotion> | Mueve un elemento a lo largo de un trazado de movimiento con el tiempo. | calcMode="modo de interpolación: 'discrete', 'linear', 'paced' o 'spline'" path="el trazado de movimiento" keyPoints="qué tan lejos se mueve el objeto a lo largo del trazado para cada valor de keyTimes" rotate="transformación de rotación" href="referencia URI al elemento <path> que especifica el trazado de movimiento" |
<animateTransform> | Anima un atributo de transformación (translate, scale, rotate, skew) con el tiempo. | by="valor de desplazamiento relativo" from="valor inicial" to="valor final" type="tipo de transformación a cambiar con el tiempo: 'translate', 'scale', 'rotate', 'skewX' o 'skewY'" |
<mpath> | Referencia un elemento <path> externo para usarlo como trazado de movimiento para <animateMotion>. | href="referencia URI al elemento de trazado" |
<set> | Establece un atributo a un valor durante una duración especificada (una animación sin interpolación). | attributeName="el nombre del atributo de destino" to="el valor a establecer" begin="cuándo comienza el cambio" dur="cuánto tiempo se mantiene el valor" |
Contenedores y estructura
Elementos que agrupan, referencian, definen u organizan el contenido en lugar de dibujarlo directamente.
| Elemento | Descripción | Atributos |
|---|---|---|
<a> | Crea un enlace a una página web, archivo, dirección de correo electrónico, ubicación o cualquier otro URL. | href target |
<clipPath> | Define un trazado de recorte que limita la región de un elemento que se renderiza. | clipPathUnits="'userSpaceOnUse' u 'objectBoundingBox' (predeterminado 'userSpaceOnUse')" |
<defs> | Almacena objetos gráficos para ser referenciados y reutilizados posteriormente (no se renderizan directamente). | |
<desc> | Proporciona una descripción solo de texto para un elemento gráfico o contenedor SVG (para accesibilidad). | |
<foreignObject> | Incrusta contenido de otro espacio de nombres XML (como HTML) dentro de un SVG, permitiendo que el navegador lo renderice. | x y width height |
<g> | Agrupa elementos para que las transformaciones y los atributos de presentación se apliquen a todos juntos. | id="nombre del grupo" fill="color de relleno del grupo" opacity="opacidad del grupo" presentation attributes: All |
<image> | Incrusta una imagen de mapa de bits o SVG dentro del documento. | x="esquina superior izquierda de la imagen en el eje x" y="esquina superior izquierda de la imagen en el eje y" width="ancho de la imagen (obligatorio)" height="alto de la imagen (obligatorio)" href="ruta a la imagen (obligatorio)" presentation attributes: Color, Graphics, Images, Viewports |
<marker> | Define un gráfico (como una punta de flecha) dibujado en los vértices de una línea, polilínea o trazado mediante marker-start, marker-mid y marker-end. Define el marcador antes de referenciarlo. | markerUnits="'strokeWidth' o 'userSpaceOnUse'; con 'strokeWidth' una unidad equivale a un ancho de trazo, de lo contrario el marcador no escala (predeterminado 'strokeWidth')" refX="posición donde el marcador se conecta con el vértice (predeterminado 0)" refY="posición donde el marcador se conecta con el vértice (predeterminado 0)" orient="'auto' o un ángulo; 'auto' hace que el eje x sea una tangente del vértice (predeterminado 'auto')" markerWidth="ancho del marcador (predeterminado 3)" markerHeight="alto del marcador (predeterminado 3)" viewBox="los límites del viewport: min-x, min-y, width, height (separados por espacios o comas)" presentation attributes: All |
<mask> | Define una máscara alfa que combina opacidad y recorte; el texto, las formas o los trazados establecen qué partes se muestran (el estado predeterminado es completamente transparente). | maskUnits="sistema de coordenadas para x, y, width, height en la máscara: 'userSpaceOnUse' u 'objectBoundingBox' (predeterminado 'objectBoundingBox')" maskContentUnits="sistema de coordenadas para el contenido de la máscara: 'userSpaceOnUse' u 'objectBoundingBox' (predeterminado 'userSpaceOnUse')" x="plano de recorte de la máscara (predeterminado -10%)" y="plano de recorte de la máscara (predeterminado -10%)" width="plano de recorte de la máscara (predeterminado 120%)" height="plano de recorte de la máscara (predeterminado 120%)" |
<metadata> | Contiene metadatos legibles por máquina (como RDF) sobre el documento; no se renderiza. | |
<script> | Incrusta o referencia un script (normalmente JavaScript) para interactividad. | href="URI de un script externo" type="tipo MIME del lenguaje del script" |
<style> | Incrusta una hoja de estilos CSS dentro del documento SVG. | type="tipo MIME de la hoja de estilos (text/css)" media="consulta de medios a la que se aplican los estilos" |
<svg> | El contenedor raíz (o anidado) que define un fragmento de documento SVG y su sistema de coordenadas. | x="esquina superior izquierda al incrustar (predeterminado 0)" y="esquina superior izquierda al incrustar (predeterminado 0)" width="ancho del fragmento (predeterminado 100%)" height="alto del fragmento (predeterminado 100%)" viewBox="la región visible en esta área de dibujo: min-x, min-y, width, height (separados por espacios o comas)" preserveAspectRatio="'none' o cualquiera de las 9 combinaciones 'xVALYVAL' donde VAL es 'min', 'mid' o 'max' (predeterminado xMidYMid)" xmlns="http://www.w3.org/2000/svg" presentation attributes: All |
<switch> | Renderiza solo el primer hijo cuyos atributos de prueba (como idioma o compatibilidad con funciones) se evalúen como verdaderos. | |
<symbol> | Define una plantilla reutilizable que no se renderiza hasta que es instanciada por un elemento <use>. | |
<title> | Proporciona un nombre accesible breve (que suele mostrarse como información sobre herramienta) para su elemento padre. | |
<use> | Clona y renderiza un elemento referenciado (como <svg>, <g> o una forma) por su id. | x="esquina superior izquierda del elemento clonado en el eje x" y="esquina superior izquierda del elemento clonado en el eje y" width="ancho del elemento clonado" height="alto del elemento clonado" href="referencia URI al elemento clonado" presentation attributes: All |
<view> | Define una vista con nombre (un viewBox y una relación de aspecto) que puede ser referenciada por una URL con fragmento. | viewBox preserveAspectRatio zoomAndPan="'magnify' o 'disable' (predeterminado magnify)" |
Elementos obsoletos
Estos elementos están obsoletos en SVG 2 y deben evitarse en documentos nuevos. Donde existe un reemplazo moderno, se indica en la descripción.
| Elemento | Descripción | Atributos |
|---|---|---|
<altGlyph> | Controlaba los glifos utilizados para renderizar datos de caracteres específicos. Obsoleto en SVG 2; sin reemplazo directo (usa texto Unicode en <text>/<tspan>). | x y dx dy rotate glyphRef format href |
<altGlyphDef> | Definía un conjunto de sustitución para glifos. Obsoleto en SVG 2; sin reemplazo. | id |
<altGlyphItem> | Definía un conjunto de candidatos para sustituciones de glifos. Obsoleto en SVG 2; sin reemplazo. | id |
<color-profile> | Describía un perfil de color aplicado a una imagen. Obsoleto en SVG 2; usa la regla at CSS @color-profile y la función color() en su lugar. | local="ID único para un perfil de color almacenado localmente" name="nombre del perfil" rendering-intent="auto|perceptual|relative-colorimetric|saturation|absolute-colorimetric" href="URI de un recurso de perfil ICC" |
<cursor> | Definía un cursor personalizado independiente de la plataforma. Obsoleto en SVG 2; usa la propiedad CSS cursor en su lugar. | x="esquina superior izquierda del cursor en el eje x (predeterminado 0)" y="esquina superior izquierda del cursor en el eje y (predeterminado 0)" href="URI de la imagen a usar como cursor" |
<font> | Definía una fuente SVG. Obsoleto en SVG 2; usa CSS @font-face con formatos de fuente web en su lugar. | |
<font-face> | Describía las características de una fuente. Obsoleto en SVG 2; usa la regla CSS @font-face en su lugar. | |
<font-face-format> | Especificaba el tipo de fuente referenciado por su padre <font-face-uri>. Obsoleto en SVG 2; usa el indicador CSS @font-face format() en su lugar. | |
<font-face-name> | Referenciaba una fuente local por nombre. Obsoleto en SVG 2; usa la función CSS @font-face local() en su lugar. | |
<font-face-src> | Reflejaba el descriptor src de las reglas CSS @font-face. Obsoleto en SVG 2; usa el descriptor CSS @font-face src en su lugar. | |
<font-face-uri> | Referenciaba una definición remota de la fuente actual. Obsoleto en SVG 2; usa CSS @font-face src: url() en su lugar. | |
<glyph> | Definía los gráficos para un glifo particular en una fuente SVG. Obsoleto en SVG 2; sin reemplazo. | |
<glyphRef> | Referenciaba un glifo para usar como alternativo. Obsoleto en SVG 2; sin reemplazo. | |
<hkern> | Definía pares y ajustes de kerning horizontal en una fuente SVG. Obsoleto en SVG 2; usa el kerning de fuentes web en su lugar. | |
<missing-glyph> | Definía el glifo usado cuando un carácter no puede mostrarse en una fuente SVG. Obsoleto en SVG 2; sin reemplazo. | |
<tref> | Referenciaba y renderizaba el contenido de texto de otro elemento. Obsoleto en SVG 2; sin reemplazo. | href="referencia URI al contenido de texto referenciado" |
<vkern> | Definía pares de kerning vertical en una fuente SVG. Obsoleto en SVG 2; usa el kerning de fuentes web en su lugar. |
Práctica
Práctica
¿Cuáles son algunas de las características que pueden incluirse en los SVGs al programar en HTML?
Was this page helpful?