svg reference sheet

Download SVG Reference Sheet

Post on 25-Oct-2014

29 views

Category:

Documents

0 download

Embed Size (px)

TRANSCRIPT

Andr AzevedoDesigner & Codemonkey

SVG

Scalable Vector Graphics

IntroduoSVG

IntroduoO 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

MdulosDe 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 imgMtodo de exibio de imagens SVG em HTML utilizando o elemento img.

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

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

SVG

Mdulos

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

SVG inlineIncluso de tags SVG diretamente em documentos HTML. Requer interpretador HTML5.

SVG animaes SMILUtilizao de elementos de animao para animar imagens SVG.

SVG fontsMtodo de utilizao de fontes definidas como shapes SVG.

SVG

Mdulos

SuporteSVG

SuporteTodos 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

BrowsersSegundo 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

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

Internet Explorer 9.0 Mozilla Firefox 7.0 Google Chrome 14.0NW

Opera 11.5NNE

Safari 5.1

E

W

SE

S

SW

SVG

Suporte

Verses

DisponibilidadeNW

N

NE

E

W

SE

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

No Suportado

Parcial

Desconhecido

SVG

Suporte

Disponibilidade

S

SW

Total

CriaoAtualmente, 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

ComponentesSVG

Componentessvg

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

Componentesa 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

a

ComponentesanimateColor

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

ComponentesanimateMotion

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

ComponentesanimateTransform

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

Componentesanimation

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

Componentesaudio

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, xlin