{
"metadata": {
"name": ""
},
"nbformat": 3,
"nbformat_minor": 0,
"worksheets": [
{
"cells": [
{
"cell_type": "markdown",
"metadata": {},
"source": [
"[Python para Desenvolvedores](http://ricardoduarte.github.io/python-para-desenvolvedores/#conteudo)\n",
"===================================\n",
"2ª edi\u00e7\u00e3o, revisada e ampliada\n",
"-----------------------------------\n",
"\n",
"Cap\u00edtulo 36: SVG\n",
"=============================\n",
"_____________________________\n",
"[SVG](http://www.w3.org/Graphics/SVG/) (*Scalable Vector Graphics*) \u00e9 um formato aberto, baseado no XML, que descreve imagens vetoriais, na forma de estruturas compostas por instru\u00e7\u00f5es de alto n\u00edvel que representam primitivas geom\u00e9tricas. O formato foi proposto pelo W3C (*World Wide Web Consortium*), a entidade que define os padr\u00f5es vigentes na Internet, como o HTML e o pr\u00f3prio XML.\n",
"\n",
"\n",
"\n",
"Arquivos SVG podem armazenar v\u00e1rios tipos de informa\u00e7\u00f5es vetoriais, incluindo pol\u00edgonos b\u00e1sicos, que s\u00e3o representados por linhas que delimitam uma \u00e1rea fechada, tais como ret\u00e2ngulos, elipses e outras formas simples. Al\u00e9m disso, ele tamb\u00e9m suporta caminhos (*paths*), que s\u00e3o figuras, com preenchimento ou n\u00e3o, compostas por linhas e/ou curvas definidas por pontos, que s\u00e3o codificados atrav\u00e9s de comandos de um caractere (\u201cL\u201d significa \u201cLine To\u201d, por exemplo) e um par de coordenadas X e Y, o que gera um c\u00f3digo muito compacto.\n",
"\n",
"Texto *unicode* pode ser inclu\u00eddo em um arquivo SVG, com efeitos visuais, e a especifica\u00e7\u00e3o inclui tratamento de texto bidirecional, vertical e seguindo caminhos curvos. O texto pode ser formatadas com fontes de texto externas, mas para amenizar o problema do texto n\u00e3o ser apresentado corretamente em sistemas diferentes, existe uma fonte interna, que est\u00e1 sempre dispon\u00edvel.\n",
"\n",
"As figuras geom\u00e9tricas, caminhos e texto podem ser usados como contornos, internos ou externos, que pode usar tr\u00eas tipos de preenchimento:\n",
"\n",
"+ Cores s\u00f3lidas, que podem ser opacas ou com transpar\u00eancia.\n",
"+ Gradientes, que podem ser lineares ou radiais.\n",
"+ Padr\u00f5es, que s\u00e3o imagens bitmap ou vetoriais que se repetem ao longo do objeto.\n",
"\n",
"Tantos os gradientes quantos os padr\u00f5es podem ser animados.\n",
"\n",
"O SVG tamb\u00e9m permite que o autor inclua metadados com informa\u00e7\u00f5es a respeito da imagem, tais como t\u00edtulo, descri\u00e7\u00e3o e outros, com o objetivo de facilitar a cataloga\u00e7\u00e3o, indexa\u00e7\u00e3o e recupera\u00e7\u00e3o dos arquivos.\n",
"\n",
"Todos os componentes de um arquivo SVG pode ser lidos e alterados usando scripts da mesma forma que o HTML, tendo como padr\u00e3o a linguagem *ECMAScript*. A especifica\u00e7\u00e3o tamb\u00e9m prev\u00ea tratamento de eventos de mouse e teclado, o que, junto com *hyperlinks*, permite adicionar interatividade aos gr\u00e1ficos.\n",
"\n",
"O formato tamb\u00e9m suporta anima\u00e7\u00e3o atrav\u00e9s do ECMAScript, que pode transformar os elementos da imagem e temporizar o movimento. Isso tamb\u00e9m poder ser feito atrav\u00e9s de recursos pr\u00f3prios do SVG, usando *tags*.\n",
"\n",
"Para o SVG, filtros s\u00e3o conjuntos de opera\u00e7\u00f5es gr\u00e1ficas que s\u00e3o aplicadas a um determinado gr\u00e1fico vetorial, para produzir uma imagem matricial com o resultado. Tais opera\u00e7\u00f5es gr\u00e1ficas s\u00e3o chamadas primitivas de filtro, que geralmente realizam uma forma de processamento de imagem, como, por exemplo, o efeito *Gaussian Blur*, e por isso, geram um *bitmap* com transpar\u00eancia (padr\u00e3o RGBA) como sa\u00edda, que \u00e9 regerado se necess\u00e1rio. O resultado de uma primitiva pode ser usado como entrada para outra primitiva, permitindo a concatena\u00e7\u00e3o de v\u00e1rias para gerar o efeito desejado.\n",
"\n",
"SVGFig\n",
"------\n",
"Os arquivos SVG podem manipulados atrav\u00e9s de bibliotecas XML, como o ElementTree, mas \u00e9 mais produtivo usar componentes que j\u00e1 projetados com essa finalidade. O SVGFig \u00e9 um m\u00f3dulo para SVG com muitos recursos prontos. O m\u00f3dulo permite tanto usar as primitivas de desenho do SVG diretamente, como tamb\u00e9m rotinas pr\u00f3prias de alto n\u00edvel.\n",
"\n",
"Exemplo (usando primitivas do SVG):"
]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"# Importa SVGFig\n",
"from svgfig import *\n",
"\n",
"cores = ['#dddddd', '#306090', '#609030', '#906030']\n",
"\n",
"# Um ret\u00e2ngulo usando SVG\n",
"# x, y -> posi\u00e7\u00e3o do canto superior esquerdo\n",
"# width, height -> tamanho\n",
"# fill -> cor do preenchimento\n",
"# opacity -> opacidade (1.0 = 100%)\n",
"# stroke_width -> largura da linha (em pontos)\n",
"q1 = SVG('rect', x=0, y=0, width=100, height=100,\n",
" fill=cores[0], opacity='1.0', stroke_width='0.2pt')\n",
"\n",
"# Primeiro c\u00edrculo\n",
"# cx, cy -> posi\u00e7\u00e3o do centro\n",
"# r -> raio\n",
"c1 = SVG('circle', cx=35, cy=65, r=30,\n",
" fill=cores[1], opacity='0.5', stroke_width='0.2pt')\n",
"\n",
"# Segundo c\u00edrculo\n",
"c2 = SVG('circle', cx=65, cy=65, r=30,\n",
" fill=cores[2], opacity='0.5', stroke_width='0.2pt')\n",
"\n",
"# Terceiro c\u00edrculo\n",
"c3 = SVG('circle', cx=50, cy=35, r=30,\n",
" fill=cores[3], opacity='0.5', stroke_width='0.2pt')\n",
"\n",
"# Criando um grupo com as figuras\n",
"g = SVG('g', q1, c1, c2, c3)\n",
"\n",
"# Salvando\n",
"g.save(\"tmp.svg\")\n",
"\n",
"#Imprimindo o resultado\n",
"print open('tmp.svg').read()"
],
"language": "python",
"metadata": {},
"outputs": [
{
"output_type": "stream",
"stream": "stdout",
"text": [
"\n",
"\n",
"\n",
"\n",
"\n",
"\n"
]
}
],
"prompt_number": 3
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"\n",
"\n",
"Exemplo (com rotinas do SVGFig):"
]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"from math import sin, cos, pi\n",
"from svgfig import *\n",
"\n",
"# Cria uma curva para t = seno(2t) / 2 + cosseno(3t)\n",
"# de -2Pi a 2 Pi, da cor #ccbbaa\n",
"curva = Curve('t, 0.5 * sin(2*t) + cos(3*t)',\n",
" -2*pi, 2*pi, stroke='#ccbbaa')\n",
"\n",
"# Gera um gr\u00e1fico com eixos\n",
"# X (-2Pi a 2Pi) e Y (-2 a 2) com a curva\n",
"grafico = Plot(-2*pi, 2*pi, -2, 2, curva)\n",
"\n",
"# Cria um objeto SVG\n",
"svg = grafico.SVG()\n",
"\n",
"# Salva em um arquivo\n",
"svg.save(\"tmp2.svg\")"
],
"language": "python",
"metadata": {},
"outputs": [],
"prompt_number": 4
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
""
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"O SVGFig tem v\u00e1rias primitivas de desenho implementadas na forma de fun\u00e7\u00f5es, incluindo caminhos (`Path()`), linhas (`Line()`) e texto (`Text()`)."
]
},
{
"cell_type": "code",
"collapsed": false,
"input": [],
"language": "python",
"metadata": {},
"outputs": [
{
"html": [
"\n",
""
],
"output_type": "pyout",
"prompt_number": 1,
"text": [
""
]
}
],
"prompt_number": 1
}
],
"metadata": {}
}
]
}