Referência SVG
Desenhos e imagens SVG são criados com diferentes elementos. Aqui você encontra uma tabela de elementos SVG com descrições e atributos correspondentes.
SVG (Scalable Vector Graphics) é uma linguagem de marcação baseada em XML para descrever gráficos bidimensionais que permanecem nítidos em qualquer tamanho. Cada forma, gradiente, filtro ou animação em um documento SVG é escrito com um elemento dedicado. Esta página é uma tabela de referência rápida de todos os elementos SVG padrão, agrupados por finalidade, com uma breve descrição e os atributos mais utilizados. Use-a como complemento aos capítulos práticos — comece com a introdução ao SVG e o SVG no HTML5 — e volte aqui quando precisar lembrar o que um elemento faz ou quais atributos ele aceita.
Na coluna Atributos, uma entrada como attr="…" descreve o valor que um atributo gravável espera, enquanto presentation attributes: … lista os grupos de atributos de apresentação estilizáveis com CSS que o elemento suporta. Elementos obsoletos são marcados e, quando existe uma alternativa moderna, apontam para ela.
Formas básicas
Primitivos geométricos usados para desenhar os gráficos visíveis de um SVG.
| Elemento | Descrição | Atributos |
|---|---|---|
<circle> | Desenha um círculo. Veja o capítulo SVG circle. | cx="centro do círculo no eixo x" cy="centro do círculo no eixo y" r="raio do círculo (obrigatório)" presentation attributes: Color, FillStroke, Graphics |
<ellipse> | Desenha uma elipse. Veja o capítulo SVG ellipse. | cx="centro da elipse no eixo x" cy="centro da elipse no eixo y" rx="raio ao longo do eixo x (obrigatório)" ry="raio ao longo do eixo y (obrigatório)" presentation attributes: Color, FillStroke, Graphics |
<line> | Desenha uma linha reta entre dois pontos. Veja o capítulo SVG line. | x1="ponto inicial x da linha" y1="ponto inicial y da linha" x2="ponto final x da linha" y2="ponto final y da linha" presentation attributes: Color, FillStroke, Graphics, Markers |
<path> | Desenha uma forma arbitrária a partir de uma série de comandos de caminho. Veja o capítulo SVG path. | d="conjunto de comandos que especificam o caminho" pathLength="comprimento total do caminho" transform="lista de transformações" presentation attributes: Color, FillStroke, Graphics, Markers |
<polygon> | Desenha uma forma fechada a partir de uma lista de pelo menos três pontos. Veja o capítulo SVG polygon. | points="pontos do polígono (pelo menos três são obrigatórios)" fill-rule="parte dos atributos de apresentação FillStroke" presentation attributes: Color, FillStroke, Graphics, Markers |
<polyline> | Desenha uma forma aberta composta de segmentos de linha reta conectados. Veja o capítulo SVG polyline. | points="pontos da polilinha (obrigatório)" presentation attributes: Color, FillStroke, Graphics, Markers |
<rect> | Desenha um retângulo, opcionalmente com cantos arredondados. Veja o capítulo SVG rectangle. | x="canto superior esquerdo do retângulo no eixo x" y="canto superior esquerdo do retângulo no eixo y" rx="raio do canto no eixo x (para arredondar o elemento)" ry="raio do canto no eixo y (para arredondar o elemento)" width="largura do retângulo (obrigatório)" height="altura do retângulo (obrigatório)" presentation attributes: Color, FillStroke, Graphics |
Texto
Elementos para renderizar e organizar texto dentro de um SVG. Veja o capítulo SVG text.
| Elemento | Descrição | Atributos |
|---|---|---|
<text> | Desenha um trecho de texto em uma determinada posição. | x="lista de posições no eixo x; a n-ésima posição é atribuída ao n-ésimo caractere (padrão 0)" y="lista de posições no eixo y (ver x; padrão 0)" dx="comprimentos que movem os caracteres relativamente à posição absoluta do último glifo (ver x)" dy="comprimentos que movem os caracteres relativamente à posição absoluta do último glifo (ver x)" rotate="lista de rotações; a n-ésima rotação é aplicada ao n-ésimo caractere" textLength="comprimento alvo que o visualizador tenta ajustar o texto ajustando espaçamento e/ou glifos (padrão: comprimento normal do texto)" lengthAdjust="o que ajustar para caber em textLength: 'spacing' ou 'spacingAndGlyphs'" presentation attributes: Color, FillStroke, Graphics, FontSpecification, TextContentElements |
<textPath> | Dispõe o texto ao longo da forma de um elemento <path> referenciado. | href="referência URI ao caminho em que o texto é disposto" |
<tspan> | Marca um sub-trecho de texto dentro de um <text> ou <tspan> para estilizá-lo ou reposicioná-lo. | Idêntico ao elemento <text>, e adicionalmente: href="referência a um elemento <text>" |
Gradientes e padrões
Servidores de pintura que preenchem ou contornam formas com gradientes ou mosaicos repetidos. Veja os capítulos de gradientes lineares e gradientes radiais.
| Elemento | Descrição | Atributos |
|---|---|---|
<linearGradient> | Define um gradiente que faz transição de cores ao longo de um vetor reto. | id="id único usado para referenciar este gradiente (obrigatório para referenciá-lo)" gradientUnits="'userSpaceOnUse' ou 'objectBoundingBox' (padrão 'objectBoundingBox')" gradientTransform="transformação a aplicar ao gradiente" x1="início x do vetor do gradiente (número ou %; padrão 0%)" y1="início y do vetor do gradiente (padrão 0%)" x2="fim x do vetor do gradiente (padrão 100%)" y2="fim y do vetor do gradiente (padrão 0%)" spreadMethod="'pad', 'reflect' ou 'repeat'" href="referência a outro gradiente cujos atributos e paradas são herdados como padrões (recursivo)" |
<radialGradient> | Define um gradiente que faz transição de cores para fora a partir de um ponto central. | gradientUnits="'userSpaceOnUse' ou 'objectBoundingBox' (padrão 'objectBoundingBox')" gradientTransform="transformação a aplicar ao gradiente" cx="centro do gradiente (número ou %; padrão 50%)" cy="centro do gradiente (padrão 50%)" r="raio do gradiente (padrão 50%)" fx="ponto focal do gradiente (padrão 0%)" fy="ponto focal do gradiente (padrão 0%)" spreadMethod="'pad', 'reflect' ou 'repeat'" href="referência a outro gradiente cujos atributos e paradas são herdados como padrões (recursivo)" |
<stop> | Define uma cor e seu deslocamento dentro de um gradiente. | offset="deslocamento desta parada, 0 a 1 ou 0% a 100% (obrigatório)" stop-color="cor desta parada" stop-opacity="opacidade desta parada, 0 a 1" |
<pattern> | Define um mosaico gráfico que é repetido para preencher ou contornar uma forma. | id="id único usado para referenciar este padrão (obrigatório)" patternUnits="'userSpaceOnUse' ou 'objectBoundingBox'; o segundo valor torna x, y, largura, altura uma fração (ou %) da caixa delimitadora do objeto que usa o padrão" patternContentUnits="'userSpaceOnUse' ou 'objectBoundingBox'" patternTransform="transformação aplicada ao padrão inteiro" x="deslocamento do padrão a partir do canto superior esquerdo (padrão 0)" y="deslocamento do padrão a partir do canto superior esquerdo (padrão 0)" width="largura do mosaico do padrão (padrão 100%)" height="altura do mosaico do padrão (padrão 100%)" viewBox="região visível nesta área de desenho: min-x, min-y, largura, altura (separados por espaços ou vírgulas)" href="referência a outro padrão cujos atributos são herdados como padrões e cujos filhos são herdados (recursivo)" |
Filtros
Primitivos de filtro (a família fe*) e o contêiner <filter> que se combinam para produzir efeitos gráficos como desfoque, iluminação e alterações de cor. Veja os capítulos de introdução aos filtros SVG, efeitos de desfoque e sombras projetadas.
| Elemento | Descrição | Atributos |
|---|---|---|
<filter> | Contêiner que agrupa primitivos de filtro em um efeito de filtro reutilizável e nomeado. | |
<feBlend> | Combina duas imagens de entrada usando um modo de mesclagem. | mode="modo de mesclagem: normal|multiply|screen|darken|lighten" in="primeira entrada: SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>" in2="a segunda entrada para a mesclagem" result |
<feColorMatrix> | Aplica uma transformação matricial aos canais de cor e alfa da entrada. | in="identifica a imagem de entrada" type="matrix|saturate|hueRotate|luminanceToAlpha" values="os valores para o tipo escolhido" result |
<feComponentTransfer> | Remapeia cada canal de cor/alfa de forma independente usando seus filhos feFunc*. | in="identifica a imagem de entrada" result |
<feFuncA> | Define a função de transferência para o canal alfa de <feComponentTransfer>. | type="identity|table|discrete|linear|gamma" tableValues slope intercept amplitude exponent offset |
<feFuncR> | Define a função de transferência para o canal vermelho de <feComponentTransfer>. | type="identity|table|discrete|linear|gamma" tableValues slope intercept amplitude exponent offset |
<feFuncG> | Define a função de transferência para o canal verde de <feComponentTransfer>. | type="identity|table|discrete|linear|gamma" tableValues slope intercept amplitude exponent offset |
<feFuncB> | Define a função de transferência para o canal azul de <feComponentTransfer>. | type="identity|table|discrete|linear|gamma" tableValues slope intercept amplitude exponent offset |
<feComposite> | Combina duas entradas usando operadores de composição Porter-Duff ou aritmético. | in="identifica a primeira imagem de entrada" in2="identifica a segunda imagem 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 uma matriz de convolução (kernel) para efeitos como nitidez ou relevo. | in="identifica a imagem de entrada" order="número de colunas e linhas na matriz kernel" kernelMatrix="lista de valores do kernel" divisor="divisor para os valores do kernel" bias="valor de viés" targetX="posição x da matriz de convolução" targetY="posição y da matriz de convolução" edgeMode="duplicate|wrap|none" kernelUnitLength="comprimento do kernel" preserveAlpha="true|false" result |
<feDiffuseLighting> | Ilumina a imagem de entrada como uma superfície difusa (fosca) usando seu alfa como mapa de relevo. | in="identifica a imagem de entrada" surfaceScale="fator de escala de superfície" diffuseConstant="constante de reflexão difusa" kernelUnitLength="comprimento do kernel" result |
<feDisplacementMap> | Desloca os pixels de uma entrada usando os canais de cor de outra. | in="identifica a primeira imagem de entrada" in2="identifica a segunda imagem de entrada" scale="fator de escala" xChannelSelector="R|G|B|A" yChannelSelector="R|G|B|A" result |
<feDistantLight> | Define uma fonte de luz distante (direcional) para um filtro de iluminação. | azimuth="ângulo de azimute" elevation="ângulo de elevação" |
<feFlood> | Preenche a região do filtro com uma única cor e opacidade. | flood-color="cor de preenchimento" flood-opacity="opacidade de preenchimento" result |
<feGaussianBlur> | Aplica um desfoque gaussiano à imagem de entrada. | in="identifica a imagem de entrada" stdDeviation="desvio padrão para o desfoque" edgeMode="duplicate|wrap|none" result |
<feImage> | Carrega uma imagem externa ou elemento referenciado como entrada de filtro. | href="referência URI à imagem" preserveAspectRatio="'none' ou qualquer uma das 9 combinações de 'xVALYVAL'" result |
<feMerge> | Empilha várias entradas em camadas, usando filhos <feMergeNode>. | result |
<feMergeNode> | Identifica uma camada de entrada para um <feMerge> pai. | in="identifica a imagem de entrada" |
<feMorphology> | Afina (erode) ou engrossa (dilata) a imagem de entrada. | in="identifica a imagem de entrada" operator="erode|dilate" radius="raio do efeito" result |
<feOffset> | Desloca a imagem de entrada por um determinado deslocamento (base das sombras projetadas). | in="identifica a imagem de entrada" dx="deslocamento horizontal" dy="deslocamento vertical" result |
<fePointLight> | Define uma fonte de luz pontual para um filtro de iluminação. | x="posição x da fonte de luz" y="posição y da fonte de luz" z="posição z da fonte de luz" |
<feSpecularLighting> | Ilumina a imagem de entrada como uma superfície especular (brilhante) usando seu alfa como mapa de relevo. | in="identifica a imagem de entrada" surfaceScale="fator de escala de superfície" specularConstant="constante de reflexão especular" specularExponent="expoente especular" kernelUnitLength="comprimento do kernel" result |
<feSpotLight> | Define uma fonte de luz de holofote para um filtro de iluminação. | x="posição x da fonte de luz" y="posição y da fonte de luz" z="posição z da fonte de luz" pointsAtX="coordenada x para onde a luz aponta" pointsAtY="coordenada y para onde a luz aponta" pointsAtZ="coordenada z para onde a luz aponta" specularExponent="expoente especular" limitingConeAngle="ângulo de cone limitante" |
<feTile> | Repete (em mosaico) uma entrada de filtro para preencher a região do filtro. | in="identifica a imagem de entrada" result |
<feTurbulence> | Gera turbulência de Perlin ou ruído fractal (para texturas como nuvens ou mármore). | baseFrequency="frequência base" numOctaves="número de oitavas" seed="valor de semente" stitchTiles="stitch|noStitch" type="fractalNoise|turbulence" result |
Animação
Elementos que alteram valores de atributos ao longo do tempo. São filhos do elemento que animam (ou referenciam-no).
| Elemento | Descrição | Atributos |
|---|---|---|
<animate> | Anima um único atributo ou propriedade de um elemento durante um intervalo de tempo. | attributeName="o nome do atributo alvo" by="um valor de deslocamento relativo" from="o valor inicial" to="o valor final" dur="a duração" repeatCount="o número de vezes que a animação é executada" |
<animateMotion> | Move um elemento ao longo de um caminho de movimento ao longo do tempo. | calcMode="modo de interpolação: 'discrete', 'linear', 'paced' ou 'spline'" path="o caminho de movimento" keyPoints="o quanto o objeto se move ao longo do caminho para cada valor de keyTimes" rotate="transformação de rotação" href="referência URI ao elemento <path> que especifica o caminho de movimento" |
<animateTransform> | Anima um atributo de transformação (translate, scale, rotate, skew) ao longo do tempo. | by="valor de deslocamento relativo" from="valor inicial" to="valor final" type="tipo de transformação a alterar ao longo do tempo: 'translate', 'scale', 'rotate', 'skewX' ou 'skewY'" |
<mpath> | Referencia um elemento <path> externo para usar como caminho de movimento para <animateMotion>. | href="referência URI ao elemento de caminho" |
<set> | Define um atributo para um valor por uma duração especificada (uma animação sem interpolação). | attributeName="o nome do atributo alvo" to="o valor a definir" begin="quando a alteração começa" dur="por quanto tempo o valor é mantido" |
Contêineres e estrutura
Elementos que agrupam, referenciam, definem ou organizam conteúdo em vez de desenhá-lo diretamente.
| Elemento | Descrição | Atributos |
|---|---|---|
<a> | Cria um link para uma página web, arquivo, endereço de e-mail, local ou qualquer outro URL. | href target |
<clipPath> | Define um caminho de recorte que limita a região de um elemento que é renderizada. | clipPathUnits="'userSpaceOnUse' ou 'objectBoundingBox' (padrão 'userSpaceOnUse')" |
<defs> | Armazena objetos gráficos para serem referenciados e reutilizados posteriormente (não renderizados diretamente). | |
<desc> | Fornece uma descrição somente em texto para um elemento gráfico ou contêiner SVG (para acessibilidade). | |
<foreignObject> | Incorpora conteúdo de outro namespace XML (como HTML) dentro de um SVG, permitindo que o navegador o renderize. | x y width height |
<g> | Agrupa elementos para que transformações e atributos de apresentação sejam aplicados a eles em conjunto. | id="nome do grupo" fill="cor de preenchimento do grupo" opacity="opacidade do grupo" presentation attributes: All |
<image> | Incorpora uma imagem raster ou SVG dentro do documento. | x="canto superior esquerdo da imagem no eixo x" y="canto superior esquerdo da imagem no eixo y" width="largura da imagem (obrigatório)" height="altura da imagem (obrigatório)" href="caminho para a imagem (obrigatório)" presentation attributes: Color, Graphics, Images, Viewports |
<marker> | Define um gráfico (como uma ponta de seta) desenhado nos vértices de uma linha, polilinha ou caminho via marker-start, marker-mid e marker-end. Defina o marcador antes de referenciá-lo. | markerUnits="'strokeWidth' ou 'userSpaceOnUse'; com 'strokeWidth' uma unidade equivale a uma largura de traço, caso contrário o marcador não é dimensionado (padrão 'strokeWidth')" refX="posição onde o marcador se conecta ao vértice (padrão 0)" refY="posição onde o marcador se conecta ao vértice (padrão 0)" orient="'auto' ou um ângulo; 'auto' torna o eixo x uma tangente do vértice (padrão 'auto')" markerWidth="largura do marcador (padrão 3)" markerHeight="altura do marcador (padrão 3)" viewBox="limites do viewport: min-x, min-y, largura, altura (separados por espaços ou vírgulas)" presentation attributes: All |
<mask> | Define uma máscara alfa combinando opacidade e recorte; texto, formas ou caminhos definem quais partes aparecem (o estado padrão é totalmente transparente). | maskUnits="sistema de coordenadas para x, y, largura, altura na máscara: 'userSpaceOnUse' ou 'objectBoundingBox' (padrão 'objectBoundingBox')" maskContentUnits="sistema de coordenadas para o conteúdo da máscara: 'userSpaceOnUse' ou 'objectBoundingBox' (padrão 'userSpaceOnUse')" x="plano de recorte da máscara (padrão -10%)" y="plano de recorte da máscara (padrão -10%)" width="plano de recorte da máscara (padrão 120%)" height="plano de recorte da máscara (padrão 120%)" |
<metadata> | Contém metadados legíveis por máquina (como RDF) sobre o documento; não é renderizado. | |
<script> | Incorpora ou referencia um script (tipicamente JavaScript) para interatividade. | href="URI de um script externo" type="tipo MIME da linguagem de script" |
<style> | Incorpora uma folha de estilos CSS dentro do documento SVG. | type="tipo MIME da folha de estilos (text/css)" media="consulta de mídia a que os estilos se aplicam" |
<svg> | O contêiner raiz (ou aninhado) que define um fragmento de documento SVG e seu sistema de coordenadas. | x="canto superior esquerdo quando incorporado (padrão 0)" y="canto superior esquerdo quando incorporado (padrão 0)" width="largura do fragmento (padrão 100%)" height="altura do fragmento (padrão 100%)" viewBox="região visível nesta área de desenho: min-x, min-y, largura, altura (separados por espaços ou vírgulas)" preserveAspectRatio="'none' ou qualquer uma das 9 combinações 'xVALYVAL' onde VAL é 'min', 'mid' ou 'max' (padrão xMidYMid)" xmlns="http://www.w3.org/2000/svg" presentation attributes: All |
<switch> | Renderiza apenas o primeiro filho cujos atributos de teste (como idioma ou suporte a funcionalidades) sejam avaliados como verdadeiros. | |
<symbol> | Define um modelo reutilizável que não é renderizado até ser instanciado por um elemento <use>. | |
<title> | Fornece um nome acessível curto (frequentemente exibido como dica de ferramenta) para seu elemento pai. | |
<use> | Clona e renderiza um elemento referenciado (como <svg>, <g> ou uma forma) pelo seu id. | x="canto superior esquerdo do elemento clonado no eixo x" y="canto superior esquerdo do elemento clonado no eixo y" width="largura do elemento clonado" height="altura do elemento clonado" href="referência URI ao elemento clonado" presentation attributes: All |
<view> | Define uma visão nomeada (um viewBox e proporção de aspecto) que pode ser acessada por um URL de fragmento. | viewBox preserveAspectRatio zoomAndPan="'magnify' ou 'disable' (padrão magnify)" |
Elementos obsoletos
Estes elementos estão obsoletos no SVG 2 e devem ser evitados em novos documentos. Quando existe uma alternativa moderna, ela é indicada na descrição.
| Elemento | Descrição | Atributos |
|---|---|---|
<altGlyph> | Controlava os glifos usados para renderizar dados de caracteres específicos. Obsoleto no SVG 2; sem substituição direta (use texto Unicode em <text>/<tspan>). | x y dx dy rotate glyphRef format href |
<altGlyphDef> | Definia um conjunto de substituição para glifos. Obsoleto no SVG 2; sem substituição. | id |
<altGlyphItem> | Definia um conjunto candidato para substituições de glifos. Obsoleto no SVG 2; sem substituição. | id |
<color-profile> | Descrevia um perfil de cor aplicado a uma imagem. Obsoleto no SVG 2; use a regra CSS @color-profile e a função color() em vez disso. | local="ID único para um perfil de cor armazenado localmente" name="nome do perfil" rendering-intent="auto|perceptual|relative-colorimetric|saturation|absolute-colorimetric" href="URI de um recurso de perfil ICC" |
<cursor> | Definia um cursor personalizado independente de plataforma. Obsoleto no SVG 2; use a propriedade CSS cursor em vez disso. | x="canto superior esquerdo do cursor no eixo x (padrão 0)" y="canto superior esquerdo do cursor no eixo y (padrão 0)" href="URI da imagem a usar como cursor" |
<font> | Definia uma fonte SVG. Obsoleto no SVG 2; use CSS @font-face com formatos de fonte web em vez disso. | |
<font-face> | Descrevia as características de uma fonte. Obsoleto no SVG 2; use a regra CSS @font-face em vez disso. | |
<font-face-format> | Especificava o tipo de fonte referenciado por seu <font-face-uri> pai. Obsoleto no SVG 2; use a dica format() do CSS @font-face em vez disso. | |
<font-face-name> | Referenciava uma fonte local pelo nome. Obsoleto no SVG 2; use a função local() do CSS @font-face em vez disso. | |
<font-face-src> | Espelhava o descritor src de regras CSS @font-face. Obsoleto no SVG 2; use o descritor src do CSS @font-face em vez disso. | |
<font-face-uri> | Referenciava uma definição remota da fonte atual. Obsoleto no SVG 2; use src: url() do CSS @font-face em vez disso. | |
<glyph> | Definia os gráficos de um glifo específico em uma fonte SVG. Obsoleto no SVG 2; sem substituição. | |
<glyphRef> | Referenciava um glifo para usar como alternativo. Obsoleto no SVG 2; sem substituição. | |
<hkern> | Definia pares de kerning horizontal e ajustes em uma fonte SVG. Obsoleto no SVG 2; use o kerning de fontes web em vez disso. | |
<missing-glyph> | Definia o glifo usado quando um caractere não pode ser exibido em uma fonte SVG. Obsoleto no SVG 2; sem substituição. | |
<tref> | Referenciava e renderizava o conteúdo de texto de outro elemento. Obsoleto no SVG 2; sem substituição. | href="referência URI ao conteúdo de texto referenciado" |
<vkern> | Definia pares de kerning vertical em uma fonte SVG. Obsoleto no SVG 2; use o kerning de fontes web em vez disso. |
Prática
Prática
Quais são alguns dos recursos que podem ser incluídos em SVGs ao codificar em HTML?
Was this page helpful?