svg reference sheet
Post on 25-Oct-2014
88 Views
Preview:
TRANSCRIPT
SVGScalable Vector Graphics
André Azevedo
Designer & Codemonkey
IntroduçãoSVG
Introdução
O SVG (Scalable Vector Graphics) é uma família de especificações baseadas no formato XML que serve para descrever gráficos vetoriais em duas dimensões, tanto estáticos quanto dinâmicos (interativos ou animados). A especificação SVG é de padrão aberto, e tem estado em constante desenvolvimento pela W3C (World Wide Web Consortium) desde 1999.
Imagens SVG e seu comportamento são definidos em arquivos XML, isto significa que podem ser indexados, buscados, “scriptados” e se necessario, comprimidos. Já que são arquivos XML, imagens SVG podem ser criadas e editadas com qualquer editor de texto, mas geralmente, é mais conveniente utilizar programas de produção gráfica vetorial, como o Inkscape, ou o Adobe Illustrator.
SVG Introdução
Módulos
SVG Módulos
De acordo com o W3C, e segundo a especificação atual de SVG, os módulos atualmente em desenvolvimento são:
Método de exibição de Gráficos Vetoriais utilizando os elementos embed ou object.
Método de exibição de imagens SVG em HTML utilizando o elemento img.
› SVG (suporte básico)
› SVG como tag “img”
Método de exibição de imagens SVG em backgrounds CSS.› SVG em CSS
Utilização de transformações SVG, filtros, etc em elementos HTML, utilizando ou CSS (não oficial) ou o elemento foreignObject.
› SVG effects para HTML
Módulos
SVG Módulos
Utilização de efeitos estilo Photoshop em objetos SVG, inclusindo blurs e manipulação de cores.
Inclusão de tags SVG diretamente em documentos HTML. Requer interpretador HTML5.
› SVG filters
› SVG inline
Utilização de elementos de animação para animar imagens SVG.› SVG animações SMIL
Método de utilização de fontes definidas como shapes SVG.› SVG fonts
SuporteSVG
Suporte
SVG Suporte
Todos os principais navegadores web modernos têm 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 versões anteriores do Microsoft Internet Explorer (IE) suporta SVG nativamente.
Browsers
SVG Suporte Browsers
Segundo fontes como Net Applications, Statcounter, W3Counter, Wikimedia e Clicky, a utilização média dos browsers, até Agosto de 2011 era a seguinte:
Internet Explorer (38,9%)
Opera (2,9%)
Firefox (25,5%)
Chrome (20,2%)
Safari (7,7%)
Versões
SVG Suporte Versões
Em outubro de 2011, as versões consideradas atuais, para os principais browsers, são:
Internet Explorer 9.0
Mozilla Firefox 7.0N
W
SE
NW
SW
SE
NE
Safari 5.1
Google Chrome 14.0
Opera 11.5
Disponibilidade
SVG Suporte Disponibilidade
SVG (suporte básico)
SVG como tag “img”
SVG em CSS
SVG effects para HTML
SVG filters
SVG inline
SVG animações SMIL
SVG fonts
N
W
S
E
NW
SW
SE
NE
Não SuportadoVersão atual* Parcial Desconhecido Total
*outubro 2011
Criação
SVG Suporte
Atualmente, diversos programas* de editoração vetorial suportam a exportação no formato SVG. Dentre eles, Adobe Illustrator (versões CS4 e superiores), Corel Draw! (versão 12 e superiores), e o freeware Inkscape. Dentre estes, o Illustrator e o Inkscape são cem por cento compatíveis com a especificação publicada pela W3C, já os arquivos SVG exportados pelo Corel Draw! não seguem esta especificação, causando problemas.
Além 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
ComponentesSVG
Descrição:
Um fragmento de um documento SVG consiste de qualquer número 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
Componentes
SVG Componentes SVG
svg
Descrição:
Análogo ao elemento HTML ‘a’, indica links (também conhecido como hyperlink ou web link).
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
Componentes
SVG Componentes a
a
Descrição:
O elemento ‘animateColor’ especifica uma transição de cor durante um período 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.
Componentes
SVG Componentes animateColor
animateColor
Descrição:
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.
Componentes
SVG Componentes animateMotion
animateMotion
Descrição:
O elemento ‘animateTrasform’ anima um atributo de transformação de seu elemento alvo, permitindo assim controlar tamanho, posição relativa à viewbox, rotação e deformação 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.
Componentes
SVG Componentes animateTransform
animateTransform
Descrição:
O elemento ‘animation’ permite gráficos 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
Componentes
SVG Componentes animation
animation
Descrição:
O elemento ‘audio’ especifica um arquivo de som que deve ser incluído 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.
Componentes
SVG Componentes Audio
audio
Descrição:
O elemento ‘circle’ define um círculo, 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.
Componentes
SVG Componentes Circle
circle
Descrição:
O elemento ‘clipPath’ define um elemento a ser utilizado como “máscara” ou “contêiner gráfico”.
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.
Componentes
SVG Componentes clipPath
clipPath
Descrição:
O elemento ‘circle’ define um círculo, 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.
Componentes
SVG Componentes Circle
circle
Descrição:
O elemento ‘circle’ define um círculo, 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.
Componentes
SVG Componentes Cursor
cursor
Descrição:
O elemento ‘defs’ é um contêiner para elementos que podem ser referenciados em outras partes do código.
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.
Componentes
SVG Componentes Defs
defs
Descrição:
Cada elemento contêiner, ou elemento gráfico em um documento SVG pode conter um ou mais elementos descritivos ‘title’ ou ‘desc’, os quais em conjunto formam um tipo de ‘cabeçário’ e ‘sumário’ do elemento em que estão 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.
Componentes
SVG Componentes desc
desc
Descrição:
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.
Componentes
SVG Componentes Discard
discard
Descrição:
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.
Componentes
SVG Componentes Ellipse
ellipse
Descrição:
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.
Componentes
SVG Componentes Font
font
Descrição:
O elemento ‘font-face’ é uma estrutura XML que corresponde diretamente à entidade ‘@font-face’ da especificação 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.
Componentes
SVG Componentes Font-face
font-face
Descrição:
O elemento ‘foreignObject’ é um ponto de extensibilidade, quem permite à agentes visualizadores, a possibilidade de oferecer características de renderização gráficas além daquelas definidas nesta especificação.
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.
Componentes
SVG Componentes ForegnObject
foreignObject
Descrição:
O elemento ‘g’ é um elemento contêiner, para agrupar elementos gráficos 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.
Componentes
SVG Componentes G
g
Descrição:
O elemento ‘handler’ é similar ao elemento ‘script’: seu conteúdo, quer se encontre incluso inline ou referenciado, é código 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.
Componentes
SVG Componentes Handler
handler
Descrição:
O elemento ‘image’ indica que o conteúdo 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.
Componentes
SVG Componentes Image
image
Descrição:
O elemento ‘line’ define um segmento de linha que tem início 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 .
Componentes
SVG Componentes Line
line
Descrição:
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 .
Componentes
SVG Componentes LinearGradient
linearGradient
Descrição:
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.
Componentes
SVG Componentes Listener
listener
Descrição:
O elemento ‘metadata’ define Metadata a ser incluída 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.
Componentes
SVG Componentes Metadata
metadata
Descrição:
O elemento ‘path’ define um caminho. Caminhos representam o perímetro de um elemento, formado por linhas ou curvas, aberto ou fechado, que pode ser preenchido ou traçado.
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.
Componentes
SVG Componentes path
path
Descrição:
O elemento ‘polygon’ define um polígono fechado, consistindo de uma série 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.
Componentes
SVG Componentes polygon
polygon
Descrição:
O elemento ‘polyline’ define um polígono aberto, consistindo de uma série 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.
Componentes
SVG Componentes polyline
polyline
Descrição:
O elemento ‘prefetch’ indica uma dica, destinada ao agente visualizador, de que a mídia indicada vai ser utilizada no futuro e o autor do documento SVG necessita que parte, ou a totalidade, da mesma esteja disponível 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.
Componentes
SVG Componentes prefetch
prefetch
Descrição:
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.
Componentes
SVG Componentes RadialGradient
radialGradient
Descrição:
O elemento ‘rect’ define um retângulo que está alinhado com o sistema de coordenadas atual.
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.
Componentes
SVG Componentes path
rect
Descrição:
Um elemento ‘script’ pode tanto conter quanto indicar conteúdo executável (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.
Componentes
SVG Componentes Script
script
Descrição:
O elemento ‘set’ provê um método simples de definir um valor de um atributo por um período específico.
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 .
Componentes
SVG Componentes Set
set
Descrição:
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
Componentes
SVG Componentes SolidColor
solidColor
Descrição:
O elemento ‘switch’ é um elemento contêiner, 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.
Componentes
SVG Componentes Switch
switch
Descrição:
O elemento ‘text’ define um elemento gráfico 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.
Componentes
SVG Componentes Text
text
Descrição:
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.
Componentes
SVG Componentes TextArea
textArea
Descrição:
Cada elemento contêiner, ou elemento gráfico em um documento SVG pode conter um ou mais elementos descritivos ‘title’ ou ‘desc’, os quais em conjunto formam um tipo de ‘cabeçário’ e ‘sumário’ do elemento em que estão 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.
Componentes
SVG Componentes Title
title
Descrição:
O elemento ‘use’ referencia outro elemento e indica que o conteúdo gráfico daquele elemento deve ser incluído 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.
Componentes
SVG Componentes USE
use
Descrição:
O elemento ‘video’ especifica um arquivo de vídeo que deve ser incluído para prover vídeo 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.
Componentes
SVG Componentes Video
video
UtilizaçãoSVG
Exemplo 1
SVG Utilização 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.044h-22.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 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/rdf-schema#" 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" image-rendering="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>
Exemplo 2
SVG Utilização Exemplo 2
<?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>
Exemplo 3
SVG Utilização Exemplo 3
The eye is upon us!
Exemplo 4
SVG Utilização 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>
Exemplo 5
SVG Utilização Exemplo 5
Ver arquivo “tiger.svg”.
SVGScalable Vector Graphics
André Azevedo
5º Período de Design GráficoFaculdade Maurício de NassauMaceió - AL
top related