Referencia SVG
Los dibujos e imágenes SVG se crean con diferentes elementos. Aquí puedes encontrar una tabla de elementos SVG con sus descripciones y atributos correspondientes.
Elementos SVG
| Element | Description | Attributes |
|---|---|---|
<a> | Crea un enlace a otras páginas web, archivos, direcciones de correo electrónico, ubicaciones en la misma página o cualquier otra URL. | href target |
<altGlyph> | Controla los glifos usados para representar datos de caracteres específicos. Obsoleto en SVG 2. | x y dx dy rotate glyphRef format href |
<altGlyphDef> | Especifica un conjunto de sustitución para glifos. Obsoleto en SVG 2. | id |
<altGlyphItem> | Especifica un conjunto candidato para sustituciones de glifos. Obsoleto en SVG 2. | id |
<animate> | Especifica cómo cambia el atributo de un elemento con el tiempo. | attributeName="the name of the target attribute" by="a relative offset value" from="the starting value" to="the ending value" dur="the duration" repeatCount="the number of times the animation will take place" |
<animateMotion> | Hace que un elemento referenciado se mueva a lo largo de una trayectoria de movimiento. | calcMode="interpolation mode for the animation. Can be 'discrete', 'linear', 'paced', 'spline'" path="motion path" keyPoints="how far the object will move along the motion path for each keyTimes values" rotate="rotation transformation" href = URI reference to the <path> element specifying the motion path |
<animateTransform> | Anima un atributo de transformación en el elemento de destino, permitiendo que las animaciones controlen la traslación, rotación, escala y/o sesgado. | by="relative offset value" from="starting value" to="ending value" type="transformation type which is to have its values change in time. Can be 'translate', 'scale', 'rotate', 'skewX', 'skewY'" |
<circle> | Especifica un círculo. | cx="x-axis center of the circle" cy="y-axis center of the circle" r="radius of the circle". Required. presentation attributes: Color, FillStroke, Graphics |
<clipPath> | Especifica una ruta de recorte. | clipPathUnits="'userSpaceOnUse' or 'objectBoundingBox'. default: 'userSpaceOnUse' |
<color-profile> | Especifica una descripción del perfil de color usado para la imagen. | local="unique ID for a color profile stored locally" name="" rendering-intent="auto|perceptual|relative-colorimetric|saturation|absolute-colorimetric" href = URI of an ICC profile resource |
<cursor> | Especifica un cursor personalizado independiente de la plataforma. Obsoleto en SVG 2. | x="x-axis top-left corner of the cursor (default is 0)" y="y-axis top-left corner of the cursor (default is 0)" href = URI of the image to use as the cursor |
<defs> | Almacena objetos gráficos que se usarán más adelante. | |
<desc> | Proporciona una descripción solo de texto para cualquier elemento gráfico o contenedor SVG. | |
<ellipse> | Especifica una elipse. | cx="x-axis center of the ellipse" cy="y-axis center of the ellipse" rx="length of the ellipse's radius along the x-axis". Required. ry="length of the ellipse's radius along the y-axis". Required. presentation attributes: Color, FillStroke, Graphics |
<feBlend> | Mezcla dos objetos entre sí. | mode="image blending modes normal|multiply|screen|darken|lighten" in="identifies input for the given filter primitive: SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>" in2="the second input image to the blending operation" |
<feColorMatrix> | Primitiva de filtro SVG. | in type="matrix|saturate|hueRotate|luminanceToAlpha" values result |
<feComposite> | Primitiva de filtro SVG. | in="identifies the first input image" in2="identifies the second input image" operator="over|in|out|atop|xor|arithmetic" k1="arithmetic coefficient" k2="arithmetic coefficient" k3="arithmetic coefficient" k4="arithmetic coefficient" result |
<feConvolveMatrix> | Primitiva de filtro SVG. | in="identifies the input image" order="number of columns and rows in the kernel matrix" kernelMatrix="list of kernel values" divisor="divisor for the kernel values" bias="bias value" targetX="x position of the convolution matrix" targetY="y position of the convolution matrix" edgeMode="duplicate|wrap|none" kernelUnitLength="length of the kernel" preserveAlpha="true|false" result |
<feDiffuseLighting> | Primitiva de filtro SVG. | in="identifies the input image" surfaceScale="surface scale factor" diffuseConstant="diffuse reflection constant" kernelUnitLength="length of the kernel" result |
<feDisplacementMap> | Primitiva de filtro SVG. | in="identifies the first input image" in2="identifies the second input image" scale="scale factor" xChannelSelector="R|G|B|A" yChannelSelector="R|G|B|A" result |
<feDistantLight> | Primitiva de filtro SVG. | azimuth="azimuth angle" elevation="elevation angle" |
<feFlood> | Primitiva de filtro SVG. | flood-color="flood color" flood-opacity="flood opacity" result |
<feFuncA> | Filtro SVG. Subelemento de feComponentTransfer. | |
<feFuncB> | Filtro SVG. Subelemento de feComponentTransfer. | |
<feFuncG> | Filtro SVG. Subelemento de feComponentTransfer. | |
<feFuncR> | Filtro SVG. Subelemento de feComponentTransfer. | |
<feGaussianBlur> | Filtro SVG. Crea un desenfoque gaussiano en la imagen. | in="identifies the input image" stdDeviation="standard deviation for the blur" edgeMode="duplicate|wrap|none" result |
<feImage> | Filtro SVG. | href = URI reference to the image preserveAspectRatio="'none' or any of the 9 combinations of 'xVALYVAL'" result |
<feMerge> | Filtro SVG. Crea capas de imagen. | result |
<feMergeNode> | Filtro SVG. Subelemento de feMerge. | in="identifies the input image" |
<feMorphology> | Filtro SVG. Realiza un "adelgazamiento" o "engrosamiento". | in="identifies the input image" operator="erode|dilate" radius="radius of the effect" result |
<feOffset> | Filtro SVG. Desplaza la imagen de entrada. | in="identifies the input image" dx="horizontal offset" dy="vertical offset" result |
<fePointLight> | Filtro SVG. | x="x position of the light source" y="y position of the light source" z="z position of the light source" |
<feSpecularLighting> | Filtro SVG. | in="identifies the input image" surfaceScale="surface scale factor" specularConstant="specular reflection constant" specularExponent="specular exponent" kernelUnitLength="length of the kernel" result |
<feSpotLight> | Filtro SVG. | x="x position of the light source" y="y position of the light source" z="z position of the light source" pointsAtX="x coordinate of the point at which the light points" pointsAtY="y coordinate of the point at which the light points" pointsAtZ="z coordinate of the point at which the light points" specularExponent="specular exponent" limitingConeAngle="limiting cone angle" |
<feTile> | Filtro SVG. | in="identifies the input image" result |
<feTurbulence> | Filtro SVG. | baseFrequency="base frequency" numOctaves="number of octaves" seed="seed value" stitchTiles="stitch|noStitch" type="fractalNoise|turbulence" result |
<filter> | Especifica un efecto de filtro personalizado. | |
<font> | Especifica una fuente. Obsoleto en SVG 2. | |
<font-face> | Describe las características de una fuente. Obsoleto en SVG 2. | |
<font-face-format> | Especifica el tipo de fuente referenciado por su <font-face-uri> padre. | |
<font-face-name> | Hace referencia a una fuente local por nombre. | |
<font-face-src> | Corresponde al descriptor src dentro de las reglas CSS @font-face. | |
<font-face-uri> | Especifica una definición remota de la fuente actual. | |
<foreignObject> | Permite a los agentes de usuario ofrecer funciones de renderizado gráfico además de las definidas dentro de la especificación. | |
<g> | Agrupa elementos. | id="name of the group" fill="fill color for the group" opacity="opacity for the group" presentation attributes: All |
<glyph> | Especifica los gráficos para un glifo concreto. Obsoleto en SVG 2. | |
<glyphRef> | Especifica un posible glifo a usar. Obsoleto en SVG 2. | |
<hkern> | Especifica pares de kerning y valores de ajuste en el valor de avance horizontal. Obsoleto en SVG 2. | |
<image> | Especifica una imagen. | x="x-axis top-left corner of the image" y="y-axis top-left corner of the image" width="width of the image". Required. height="height of the image". Required. href = path to the image. Required. presentation attributes: Color, Graphics, Images, Viewports |
<line> | Especifica una línea. | x1="x start point of the line" y1="y start point of the line" x2="x end point of the line" y2="y end point of the line" presentation attributes: Color, FillStroke, Graphics, Markers |
<linearGradient> | Especifica un degradado lineal que rellena el objeto usando un vector. | id="a unique id used to reference this pattern. Required to reference it" gradientUnits="'userSpaceOnUse' or 'objectBoundingBox'. (Default 'objectBoundingBox')" gradientTransform="the transformation to apply to the gradient" x1="x start point of the gradient vector (number or % - 0% is default)" y1="y start point of the gradient vector. (0% default)" x2="x end point of the gradient vector. (100% default)" y2="y end point of the gradient vector. (0% default)" spreadMethod="'pad' or 'reflect' or 'repeat'" href = reference to another gradient attribute values of which are used as defaults and stops included. Recursive |
<marker> | Especifica el gráfico que se usará para dibujar puntas de flecha. Estos elementos pueden usar los siguientes atributos de marcador: "marker-start", "marker-mid" y "marker-end". Define el marcador antes de referenciarlo mediante su URI. | markerUnits="'strokeWidth' or 'userSpaceOnUse'. If 'strokeWidth' is used, one unit is equal to one stroke width. Otherwise, the marker will not scale and will use the same view units as the referencing element (default 'strokeWidth')" refx="the position where the marker connects with the vertex (default 0)" refy="the position where the marker connects with the vertex (default 0)" orient="'auto' or an angle to always display the marker at. 'auto' will compute an angle making the x-axis a tangent of the vertex (default 'auto')" markerWidth="width of the marker (default 3)" markerHeight="height of the marker (default 3)" viewBox="SVG viewport’s bound for the current SVG fragment. 4 values are separated by white space or commas. (min x, min y, width, height)" presentation attributes: All |
<mask> | Especifica una máscara alfa, que es una combinación de valores de opacidad y recorte. El enmascaramiento es una combinación de valores de opacidad y recorte. Puedes usar texto, formas o rutas para definir las secciones de la máscara. El estado predeterminado de la máscara es totalmente transparente. Los gráficos de una máscara determinan cuán opacas son sus partes. | maskUnits="'userSpaceOnUse' or 'objectBoundingBox'. Specifies the coordinate system for x, y, height, and width on the <mask>. (default: 'objectBoundingBox')" maskContentUnits="Specifies the coordinate system for the content of <mask>. 'userSpaceOnUse' or 'objectBoundingBox' (default: 'userSpaceOnUse')" x="clipping plane of the mask (default: -10%)" y="clipping plane of the mask (default: -10%)" width="clipping plane of the mask (default: 120%)" height="clipping plane of the mask (default: 120%)" |
<metadata> | Especifica metadatos. | |
<missing-glyph> | Especifica el glifo usado cuando no se puede mostrar un carácter. | |
<mpath> | Hace referencia a un elemento <path> externo como definición de una trayectoria de movimiento. | |
<path> | Especifica una ruta. | d="a set of commands specifying the path" pathLength="the total length for the path" transform="a list of transformations" presentation attributes: Color, FillStroke, Graphics, Markers |
<pattern> | Especifica un objeto gráfico que puede redibujarse en intervalos de coordenadas repetidos. | id="unique id used for referencing this pattern." Required. patternUnits="'userSpaceOnUse' or 'objectBoundingBox'. The second value makes units of x, y, height, width a fraction (or %) of the object bounding box that uses the pattern." patternContentUnits="'userSpaceOnUse' or 'objectBoundingBox'" patternTransform="the whole pattern can be transformed" x="pattern's offset from the top-left corner (default 0)" y="pattern's offset from the top-left corner. (default 0)" width="width of the pattern tile (default 100%)" height="height of the pattern tile (default 100%)" viewBox="the points "seen" in this SVG drawing area. 4 values are separated by white space or commas. (min x, min y, width, height)" href = reference to another pattern attribute values of which are used as defaults and any children are inherited. Recursive |
<polygon> | Especifica un gráfico que contiene al menos tres puntos. | points="the points of the polygon. At least three points are required." fill-rule="part of the FillStroke presentation attributes" presentation attributes: Color, FillStroke, Graphics, Markers |
<polyline> | Especifica cualquier forma compuesta solo por líneas rectas. | points="the points on the polyline". Required. presentation attributes: Color, FillStroke, Graphics, Markers |
<radialGradient> | Especifica un degradado radial. | gradientUnits="'userSpaceOnUse' or 'objectBoundingBox'. (Default 'objectBoundingBox')" gradientTransform="transformation to apply to the gradient" cx="center point of the gradient (number or % - 50% is default)" cy="center point of the gradient. (50% default)" r="radius of the gradient. (50% default)" fx="focus point of the gradient. (0% default)" fy="focus point of the gradient. (0% default)" spreadMethod="'pad' or 'reflect' or 'repeat'" href = Reference to another gradient attribute values of which are used as defaults and stops included. Recursive |
<rect> | Especifica un rectángulo. | x="x-axis top-left corner of the rectangle" y="y-axis top-left corner of the rectangle" rx="x-axis radius (to round the element)" ry="y-axis radius (to round the element)" width="width of the rectangle". Required. height="height of the rectangle" Required. presentation attributes: Color, FillStroke, Graphics |
<script> | Añade scripts a un documento SVG. | |
<set> | Establece el valor de un atributo durante una duración especificada. | |
<stop> | Especifica un color y su posición para usar en un degradado. | offset="offset for this stop (0 to 1/0% to 100%)". Required. stop-color="color of this stop" stop-opacity="opacity of this stop (0 to 1)" |
<style> | Permite incrustar hojas de estilo dentro de un contenido SVG. | |
<svg> | Crea un fragmento de un documento SVG. | x="top left corner when embedded (default 0)" y="top left corner when embedded (default 0)" width="width of the svg fragment (default 100%)" height="height of the svg fragment (default 100%)" viewBox="the points "seen" in this SVG drawing area. 4 values are separated by white space or commas. (min x, min y, width, height)" preserveAspectRatio="'none' or any of the 9 combinations of 'xVALYVAL' where VAL is 'min', 'mid' or 'max'. (default xMidYMid)" zoomAndPan="'magnify' or 'disable'. (default magnify)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" presentation attributes: All |
<switch> | Permite mostrar diferentes formas según el uso del idioma por parte del visor SVG. | |
<symbol> | Especifica los símbolos reutilizables. | |
<text> | Especifica un texto. | x="a list of x-axis positions. The nth x-axis position is given to the nth character in the text. When there are additional characters after the positions run out they are placed after the last character. 0 is default" y="a list of y-axis positions. (see x). 0 is default" dx="a list of lengths that moves the characters relative to the absolute position of the last glyph drawn. (see x)" dy="a list of lengths that moves the characters relative to the absolute position of the last glyph drawn. (see x)" rotate="a list of rotations. The nth rotation is performed on the nth character." textLength="a target length for the text that the SVG viewer will try to display the text between by adjusting the spacing and/or the glyphs. (default: The text's normal length)" lengthAdjust="tells the viewer what to adjust to accomplish rendering the text if the length is specified. The two values are 'spacing' and 'spacingAndGlyphs'" presentation attributes: Color, FillStroke, Graphics, FontSpecification, TextContentElements |
<textPath> | Hace referencia a un elemento <text> y posiciona el texto a lo largo de una ruta. | |
<title> | Descripción para elementos de contenedor SVG o elemento gráfico. | |
<tref> | Hace referencia a un elemento <text> en el documento SVG. Obsoleto en SVG 2. | href = URI reference to the referenced text content |
<tspan> | Especifica un subtexto dentro de otro elemento <tspan> o de un elemento <text>. | Identical to the <text> element and in addition: href = Reference to a <text> element |
<use> | Usa una URI para referenciar un <svg>, <g> u otro elemento gráfico con un atributo id único y duplicarlo. | x="x-axis top-left corner of the cloned element" y="y-axis top-left corner of the cloned element" width="width of the cloned element" height="height of the cloned element" href = URI reference to the cloned element presentation attributes: All |
<view> | Esta es una forma de ver la imagen. | |
<vkern> | Especifica pares de kerning para pares de glifos orientados verticalmente. Obsoleto en SVG 2. |
Practice
What are some of the features that can be included in SVGs while coding in HTML?