Andr Azevedo

Designer & Codemonkey

SVG

Scalable Vector Graphics

Introduo
SVG

Introduo
O SVG (Scalable Vector Graphics) uma famlia de especificaes baseadas no formato XML que serve para descrever grficos vetoriais em duas dimenses, tanto estticos quanto dinmicos (interativos ou animados). A especificao SVG de padro aberto, e tem estado em constante desenvolvimento pela W3C (World Wide Web Consortium) desde 1999. Imagens SVG e seu comportamento so definidos em arquivos XML, isto significa que podem ser indexados, buscados, scriptados e se necessario, comprimidos. J que so arquivos XML, imagens SVG podem ser criadas e editadas com qualquer editor de texto, mas geralmente, mais conveniente utilizar programas de produo grfica vetorial, como o Inkscape, ou o Adobe Illustrator.

SVG

Introduo

Mdulos
De acordo com o W3C, e segundo a especificao atual de SVG, os mdulos atualmente em desenvolvimento so:
SVG (suporte bsico)
Mtodo de exibio de Grficos Vetoriais utilizando os elementos embed ou object.

SVG como tag img

Mtodo de exibio de imagens SVG em HTML utilizando o elemento img.

SVG em CSS
Mtodo de exibio de imagens SVG em backgrounds CSS.

SVG effects para HTML

Utilizao de transformaes SVG, filtros, etc em elementos HTML, utilizando ou CSS (no oficial) ou o elemento foreignObject.

SVG

Mdulos

Mdulos
SVG filters
Utilizao de efeitos estilo Photoshop em objetos SVG, inclusindo blurs e manipulao de cores.

SVG inline
Incluso de tags SVG diretamente em documentos HTML. Requer interpretador HTML5.

SVG animaes SMIL

Utilizao de elementos de animao para animar imagens SVG.

SVG fonts
Mtodo de utilizao de fontes definidas como shapes SVG.

SVG

Mdulos

Suporte
SVG

Suporte
Todos os principais navegadores web modernos tm pelo menos algum grau de suporte e renderizam SVG diretamente, incluindo Mozilla Firefox, o Internet Explorer 9, Google Chrome, Opera e Safari. No entanto, nenhuma das verses anteriores do Microsoft Internet Explorer (IE) suporta SVG nativamente.

SVG

Suporte

Browsers
Segundo fontes como Net Applications, Statcounter, W3Counter, Wikimedia e Clicky, a utilizao mdia dos browsers, at Agosto de 2011 era a seguinte:

Safari (7,7%) Chrome (20,2%)

Opera (2,9%) Internet Explorer (38,9%)

Firefox (25,5%)

SVG

Suporte

Browsers

Verses
Em outubro de 2011, as verses consideradas atuais, para os principais browsers, so:

Internet Explorer 9.0 Mozilla Firefox 7.0 Google Chrome 14.0

NW

Opera 11.5
N
NE

Safari 5.1

SE

SW

SVG

Suporte

Verses

Disponibilidade
NW

NE

SE

SVG (suporte bsico) SVG como tag img SVG em CSS SVG effects para HTML SVG filters SVG inline SVG animaes SMIL SVG fonts
Verso atual*
*outubro 2011

No Suportado

Parcial

Desconhecido

SVG

Suporte

Disponibilidade

SW

Total

Criao
Atualmente, diversos programas* de editorao vetorial suportam a exportao no formato SVG. Dentre eles, Adobe Illustrator (verses CS4 e superiores), Corel Draw! (verso 12 e superiores), e o freeware Inkscape. Dentre estes, o Illustrator e o Inkscape so cem por cento compatveis com a especificao publicada pela W3C, j os arquivos SVG exportados pelo Corel Draw! no seguem esta especificao, causando problemas. Alm destes, existem editores SVG online, feitos em HTML5 e/ou Flash, como:
http://svg-edit.googlecode.com/svn/branches/2.5.1/editor/svg-editor.html http://www.aviary.com/online/vector-editor http://scriptdraw.com/
* http://en.wikipedia.org/wiki/List_of_vector_graphics_editors

SVG

Suporte

Componentes
SVG

Componentes
svg

Descrio:
Um fragmento de um documento SVG consiste de qualquer nmero de elementos SVG, contidos em um elemento svg.

Atributos:
about, baseProfile, class, content, contentScriptType, datatype, externalResourcesRequired, focusHighlight, focusable, height, id, nav-down, nav-down-left, nav-down-right, nav-left, nav-next, nav-prev, nav-right, nav-up, nav-up-left, nav-up-right, playbackOrder, preserveAspectRatio, property, rel, resource, rev, role, snapshotTime, syncBehaviorDefault, syncToleranceDefault, timelineBegin, typeof, version, viewBox, width, xml:base, xml:id, xml:lang, xml:space, zoomAndPan.

Propriedades:
Todas.

Pode conter:
a, animate, animateColor, animateMotion, animateTransform, animation, audio, circle, defs, desc, discard, ellipse, font, font-face, foreignObject, g, handler, image, line, linearGradient, listener, metadata, path, polygon, polyline, prefetch, radialGradient, rect, script, set, solidColor, switch, text, textArea, title, use, video

SVG

Componentes

SVG

Componentes
a link).

Descrio:
Anlogo ao elemento HTML a, indica links (tambm conhecido como hyperlink ou web

Atributos:
about, class, content, datatype, externalResourcesRequired, focusHighlight, focusable, id, nav-down, nav-down-left, nav-down-right, nav-left, nav-next, nav-prev, nav-right, nav-up, nav-up-left, nav-up-right, property, rel, requiredExtensions, requiredFeatures, requiredFonts, requiredFormats, resource, rev, role, systemLanguage, target, transform, typeof, xlink:actuate, xlink:arcrole, xlink:href, xlink:role, xlink:show, xlink:title, xlink:type, xml:base, xml:id, xml:lang, xml:space

Propriedades:
Todas.

Pode conter:
animate, animateColor, animateMotion, animateTransform, animation, audio, circle, defs, desc, discard, ellipse, font, font-face, foreignObject, g, handler, image, line, linearGradient, listener, metadata, path, polygon, polyline, prefetch, radialGradient, rect, script, set, solidColor, switch, text, textArea, title, use, video

SVG

Componentes

Componentes
animateColor

Descrio:
O elemento animateColor especifica uma transio de cor durante um perodo de tempo.

Atributos:
about, accumulate, additive, attributeName, attributeType, begin, by, calcMode, class, content, datatype, dur, end, fill, from, id, keySplines, keyTimes, max, min, property, rel, repeatCount, repeatDur, requiredExtensions, requiredFeatures, requiredFonts, requiredFormats, resource, restart, rev, role, systemLanguage, to, typeof, values, xlink:actuate, xlink:arcrole, xlink:href, xlink:role, xlink:show, xlink:title, xlink:type, xml:base, xml:id, xml:lang, xml:space.

Propriedades:
Nenhuma.

Pode conter:
desc, handler, metadata, switch, title.

SVG

Componentes

animateColor

Componentes
animateMotion

Descrio:
O elemento animateMotion faz com que seu alvo mova-se seguindo um caminho.

Atributos:
about, accumulate, additive, begin, by, calcMode, class, content, datatype, dur, end, fill, from, id, keyPoints, keySplines, keyTimes, max, min, origin, path, property, rel, repeatCount, repeatDur, requiredExtensions, requiredFeatures, requiredFonts, requiredFormats, resource, restart, rev, role, rotate, systemLanguage, to, typeof, values, xlink:actuate, xlink:arcrole, xlink:href, xlink:role, xlink:show, xlink:title, xlink:type, xml:base, xml:id, xml:lang, xml:space.

Propriedades:
Nenhuma.

Pode conter:
desc, handler, metadata, switch, title.

SVG

Componentes

animateMotion

Componentes
animateTransform

Descrio:
O elemento animateTrasform anima um atributo de transformao de seu elemento alvo, permitindo assim controlar tamanho, posio relativa viewbox, rotao e deformao angular.

Atributos:
about, accumulate, additive, attributeName, attributeType, begin, by, calcMode, class, content, datatype, dur, end, fill, from, id, keySplines, keyTimes, max, min, property, rel, repeatCount, repeatDur, requiredExtensions, requiredFeatures, requiredFonts, requiredFormats, resource, restart, rev, role, systemLanguage, to, type, typeof, values, xlink:actuate, xlink:arcrole, xlink:href, xlink:role, xlink:show, xlink:title, xlink:type, xml:base, xml:id, xml:lang, xml:space.

Propriedades:
Nenhuma.

Pode conter:
desc, handler, metadata, switch, title.

SVG

Componentes

animateTransform

Componentes
animation

Descrio:
O elemento animation permite grficos vetoriais animados em sincronia.

Atributos:
about, begin, class, content, datatype, dur, end, externalResourcesRequired, fill, focusHighlight, focusable, height, id, initialVisibility, max, min, nav-down, nav-down-left, nav-down-right, nav-left, nav-next, nav-prev, nav-right, nav-up, nav-up-left, nav-up-right, preserveAspectRatio, property, rel, repeatCount, repeatDur, requiredExtensions, requiredFeatures, requiredFonts, requiredFormats, resource, restart, rev, role, syncBehavior, syncMaster, syncTolerance, systemLanguage, transform, typeof, width, x, xlink:actuate, xlink:arcrole, xlink:href, xlink:role, xlink:show, xlink:title, xlink:type, xml:base, xml:id, xml:lang, xml:space, y.

Propriedades:
audio-level, buffered-rendering, display, image-rendering, pointer-events, shape-rendering, text-rendering, viewport-fill, viewport-fill-opacity, visibility

Pode conter:
animate, animateColor, animateMotion, animateTransform, desc, discard, handler, metadata, set, switch, title

SVG

Componentes

animation

Componentes
audio

Descrio:
O elemento audio especifica um arquivo de som que deve ser includo para prover udio sincronizado.

Atributos:
about, begin, class, content, datatype, dur, end, externalResourcesRequired, fill, id, max, min, property, rel, repeatCount, repeatDur, requiredExtensions, requiredFeatures, requiredFonts, requiredFormats, resource, restart, rev, role, syncBehavior, syncMaster, syncTolerance, systemLanguage, type, typeof, xlink:actuate, xlink:arcrole, xlink:href, xlink:role, xlink:show, xlink:title, xlink:type, xml:base, xml:id, xml:lang, xml:space.

Propriedades:
audio-level, buffered-rendering, display, image-rendering, pointer-events, shape-rendering, text-rendering, viewport-fill, viewport-fill-opacity, visibility.

Pode conter:
animate, animateColor, animateMotion, animateTransform, desc, discard, handler, metadata, set, switch, title.

SVG

Componentes

Audio

Componentes
circle

Descrio:
O elemento circle define um crculo, baseado em um ponto central e seu raio.

Atributos:
about, class, content, cx, cy, datatype, focusHighlight, focusable, id, nav-down, nav-down-left, nav-down-right, nav-left, nav-next, nav-prev, nav-right, nav-up, nav-up-left, nav-up-right, property, r, rel, requiredExtensions, requiredFeatures, requiredFonts, requiredFormats, resource, rev, role, systemLanguage, transform, typeof, xml:base, xml:id, xml:lang, xml:space.

Propriedades:
Todas.

Pode conter:
animate, animateColor, animateMotion, animateTransform, desc, discard, handler, metadata, set, switch, title.

SVG

Componentes

Circle

Componentes
clipPath grfico.

Descrio:
O elemento clipPath define um elemento a ser utilizado como mscara ou continer

Atributos:
about, class, clip-path, content, cx, cy, datatype, focusHighlight, focusable, id, nav-down, nav-down-left, nav-down-right, nav-left, nav-next, nav-prev, nav-right, nav-up, nav-up-left, nav-up-right, property, r, rel, requiredExtensions, requiredFeatures, requiredFonts, requiredFormats, resource, rev, role, systemLanguage, transform, typeof, xml:base, xml:id, xml:lang, xml:space.

Propriedades:
Todas.

Pode conter:
animate, animateColor, animateMotion, animateTransform, circle, desc, ellipse, line, metadata, path, polygon, polyline, rect, set, text, title, use.

SVG

Componentes

clipPath

Componentes
circle

Descrio:
O elemento circle define um crculo, baseado em um ponto central e seu raio.

Atributos:
about, class, content, cx, cy, datatype, focusHighlight, focusable, id, nav-down, nav-down-left, nav-down-right, nav-left, nav-next, nav-prev, nav-right, nav-up, nav-up-left, nav-up-right, property, r, rel, requiredExtensions, requiredFeatures, requiredFonts, requiredFormats, resource, rev, role, systemLanguage, transform, typeof, xml:base, xml:id, xml:lang, xml:space.

Propriedades:
Todas.

Pode conter:
animate, animateColor, animateMotion, animateTransform, desc, discard, handler, metadata, set, switch, title.

SVG

Componentes

Circle

Componentes
cursor

Descrio:
O elemento circle define um crculo, baseado em um ponto central e seu raio.

Atributos:
id, externalResourcesRequired, requiredExtensions, requiredFeatures, systemLanguage, x, xml:base, xml:lang, xml:space, xlink:type, xlink:role, xlink:arcrole, xlink:href, xlink:title, xlink:show, xlink:actuate, y.

Propriedades:
Nenhuma.

Pode conter:
desc, metadata, title.

SVG

Componentes

Cursor

Componentes
defs

Descrio:
O elemento defs um continer para elementos que podem ser referenciados em outras partes do cdigo.

Atributos:
about, class, content, datatype, id, property, rel, resource, rev, role, typeof, xml:base, xml:id, xml:lang, xml:space.

Propriedades:
Todas.

Pode conter:
a, animate, animateColor, animateMotion, animateTransform, animation, audio, circle, defs, desc, discard, ellipse, font, font-face, foreignObject, g, handler, image, line, linearGradient, listener, metadata, path, polygon, polyline, prefetch, radialGradient, rect, script, set, solidColor, switch, text, textArea, title, use, video.

SVG

Componentes

Defs

Componentes
desc

Descrio:
Cada elemento continer, ou elemento grfico em um documento SVG pode conter um ou mais elementos descritivos title ou desc, os quais em conjunto formam um tipo de caberio e sumrio do elemento em que esto contidos.

Atributos:
about, class, content, datatype, id, property, rel, requiredExtensions, requiredFeatures, requiredFonts, requiredFormats, resource, rev, role, systemLanguage, typeof, xml:base, xml:id, xml:lang, xml:space.

Propriedades:
audio-level, buffered-rendering, display, image-rendering, pointer-events, shape-rendering, text-rendering, viewport-fill, viewport-fill-opacity, visibility.

Pode conter:
Texto.

SVG

Componentes

desc

Componentes
discard

Descrio:
O elemento discard permite que autores especifiquem o tempo de vida de um elemento, fazendo com que o elemento alvo seja descartado. Reduzindo assim os recursos utilizados por um agente visualizador de SVG.

Atributos:
about, begin, class, content, datatype, id, property, rel, requiredExtensions, requiredFeatures, requiredFonts, requiredFormats, resource, rev, role, systemLanguage, typeof, xlink:actuate, xlink:arcrole, xlink:href, xlink:role, xlink:show, xlink:title, xlink:type, xml:base, xml:id, xml:lang, xml:space.

Propriedades:
Nenhuma.

Pode conter:
desc, handler, metadata, switch, title.

SVG

Componentes

Discard

Componentes
ellipse

Descrio:
O elemento circle define uma elipse, baseada em um ponto central e seus dois raios.

Atributos:
about, class, content, cx, cy, datatype, focusHighlight, focusable, id, nav-down, nav-down-left, nav-down-right, nav-left, nav-next, nav-prev, nav-right, nav-up, nav-up-left, nav-up-right, property, rel, requiredExtensions, requiredFeatures, requiredFonts, requiredFormats, resource, rev, role, rx, ry, systemLanguage, transform, typeof, xml:base, xml:id, xml:lang, xml:space.

Propriedades:
Todas.

Pode conter:
animate, animateColor, animateMotion, animateTransform, desc, discard, handler, metadata, set, switch, title.

SVG

Componentes

Ellipse

Componentes
font

Descrio:
O elemento font define uma fonte SVG.

Atributos:
about, class, content, datatype, externalResourcesRequired, horiz-adv-x, horiz-origin-x, id, property, rel, resource, rev, role, typeof, xml:base, xml:id, xml:lang, xml:space.

Propriedades:
Nenhuma.

Pode conter:
desc, font-face, glyph, hkern, metadata, missing-glyph, switch, title.

SVG

Componentes

Font

Componentes
font-face

Descrio:
O elemento font-face uma estrutura XML que corresponde diretamente entidade @font-face da especificao CSS2.

Atributos:
about, accent-height, alphabetic, ascent, bbox, cap-height, class, content, datatype, descent, externalResourcesRequired, font-family, font-stretch, font-style, font-variant, font-weight, hanging, id, ideographic, mathematical, overline-position, overline-thickness, panose-1, property, rel, resource, rev, role, slope, stemh, stemv, strikethrough-position, strikethrough-thickness, typeof, underline-position, underline-thickness, unicode-range, units-per-em, widths, x-height, xml:base, xml:id, xml:lang, xml:space.

Propriedades:
Nenhuma.

Pode conter:
desc, font-face-src, metadata, switch, title.

SVG

Componentes

Font-face

Componentes
foreignObject

Descrio:
O elemento foreignObject um ponto de extensibilidade, quem permite agentes visualizadores, a possibilidade de oferecer caractersticas de renderizao grficas alm daquelas definidas nesta especificao.

Atributos:
about, class, content, datatype, externalResourcesRequired, focusHighlight, focusable, height, id, nav-down, nav-down-left, nav-down-right, nav-left, nav-next, nav-prev, nav-right, nav-up, nav-up-left, nav-up-right, property, rel, requiredExtensions, requiredFeatures, requiredFonts, requiredFormats, resource, rev, role, systemLanguage, transform, typeof, width, x, xlink:actuate, xlink:arcrole, xlink:href, xlink:role, xlink:show, xlink:title, xlink:type, xml:base, xml:id, xml:lang, xml:space, y.

Propriedades:
Todas.

Pode conter:
desc, metadata, svg, switch, title.

SVG

Componentes

ForegnObject

Componentes
g

Descrio:
O elemento g um elemento continer, para agrupar elementos grficos relacionados.

Atributos:
about, class, content, datatype, externalResourcesRequired, focusHighlight, focusable, id, nav-down, nav-down-left, nav-down-right, nav-left, nav-next, nav-prev, nav-right, nav-up, nav-up-left, nav-up-right, property, rel, requiredExtensions, requiredFeatures, requiredFonts, requiredFormats, resource, rev, role, systemLanguage, transform, typeof, xml:base, xml:id, xml:lang, xml:space.

Propriedades:
Todas.

Pode conter:
a, animate, animateColor, animateMotion, animateTransform, animation, audio, circle, defs, desc, discard, ellipse, font, font-face, foreignObject, g, handler, image, line, linearGradient, listener, metadata, path, polygon, polyline, prefetch, radialGradient, rect, script, set, solidColor, switch, text, textArea, title, use, video.

SVG

Componentes

Componentes
handler

Descrio:
O elemento handler similar ao elemento script: seu contedo, quer se encontre incluso inline ou referenciado, cdigo que deve ser interpretado por uma scripting engine utilizada pelo agente visualizador.

Atributos:
about, class, content, datatype, ev:event, externalResourcesRequired, id, property, rel, resource, rev, role, type, typeof, xlink:actuate, xlink:arcrole, xlink:href, xlink:role, xlink:show, xlink:title, xlink:type, xml:base, xml:id, xml:lang, xml:space.

Propriedades:
Nenhuma.

Pode conter:
Texto, desc, metadata, switch, title.

SVG

Componentes

Handler

Componentes
image

Descrio:
O elemento image indica que o contedo de uma imagem deve ser renderizado na rea indicada pelo sistema corrente de coordenadas presente no documento SVG.

Atributos:
about, class, content, datatype, externalResourcesRequired, focusHighlight, focusable, height, id, nav-down, nav-down-left, nav-down-right, nav-left, nav-next, nav-prev, nav-right, nav-up, nav-up-left, nav-up-right, preserveAspectRatio, property, rel, requiredExtensions, requiredFeatures, requiredFonts, requiredFormats, resource, rev, role, systemLanguage, transform, type, typeof, width, x, xlink:actuate, xlink:arcrole, xlink:href, xlink:role, xlink:show, xlink:title, xlink:type, xml:base, xml:id, xml:lang, xml:space, y.

Propriedades:
audio-level, buffered-rendering, display, image-rendering, pointer-events, shape-rendering, text-rendering, viewport-fill, viewport-fill-opacity, visibility, opacity.

Pode conter:
animate, animateColor, animateMotion, animateTransform, desc, discard, handler, metadata, set, switch, title.

SVG

Componentes

Image

Componentes
line

Descrio:
O elemento line define um segmento de linha que tem incio em um ponto e termina em outro ponto.

Atributos:
about, class, content, datatype, focusHighlight, focusable, id, nav-down, nav-down-left, nav-down-right, nav-left, nav-next, nav-prev, nav-right, nav-up, nav-up-left, nav-up-right, property, rel, requiredExtensions, requiredFeatures, requiredFonts, requiredFormats, resource, rev, role, systemLanguage, transform, typeof, x1, x2, xml:base, xml:id, xml:lang, xml:space, y1, y2.

Propriedades:
Todas.

Pode conter:
animate, animateColor, animateMotion, animateTransform, desc, discard, handler, metadata, set, switch, title .

SVG

Componentes

Line

Componentes
linearGradient

Descrio:
O elemento linearGradient define preenchimentos gradientes lineares.

Atributos:
about, class, content, datatype, gradientUnits, id, property, rel, resource, rev, role, typeof, x1, x2, xml:base, xml:id, xml:lang, xml:space, y1, y2.

Propriedades:
Todas.

Pode conter:
animate, animateColor, animateMotion, animateTransform, desc, discard, metadata, set, stop, switch, title .

SVG

Componentes

LinearGradient

Componentes
listener

Descrio:
O elemento listener utilizado para declarar event listeners, e registr-los com seus elementos relacionados na DOM.

Atributos:
about, class, content, datatype, defaultAction, event, handler, id, observer, phase, propagate, property, rel, resource, rev, role, target, typeof, xml:base, xml:id, xml:lang, xml:space.

Propriedades:
Nenhuma.

SVG

Componentes

Listener

Componentes
metadata

Descrio:
O elemento metadata define Metadata a ser includa no documento SVG.

Atributos:
about, class, content, datatype, id, property, rel, requiredExtensions, requiredFeatures, requiredFonts, requiredFormats, resource, rev, role, systemLanguage, typeof, xml:base, xml:id, xml:lang, xml:space.

Propriedades:
audio-level, buffered-rendering, display, image-rendering, pointer-events, shape-rendering, text-rendering, viewport-fill, viewport-fill-opacity, visibility.

Pode conter:
Texto.

SVG

Componentes

Metadata

Componentes
path

Descrio:
O elemento path define um caminho. Caminhos representam o permetro de um elemento, formado por linhas ou curvas, aberto ou fechado, que pode ser preenchido ou traado.

Atributos:
about, class, content, d, datatype, focusHighlight, focusable, id, nav-down, nav-down-left, nav-down-right, nav-left, nav-next, nav-prev, nav-right, nav-up, nav-up-left, nav-up-right, pathLength, property, rel, requiredExtensions, requiredFeatures, requiredFonts, requiredFormats, resource, rev, role, systemLanguage, transform, typeof, xml:base, xml:id, xml:lang, xml:space.

Propriedades:
Todas.

Pode conter:
animate, animateColor, animateMotion, animateTransform, desc, discard, handler, metadata, set, switch, title.

SVG

Componentes

path

Componentes
polygon

Descrio:
O elemento polygon define um polgono fechado, consistindo de uma srie de segmentos de linha retas conectadas entre si.

Atributos:
about, class, content, datatype, focusHighlight, focusable, id, nav-down, nav-down-left, nav-down-right, nav-left, nav-next, nav-prev, nav-right, nav-up, nav-up-left, nav-up-right, points, property, rel, requiredExtensions, requiredFeatures, requiredFonts, requiredFormats, resource, rev, role, systemLanguage, transform, typeof, xml:base, xml:id, xml:lang, xml:space.

Propriedades:
Todas.

Pode conter:
animate, animateColor, animateMotion, animateTransform, desc, discard, handler, metadata, set, switch, title.

SVG

Componentes

polygon

Componentes
polyline

Descrio:
O elemento polyline define um polgono aberto, consistindo de uma srie de segmentos de linha retas conectadas entre si.

Atributos:
about, class, content, datatype, focusHighlight, focusable, id, nav-down, nav-down-left, nav-down-right, nav-left, nav-next, nav-prev, nav-right, nav-up, nav-up-left, nav-up-right, points, property, rel, requiredExtensions, requiredFeatures, requiredFonts, requiredFormats, resource, rev, role, systemLanguage, transform, typeof, xml:base, xml:id, xml:lang, xml:space.

Propriedades:
Todas.

Pode conter:
animate, animateColor, animateMotion, animateTransform, desc, discard, handler, metadata, set, switch, title.

SVG

Componentes

polyline

Componentes
prefetch

Descrio:
O elemento prefetch indica uma dica, destinada ao agente visualizador, de que a mdia indicada vai ser utilizada no futuro e o autor do documento SVG necessita que parte, ou a totalidade, da mesma esteja disponvel previamente para que o documento SVG possa ser interpretado e visualizado mais eficientemente.

Atributos:
about, bandwidth, class, content, datatype, id, mediaCharacterEncoding, mediaContentEncodings, mediaSize, mediaTime, property, rel, resource, rev, role, typeof, xlink:actuate, xlink:arcrole, xlink:href, xlink:role, xlink:show, xlink:title, xlink:type, xml:base, xml:id, xml:lang, xml:space.

Propriedades:
Nenhuma.

Pode conter:
desc, metadata, switch, title.

SVG

Componentes

prefetch

Componentes
radialGradient

Descrio:
O elemento radialGradient define preenchimentos gradientes radiais.

Atributos:
about, class, content, cx, cy, datatype, gradientUnits, id, property, r, rel, resource, rev, role, typeof, xml:base, xml:id, xml:lang, xml:space.

Propriedades:
Todas.

Pode conter:
animate, animateColor, animateMotion, animateTransform, desc, discard, metadata, set, stop, switch, title.

SVG

Componentes

RadialGradient

Componentes
rect atual.

Descrio:
O elemento rect define um retngulo que est alinhado com o sistema de coordenadas

Atributos:
about, class, content, datatype, focusHighlight, focusable, height, id, nav-down, nav-down-left, nav-down-right, nav-left, nav-next, nav-prev, nav-right, nav-up, nav-up-left, nav-up-right, property, rel, requiredExtensions, requiredFeatures, requiredFonts, requiredFormats, resource, rev, role, rx, ry, systemLanguage, transform, typeof, width, x, xml:base, xml:id, xml:lang, xml:space, y.

Propriedades:
Todas.

Pode conter:
animate, animateColor, animateMotion, animateTransform, desc, discard, handler, metadata, set, switch, title.

SVG

Componentes

path

Componentes
script

Descrio:
Um elemento script pode tanto conter quanto indicar contedo executvel (ex., ECMAScript ou um arquivo Java JAR).

Atributos:
about, class, content, datatype, externalResourcesRequired, id, property, rel, resource, rev, role, type, typeof, xlink:actuate, xlink:arcrole, xlink:href, xlink:role, xlink:show, xlink:title, xlink:type, xml:base, xml:id, xml:lang, xml:space.

Propriedades:
Nenhuma.

Pode conter:
Texto, desc, metadata, switch, title.

SVG

Componentes

Script

Componentes
set

Descrio:
O elemento set prov um mtodo simples de definir um valor de um atributo por um perodo especfico.

Atributos:
about, attributeName, attributeType, begin, class, content, datatype, dur, end, fill, id, max, min, property, rel, repeatCount, repeatDur, requiredExtensions, requiredFeatures, requiredFonts, requiredFormats, resource, restart, rev, role, systemLanguage, to, typeof, xlink:actuate, xlink:arcrole, xlink:href, xlink:role, xlink:show, xlink:title, xlink:type, xml:base, xml:id, xml:lang, xml:space.

Propriedades:
Nenhuma.

Pode conter:
desc, handler, metadata, switch, title .

SVG

Componentes

Set

Componentes
solidColor

Descrio:
O elemento solidColor define uma cor e sua opacidade.

Atributos:
about, class, content, datatype, id, property, rel, resource, rev, role, typeof, xml:base, xml:id, xml:lang, xml:space.

Propriedades:
Todas.

Pode conter:
animate, animateColor, animateMotion, animateTransform, desc, discard, handler, metadata, set, switch, title

SVG

Componentes

SolidColor

Componentes
switch

Descrio:
O elemento switch um elemento continer, que pode ser utilizado, baseado em seus atributos condicionais, a selecionar um de seus elementos filhos.

Atributos:
about, class, content, datatype, externalResourcesRequired, focusHighlight, focusable, id, nav-down, nav-down-left, nav-down-right, nav-left, nav-next, nav-prev, nav-right, nav-up, nav-up-left, nav-up-right, property, rel, requiredExtensions, requiredFeatures, requiredFonts, requiredFormats, resource, rev, role, systemLanguage, transform, typeof, xml:base, xml:id, xml:lang, xml:space.

Propriedades:
Todas.

Pode conter:
a, animate, animateColor, animateMotion, animateTransform, animation, audio, circle, defs, desc, discard, ellipse, font, font-face, foreignObject, g, handler, image, line, linearGradient, listener, metadata, path, polygon, polyline, prefetch, radialGradient, rect, script, set, solidColor, switch, text, textArea, title, use, video.

SVG

Componentes

Switch

Componentes
text

Descrio:
O elemento text define um elemento grfico que consiste de texto.

Atributos:
about, class, content, datatype, editable, focusHighlight, focusable, id, nav-down, nav-down-left, nav-down-right, nav-left, nav-next, nav-prev, nav-right, nav-up, nav-up-left, nav-up-right, property, rel, requiredExtensions, requiredFeatures, requiredFonts, requiredFormats, resource, rev, role, rotate, systemLanguage, transform, typeof, x, xml:base, xml:id, xml:lang, xml:space, y.

Propriedades:
Todas.

Pode conter:
Texto, a, animate, animateColor, animateMotion, animateTransform, desc, discard, handler, metadata, set, switch, title, tspan.

SVG

Componentes

Text

Componentes
textArea

Descrio:
O elemento textArea oferece uma forma simples de envolver (incluindo quebra de linhas) um texto em uma rea definida.

Atributos:
about, class, content, datatype, editable, focusHighlight, focusable, height, id, nav-down, nav-down-left, nav-down-right, nav-left, nav-next, nav-prev, nav-right, nav-up, nav-up-left, nav-up-right, property, rel, requiredExtensions, requiredFeatures, requiredFonts, requiredFormats, resource, rev, role, systemLanguage, transform, typeof, width, x, xml:base, xml:id, xml:lang, xml:space, y.

Propriedades:
Todas.

Pode conter:
Texto, a, animate, animateColor, animateMotion, animateTransform, desc, discard, handler, metadata, set, switch, tbreak, title, tspan.

SVG

Componentes

TextArea

Componentes
title

Descrio:
Cada elemento continer, ou elemento grfico em um documento SVG pode conter um ou mais elementos descritivos title ou desc, os quais em conjunto formam um tipo de caberio e sumrio do elemento em que esto contidos.

Atributos:
about, class, content, datatype, id, property, rel, requiredExtensions, requiredFeatures, requiredFonts, requiredFormats, resource, rev, role, systemLanguage, typeof, xml:base, xml:id, xml:lang, xml:space.

Propriedades:
audio-level, buffered-rendering, display, image-rendering, pointer-events, shape-rendering, text-rendering, viewport-fill, viewport-fill-opacity, visibility.

Pode conter:
Texto.

SVG

Componentes

Title

Componentes
use

Descrio:
O elemento use referencia outro elemento e indica que o contedo grfico daquele elemento deve ser includo e exibido naquele ponto do documento SVG.

Atributos:
about, class, content, datatype, externalResourcesRequired, focusHighlight, focusable, id, nav-down, nav-down-left, nav-down-right, nav-left, nav-next, nav-prev, nav-right, nav-up, nav-up-left, nav-up-right, property, rel, requiredExtensions, requiredFeatures, requiredFonts, requiredFormats, resource, rev, role, systemLanguage, transform, typeof, x, xlink:actuate, xlink:arcrole, xlink:href, xlink:role, xlink:show, xlink:title, xlink:type, xml:base, xml:id, xml:lang, xml:space, y.

Propriedades:
Todas.

Pode conter:
animate, animateColor, animateMotion, animateTransform, desc, discard, handler, metadata, set, switch, title.

SVG

Componentes

USE

Componentes
video

Descrio:
O elemento video especifica um arquivo de vdeo que deve ser includo para prover vdeo sincronizado.

Atributos:
about, begin, class, content, datatype, dur, end, externalResourcesRequired, fill, focusHighlight, focusable, height, id, initialVisibility, max, min, nav-down, nav-down-left, nav-down-right, nav-left, nav-next, nav-prev, nav-right, nav-up, nav-up-left, nav-up-right, overlay, preserveAspectRatio, property, rel, repeatCount, repeatDur, requiredExtensions, requiredFeatures, requiredFonts, requiredFormats, resource, restart, rev, role, syncBehavior, syncMaster, syncTolerance, systemLanguage, transform, transformBehavior, type, typeof, width, x, xlink:actuate, xlink:arcrole, xlink:href, xlink:role, xlink:show, xlink:title, xlink:type, xml:base, xml:id, xml:lang, xml:space, y.

Propriedades:
audio-level, buffered-rendering, display, image-rendering, pointer-events, shape-rendering, text-rendering, viewport-fill, viewport-fill-opacity, visibility.

Pode conter:
animate, animateColor, animateMotion, animateTransform, desc, discard, handler, metadata, set, switch, title.

SVG

Componentes

Video

Utilizao
SVG

Exemplo 1
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <title>HTML5 Logo</title> <polygon ll="#E44D26" points="107.644,470.877 74.633,100.62 437.367,100.62 404.321,470.819 255.778,512 "/> <polygon ll="#F16529" points="256,480.523 376.03,447.246 404.27,130.894 256,130.894 "/> <polygon ll="#EBEBEB" points="256,268.217 195.91,268.217 191.76,221.716 256,221.716 256,176.305 255.843,176.305 142.132,176.305 143.219,188.488 154.38,313.627 256,313.627"/> <polygon ll="#EBEBEB" points="256,386.153 255.801,386.206 205.227,372.55 201.994,336.333 177.419,336.333 156.409,336.333 162.771,407.634 255.791,433.457 256,433.399"/> <path d="M108.382,0h23.077v22.8h21.11V0h23.078v69.044H152.57v-23.12h-21.11v23.12h-23.077V0z"/> <path d="M205.994,22.896h-20.316V0h63.72v22.896h-20.325v46.148h-23.078V22.896z"/> <path d="M259.511,0h24.063l14.802,24.26L313.163,0h24.072v69.044h22.982V34.822l-15.877,24.549h-0.397l-15.888-24.549v34.222h-22.58V0z"/> <path d="M348.72,0h23.084v46.222h32.453v22.822H348.72V0z"/> <polygon ll="#FFFFFF" points="255.843,268.217 255.843,313.627 311.761,313.627 306.49,372.521 255.843,386.191 255.843,433.435 348.937,407.634 349.62,399.962 360.291,280.411 361.399,268.217 349.162,268.217"/> <polygon ll="#FFFFFF" points="255.843,176.305 255.843,204.509 255.843,221.605 255.843,221.716 365.385,221.716 365.385,221.716 365.531,221.716 366.442,211.509 368.511,188.488 369.597,176.305"/> </svg>

SVG

Utilizao

Exemplo 1

Exemplo 2
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 195 82"> <title>SVG logo combined with the W3C logo, set horizontally</title> <desc>The logo combines three entities displayed horizontally: the W3C logo with the text 'W3C'; the drawing of a ower or star shape with eight arms; and the text 'SVG'. These three entities are set horizontally.</desc> <metadata> <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:rdfs="http://www.w3.org/2000/01/rdfschema#" xmlns:cc="http://creativecommons.org/ns#" xmlns:xhtml="http://www.w3.org/1999/xhtml/vocab#" xmlns:dc="http://purl.org/dc/elements/1.1/"> <cc:Work rdf:about=""> <dc:title>SVG logo combined with the W3C logo</dc:title> <dc:format>image/svg+xml</dc:format> <rdfs:seeAlso rdf:resource="http://www.w3.org/2007/10/sw-logos.html"/> <dc:date>2007-11-01</dc:date> <xhtml:license rdf:resource="http://www.w3.org/Consortium/Legal/2002/copyright-documents-20021231"/> <cc:morePermissions rdf:resource="http://www.w3.org/2007/10/sw-logos.html#LogoWithW3C"/> <cc:attributionURL rdf:reource="http://www.w3.org/2001/sw/"/> <dc:description>The logo combines three entities displayed horizontally: the W3C logo with the text 'W3C'; the drawing of a ower or star shape with eight arms; and the text 'SVG'. These three entities are set horizontally. </dc:description> </cc:Work> </rdf:RDF> </metadata> <text x="0" y="75" font-size="83" ll-opacity="0" font-family="Trebuchet" letter-spacing="-12">W3C</text> <text x="180" y="75" font-size="83" ll-opacity="0" font-family="Trebuchet" font-weight="bold">SVG</text> <defs> <g id="SVG" ll="#005A9C"> <path id="S" d="M 5.482,31.319 C2.163,28.001 0.109,23.419 0.109,18.358 C0.109,8.232 8.322,0.024 18.443,0.024 C28.569,0.024 36.782,8.232 36.782,18.358 L26.042,18.358 C26.042,14.164 22.638,10.765 18.443,10.765 C14.249,10.765 10.850,14.164 10.850,18.358 C10.850,20.453 11.701,22.351 13.070,23.721 L13.075,23.721 C14.450,25.101 15.595,25.500 18.443,25.952 L18.443,25.952 C23.509,26.479 28.091,28.006 31.409,31.324 L31.409,31.324 C34.728,34.643 36.782,39.225 36.782,44.286 C36.782,54.412 28.569,62.625 18.443,62.625 C8.322,62.625 0.109,54.412 0.109,44.286 L10.850,44.286 C10.850,48.480 14.249,51.884 18.443,51.884 C22.638,51.884 26.042,48.480 26.042,44.286 C26.042,42.191 25.191,40.298 23.821,38.923 L23.816,38.923 C22.441,37.548 20.468,37.074 18.443,36.697 L18.443,36.692 C13.533,35.939 8.800,34.638 5.482,31.319 L5.482,31.319 L5.482,31.319 Z"/> <path id="V" d="M 73.452,0.024 L60.482,62.625 L49.742,62.625 L36.782,0.024 L47.522,0.024 L55.122,36.687 L62.712,0.024 L73.452,0.024 Z"/> <path id="G" d="M 91.792,25.952 L110.126,25.952 L110.126,44.286 L110.131,44.286 C110.131,54.413 101.918,62.626 91.792,62.626 C81.665,62.626 73.458,54.413 73.458,44.286 L73.458,44.286 L73.458,18.359 L73.453,18.359 C73.453,8.233 81.665,0.025 91.792,0.025 C101.913,0.025 110.126,8.233 110.126,18.359 L99.385,18.359 C99.385,14.169 95.981,10.765 91.792,10.765 C87.597,10.765 84.198,14.169 84.198,18.359 L84.198,44.286 L84.198,44.286 C84.198,48.481 87.597,51.880 91.792,51.880 C95.981,51.880 99.380,48.481 99.385,44.291 L99.385,44.286 L99.385,36.698 L91.792,36.698 L91.792,25.952 L91.792,25.952 Z"/> </g> </defs> <g shape-rendering="geometricPrecision" text-rendering="geometricPrecision" imagerendering="optimizeQuality"> <g> <g id="logo" transform="scale(0.24) translate(0, 35)"> <g stroke-width="38.0086" stroke="#000"> <g id="svgstar" transform="translate(150, 150)"> <path id="svgbar" ll="#EDA921" d="M-84.1487,-15.8513 a22.4171,22.4171 0 1 0 0,31.7026 h168.2974 a22.4171,22.4171 0 1 0 0,-31.7026 Z"/> <use xlink:href="#svgbar" transform="rotate(45)"/> <use xlink:href="#svgbar" transform="rotate(90)"/> <use xlink:href="#svgbar" transform="rotate(135)"/> </g> </g> <use xlink:href="#svgstar"/> </g> <g id="SVG-label"> <use xlink:href="#SVG" transform="scale(1.08) translate(65,10)"/> </g> </g> </g> </svg>

SVG

Utilizao

Exemplo 2

Exemplo 3
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="400" height="150" viewBox="0 0 400 150" > <!-- Matthew Bystedt http://pike.port5.com 2004 --> <script type="text/ecmascript"> <![CDATA[ var lsx = 100; var lsy = 75; var rsx = 310; var rsy = 75; function mouseMove (evt) { var document = evt.target.ownerDocument; var rootElem = document.rootElement; var trans = rootElem.currentTranslate; var scale = rootElem.currentScale; var p = rootElem.createSVGPoint(); // Remove the current pan and zoom from the mouse coordinate p.x = ( evt.clientX - trans.x ) / scale; p.y = ( evt.clientY - trans.y ) / scale; var newY = (p.y - lsy) / 4 + lsy; var newX = (p.x - lsx) / 3 + lsx; if (newX > 170) { newX = 170; } document.getElementById("leftEye").setAttributeNS(null, "cx", newX); document.getElementById("leftEye").setAttributeNS(null, "cy", newY); newY = (p.y - rsy) / 4 + rsy; newX = (p.x - rsx) / 3 + rsx; if (newX < 230) { newX = 230; } document.getElementById("rightEye").setAttributeNS(null, "cx", newX); document.getElementById("rightEye").setAttributeNS(null, "cy", newY); window.status = p.x + " - " + p.y; } ]]></script> <!-- Pattern De nition --> <defs> <clipPath id="eyeLeftPath"> <ellipse cx="130" cy="75" rx="90" ry="40" transform="skewX(-20)" /> </clipPath> <clipPath id="eyeRightPath"> <ellipse cx="280" cy="75" rx="90" ry="40" transform="skewX(20)" /> </clipPath> <radialGradient id="eyeGradient"> <stop offset="0%" stop-color="black" /> <stop offset="30%" stop-color="black" /> <stop offset="33%" stop-color="aqua" /> <stop offset="40%" stop-color="blue" /> <stop offset="80%" stop-color="mediumblue" /> <stop offset="95%" stop-color="midnightblue" /> </radialGradient> </defs> <rect width="100%" height="100%" ll="lavender" onmousemove="mouseMove(evt);" /> <g clip-path="url(#eyeLeftPath)" onmousemove="mouseMove(evt);"> <rect x="0" y="0" width="100%" height="100%" ll="midnightblue" /> <circle id="leftEye" cx="100" cy="75" r="100" ll="url(#eyeGradient)" /> </g> <g clip-path="url(#eyeRightPath)" onmousemove="mouseMove(evt);"> <rect x="0" y="0" width="100%" height="100%" ll="midnightblue" /> <circle id="rightEye" cx="310" cy="75" r="100" ll="url(#eyeGradient)" /> </g> <text x="50%" y="95%" stroke="gray" ll="gray" font-size="15" text-anchor="middle">The eye is upon us!</text> </svg>

The eye is upon us!

SVG

Utilizao

Exemplo 3

Exemplo 4

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> < lter height="120" width="200" y="0" x="0" lterUnits="userSpaceOnUse" id="MyFilter"> <feGaussianBlur result="blur" stdDeviation="4" in="SourceAlpha"/> <feOffset result="offsetBlur" dy="4" dx="4" in="blur"/> </ lter> </defs> <rect ll="#cccccc" height="118" width="198" y="1" x="1"/> <g lter="url(#MyFilter)"> <path d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" stroke-width="10" stroke="#D90000" ll="none"/> <text y="76" x="52" font-family="Verdana" font-size="45" stroke="black" ll="#FFFFFF">SVG</text> </g> </svg>

SVG

Utilizao

Exemplo 4

Exemplo 5

Ver arquivo tiger.svg.

SVG

Utilizao

Exemplo 5

Andr Azevedo
5 Perodo de Design Grfico Faculdade Maurcio de Nassau Macei - AL

SVG

Scalable Vector Graphics