Sumário. Introdução. Introdução. Introdução. Introdução. SVG Scalable Vector Graphics

Tamanho: px

Começar a partir da página:

Download "Sumário. Introdução. Introdução. Introdução. Introdução. SVG Scalable Vector Graphics"

Bruno Leão Gusmão
6 Há anos
Visualizações:

1 Sumário SVG Scalable Vector Graphics Tiago Telecken Estrutura Formas Básicas Imagens, Links Textos Efeitos Gradientes, Filtros Animações SVG + Scripts Implementações Referências SVG é a linguagem recomendada pela W3C para descrever gráficos 2D e animações em XML SVG 1.0: recomendação W3C (09/2001) SVG 1.1 (01/2003) SVG Mobile SVG Print SVG 1.2: em desenvolvimento Diferentemente de formatos como BMP que representa um gráfico descrevendo-o pixel a pixel, o SVG representa um gráfico através de um formato vetorial Abaixo um exemplo de um retângulo escrito em SVG <rect stroke="black" fill="red" y="62px" x="142px" width="118px height="89px"/> SVG permite três tipos de objetos gráficos: Formas gráficas vetoriais (consistindo de objetos geométricos tais como linhas e curvas) Imagens Texto Um gráfico SVG não está limitado a um único e fixo tamanho de pixel (escalabilidade) SVG permite, por exemplo, que uma área em particular de um gráfico seja aproximada (zoom) sem que haja uma degradação da imagem SVG é um vocabulário XML compatível com a recomendação XML 1.0 e a recomendação "Namespaces in XML" da W3C Pode ser usado em um mesmo arquivo com outros vocabulários XML tais como MathML, XHTML, SMIL, XLink, XPointer, XPath, XSLT e XSL, entre outros Pode utilizar tecnologias como DOM, SAX, CSS e Scripts

Estrutura Standalone <?xml version="1.0"?> <svg width="800" height="600" version="1.1"...... Estrutura Embarcado <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.

svg" width="500" height="500" type="image/svg+xml" /> </body> </html> Formas Básicas Formas Básicas <?xml version="1.0"?> <svg width="800" height="600 xmlns="http://www.w3.org/2000/svg" version="1.

2 Estrutura Standalone <?xml version="1.0"?> <svg width="800" height="600" version="1.1" Estrutura Embarcado <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html> <body> <object data="test.svg" width="500" height="500" type="image/svg+xml"> </object> <embed src="test2.svg" width="500" height="500" type="image/svg+xml" /> </body> </html> Formas Básicas Formas Básicas <?xml version="1.0"?> <svg width="800" height="600 xmlns=" version="1.1"> <rect x="73" y="65" width="102" height="67" fill="rgb(0,0,255)" stroke="rgb(0,0,0)" strokewidth="1"/> <circle cx="274" cy="104.5" r="30" fill="rgb(0,0,255)" stroke="rgb(0,0,0)" stroke-width="1"/> <ellipse cx="457" cy="136" rx="16" ry="52" fill="rgb(0,0,255)" stroke="rgb(0,0,0)" strokewidth="1"/> <line x1="175" y1="330" x2="341" y2="297" stroke="rgb(0,0,0)" stroke-width="1"/> <polygon points="220, , ,250" style="fill:#0000ff; stroke:#000000;strokewidth:1"/> <path d="m L L L L L L " fill="rgb(0,0,255)" stroke="rgb(0,0,0)" strokewidth="1"/> Imagens, Links Textos <?xml version="1.0"?> <svg width="200" height="200" version="1.1" xmlns=" xmlns:xlink=" <a xlink:href=" <image x="50" y="75" width="75" height="50" xlink:href="img.jpg"/> </a> Os textos adicionados em arquivos SVG podem: Ser copiados e manipulados como figuras. Editados como textos comuns podendo por tanto ser localizado por máquinas de busca ou manipulados por scripts. Especificado usando o elemento gráfico <text> Possui vários atributos: fonte, estilo, tamanho, cor...

Textos Textos <svg width="10cm" height="3cm" viewbox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg" version="1.

</text> </g> <rect x="1" y="1" width="998" height="298" fill="none" stroke="blue" stroke-width="2" /> <svg width="12cm" height="3.6cm" viewbox="0 0 1000 300" version="1.1" xmlns="http://www.w3.

3 Textos Textos <svg width="10cm" height="3cm" viewbox=" " xmlns=" version="1.1"> <g font-family="verdana" font-size="45" > <text x="120" y="150" fill="blue" > Usando <tspan dx="2em" dy="-50" font-weight="bold" fill="red" > elemento </tspan> <tspan dy="100"> tspan </tspan> </text> </g> <rect x="1" y="1" width="998" height="298" fill="none" stroke="blue" stroke-width="2" /> <svg width="12cm" height="3.6cm" viewbox=" " version="1.1" xmlns=" xmlns:xlink=" <path id="mypath" d="m C C C " /> <desc>texto simples em um caminho</desc> <use xlink:href="#mypath" fill="none" stroke="red" /> <text font-family="verdana" font-size="42.5" fill="blue" > <textpath xlink:href="#mypath"> Para cima, depois para baixo, para cima </textpath> </text> <rect x="1" y="1" width="998" height="298" fill="none" stroke="blue" stroke-width="2" /> Efeitos SVG possui funcionalidades para a criação de efeitos nos elementos gráficos: Gradientes Filtros Efeitos Gradientes Um gradiente é uma transição suave de uma cor para outra SVG fornece dois tipos de gradientes: Linear gradients (<lineargradient>) Radial gradients (<radialgradient>) Devem ser declarados dentro da tag, possuindo um id São referenciados nos elementos gráficos através das propriedades fill ou stroke Efeitos Gradientes Efeitos Gradientes <svg width="100%" height="100%" version="1.1" <lineargradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"/> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"/> </lineargradient> <ellipse cx="200" cy="190" rx="85" ry="55" style="fill:url(#orange_red)"/> <svg width="100%" height="100%" version="1.1" <radialgradient id="grey_blue" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(200,200,200);stop-opacity:0"/> <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1"/> </radialgradient> <ellipse cx="230" cy="200" rx="110" ry="100" style="fill:url(#grey_blue)"/>

Efeitos Filtros Efeitos Filtros Um efeito de filtro consiste de uma série de operações gráficas que são aplicadas em um gráfico de origem para produzir um gráfico resultante modificado Fonte: W3C SVG

fespecularlighting fetile feturbulence fedistantlight fepointlight fespotlight Devem ser declarados dentro da tag, possuindo um id São referenciados nos elementos gráficos através da propriedade

4 Efeitos Filtros Efeitos Filtros Um efeito de filtro consiste de uma série de operações gráficas que são aplicadas em um gráfico de origem para produzir um gráfico resultante modificado Fonte: W3C SVG possui os seguintes filtros: feblend fecolormatrix fecomponenttransfer fecomposite feconvolvematrix fediffuselighting fedisplacementmap feflood fegaussianblur feimage femerge femorphology feoffset fespecularlighting fetile feturbulence fedistantlight fepointlight fespotlight Devem ser declarados dentro da tag, possuindo um id São referenciados nos elementos gráficos através da propriedade filter Podem ser combinados Efeitos Filtros Efeitos <svg width="100%" height="100%" version="1.1" <filter id="gaussian_blur"> <fegaussianblur in="sourcegraphic" stddeviation="20"/> </filter> <ellipse cx="200" cy="150" rx="70" ry="40" style="fill:#ff0000;stroke:#000000; stroke-width:2;filter:url(#gaussian_blur)"/> Animações SVG inclui elementos de animação que habilitam animações temporais de gráficos SVG <animate> <set> <animatemotion> <animatecolor> <animatetransform> SVG + Scripts Utilização de scripts para aumentar a interatividade: ECMA/JavaScript

SVG Mobile PDAs, telefones celulares Segmento em grande crescimento Dispositivos não têm poder de um desktop 2 perfis definidos para SVG Mobile: SVG Basic: dispositivos mais poderosos Poucos filtros,

2 Inclusão de áudio e vídeo (multimídia) Mais controle sobre tempo Linha de tempo, avanço, retrocesso.

5 SVG Mobile PDAs, telefones celulares Segmento em grande crescimento Dispositivos não têm poder de um desktop 2 perfis definidos para SVG Mobile: SVG Basic: dispositivos mais poderosos Poucos filtros, sem elipses, subconjunto do CSS SVG Tiny: dispositivos mais limitados Sem CSS, sem texto sobre path, sem opacidade, filtros nem preenchimento com padrões Tiny < Basic < Full SVG 1.2 Inclusão de áudio e vídeo (multimídia) Mais controle sobre tempo Linha de tempo, avanço, retrocesso... Semântica de animação vinda do SMIL (<par>, <seq>) Mais operações com texto Maior possibilidade de efeitos e filtros Browsers: Arquivos SVG são interpretados pelos softwares Amaya (parcial) e Mozilla, entretanto através do plugin Adobe SVG Viewer os browsers Netscape 4.5 ou superior, Microsoft IE 4 ou superior e Opera 5.x ou superior podem interpretar arquivos SVG Visualizadores: São softwares que permitem a visualização de arquivos SVG: Adobe SVG Viewer, Batik SVG da Apache, X-Smiles XML Browser, Pocket SVG Viewer feito para o Pocket PC (Windows CE), TinyLine SVG (J2ME), IONIC SVG Renderer Editores que exportam SVG: São editores de outros formatos que podem converter seus gráficos do formato original para o formato SVG e vice-versa Adobe Illustrator CorelDraw Jviews Beez Sketch Sphincs SVG Conversores: Há conversores SVG de/para os formatos PDF, BMP, TIFF, PNG, JPEG, GIF, AutoCAD DXF, HPGL, VisionPostScript, EPS, WMF, EMF, MIF, CGM, MathML e outros formatos XML Square1 s: PS -> SVG SVG Factory: WMF/BMP -> SVG Vector Eye: GIF ou JPG -> SVG Batik: TTF -> SVG Os editores nativos: São ferramentas de edição que permitem visualizar e alterar arquivos SVG sem precisar convertê-los para outros formatos Amaya, Sodipodi, Inkscape Sodipodi Inkscape

6 SVG- Imolementações Referências Geradores SVG Server-side: Utilizados em servidores (Servidores Web por exemplo) para converter arquivos no momento em que são solicitados pelos usuários( "on the fly"). Existem conversores SVG para os mais diversos tipos de arquivos. Destacam-se os softwares: GraPL.NET(Uma aplicação.net) e AgileBlox (Um grupo de classes Java para aplicações com servelets e JSP). Especificação do padrão SVG 1.1 na W3C Tutorial W3C Tutorial w3schools Tutorial KevLinDev Demonstrações Referências Plugins e ferramentas Implementações - Plugin Adobe SVG Viewer - Editor SVG Inkscape - Editor SVG Sodipodi - Browser X-Smiles - Editor/Browser Amaya - Batik SVG Toolkit - TinyLine SVG (J2ME) -

Documentos relacionados

gradientes padrões máscaras e clipping efeitos e ﬁltros Helder da Rocha (helder@argonavis.com.br)

gradientes padrões máscaras e clipping efeitos e ﬁltros Helder da Rocha (helder@) Gradientes e Padrões Com SVG você pode pintar o interior (fill) ou o traço (stroke) de figuras e texto usando Cores opacas