SVG Reference Sheet

59
SVG Scalable Vector Graphics André Azevedo Designer & Codemonkey

Transcript of SVG Reference Sheet

Page 1: SVG Reference Sheet

SVGScalable Vector Graphics

André Azevedo

Designer & Codemonkey

Page 2: SVG Reference Sheet

IntroduçãoSVG

Page 3: SVG Reference Sheet

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

Page 4: SVG Reference Sheet

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

Page 5: SVG Reference Sheet

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

Page 6: SVG Reference Sheet

SuporteSVG

Page 7: SVG Reference Sheet

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.

Page 8: SVG Reference Sheet

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%)

Page 9: SVG Reference Sheet

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

Page 10: SVG Reference Sheet

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

Page 11: SVG Reference Sheet

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

Page 12: SVG Reference Sheet

ComponentesSVG

Page 13: SVG Reference Sheet

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

Page 14: SVG Reference Sheet

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

Page 15: SVG Reference Sheet

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

Page 16: SVG Reference Sheet

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

Page 17: SVG Reference Sheet

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

Page 18: SVG Reference Sheet

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

Page 19: SVG Reference Sheet

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

Page 20: SVG Reference Sheet

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

Page 21: SVG Reference Sheet

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

Page 22: SVG Reference Sheet

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

Page 23: SVG Reference Sheet

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

Page 24: SVG Reference Sheet

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

Page 25: SVG Reference Sheet

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

Page 26: SVG Reference Sheet

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

Page 27: SVG Reference Sheet

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

Page 28: SVG Reference Sheet

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

Page 29: SVG Reference Sheet

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

Page 30: SVG Reference Sheet

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

Page 31: SVG Reference Sheet

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

Page 32: SVG Reference Sheet

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

Page 33: SVG Reference Sheet

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

Page 34: SVG Reference Sheet

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

Page 35: SVG Reference Sheet

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

Page 36: SVG Reference Sheet

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

Page 37: SVG Reference Sheet

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

Page 38: SVG Reference Sheet

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

Page 39: SVG Reference Sheet

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

Page 40: SVG Reference Sheet

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

Page 41: SVG Reference Sheet

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

Page 42: SVG Reference Sheet

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

Page 43: SVG Reference Sheet

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

Page 44: SVG Reference Sheet

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

Page 45: SVG Reference Sheet

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

Page 46: SVG Reference Sheet

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

Page 47: SVG Reference Sheet

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

Page 48: SVG Reference Sheet

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

Page 49: SVG Reference Sheet

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

Page 50: SVG Reference Sheet

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

Page 51: SVG Reference Sheet

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

Page 52: SVG Reference Sheet

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

Page 53: SVG Reference Sheet

UtilizaçãoSVG

Page 54: SVG Reference Sheet

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>

Page 55: SVG Reference Sheet

<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

Page 56: SVG Reference Sheet

<?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!

Page 57: SVG Reference Sheet

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>

Page 58: SVG Reference Sheet

Exemplo 5

SVG Utilização Exemplo 5

Ver arquivo “tiger.svg”.

Page 59: SVG Reference Sheet

SVGScalable Vector Graphics

André Azevedo

5º Período de Design GráficoFaculdade Maurício de NassauMaceió - AL