Editando SVG via programação usando PHP (Orientado a objetos)

SVG é um tipo de imagem vetorial, formato base do programa Inkscape, suportado também pelos programas da Adobe e pela Corel.

Este tipo de imagens é multi propósito, tem muitos fins, mas é basicamente um xml, um documento de texto com uma sintaxe específica.

Abaixo segue o exemplo do código fonte de um svg mínimo, incluindo um único retângulo. Note como a estrutura básica é muito simples, mas é importante notar que o SVG possibilita muito mais.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg">
 <width>210mm</width>
  <height>297mm</height>
  <version>1.1</version>
  <g>
      <rect x="100" y="50" width="30" height="40" style="fill: rgb(242, 242, 242); stroke: rgb(225, 161, 0);"/>
  </g>
</svg>

O código acima gera essa imagem abaixo, como citado um exemplo simplório.

exemplo de documento svg

Agora vamos aprender a criar esse desenho, esse mesmo código utilizando php puro (que por sinal é muito completo), utilizando-se dos poderes da orientação a objetos.

Para iniciar precisamos criar o objeto leitor de xml. O PHP disponibiliza a classe SimpleXMLELement que lida com XML de forma muito transparente. Maiores informações sobre o SimpleXmlElement podem ser encontradas no endereço http://br3.php.net/manual/pt_BR/class.simplexmlelement.php.

Vale citar que o PHP tem funcionalidades prontas para lidar com muitos tipos/formatos de arquivos e situações, antes de sair implementando coisas a vontade, verifique se o php já não possui algo pronto nesse sentido, não reinvente a roda.

O código abaixo então cria o nosso svg, sem nenhum conteúdo ou propriedade necessária.

$svg = new SimpleXMLElement('<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg></svg>');

Como segundo passo precisamos definir algumas propriedades básicas necessárias para a intepretação de um svg.

Tamanhos da página, largura e altura, neste caso o formato A4.

//tamanho da página
$svg->width = '210mm'; //largura
$svg->height = '297mm'; //altura

Versão do SVG, como padrão 1.1

$svg->version = '1.1';

Estilo do SVG, o xmlns, dessa forma definimos que o nosso documento utiliza essa sintaxe definida pela W3c.

$svg->addAttribute('xmlns', 'http://www.w3.org/2000/svg');

Após isso precisamos cria o nosso objeto de desenho, ou objeto gráfico (graphic), no SVG ele é chamado simplesmente G.

$g = $svg->addChild('g');

De posse de nosso G (não confunda com ponto G) podemos adicionar diversos elementos gráficos nele, neste artigos trataremos a adição de um retângulo.

$rect = $g->addChild('rect');

Agora que temos nosso objeto retângulo, definimos o seu tamanho e posição:

$rect->addAttribute('x',100); //posição x
$rect->addAttribute('y', 50); //posição y
$rect->addAttribute('width', 30); //largura
$rect->addAttribute('height', 40); //altura

Então definimos seu estilo, fill é a cor de preencimento e stroke é a cor do contorno, nesse caso utilizamos o sistema hexadecimal de definições de cores.

$rect->addAttribute('style','fill:#f2f2f2;stroke:#e1a100;');

Nosso SVG esta pronto, só precisamos jogar ele para o browser, neste caso precisamos definir o cabeçalho (header) para que o browser entenda que estamos “echoando” um SVG e não uma página html normal.

header('Content-type: image/svg+xml');
echo $svg->asXML();

Abaixo então está o código completo de geração do nosso SVG.

<?php
$svg = new SimpleXMLElement('<?xml version="1.0" encoding="UTF-8"
standalone="no"?><svg></svg>');
//tamanho da página
$svg->width = '210mm';
$svg->height = '297mm';
//versão do svg 1.1 é padrão
$svg->version = '1.1';
//estilo do svg, padrão
$svg->addAttribute('xmlns', 'http://www.w3.org/2000/svg');
//g de graphics é onde os objetos visuais são adicionais
$g = $svg->addChild('g');
//cria o retangulo
$rect = $g->addChild('rect');
//define seus attributos
$rect->addAttribute('x',100);
$rect->addAttribute('y', 50);
$rect->addAttribute('width', 30);
$rect->addAttribute('height', 40);
//estilo de fill=preenchimento stroke = linha
$rect->addAttribute('style','fill:#f2f2f2;stroke:#e1a100;');
//define o cabeçalho do arquivo, para que o browser entenda que é um svg e não um xml normal
header('Content-type: image/svg+xml');
echo $svg->asXML();
?>

Vale citar, que neste exemplo criamos um SVG simples praticamente do zero, mas podemos abrir um SVG que já esteja pronto no nosso HD, para isto utilizamos a função file_get_contents, conforme exemplo abaixo.

$svg = new SimpleXMLElement( file_get_contents('meuRetangulo.svg' );

Dessa forma o PHP faz a leitura de nosso documento SVG e o carrega já como objeto para a variável $svg. Com base nisto, podemos obter o G deste documento.

$g = $svg->g;

Com nosso G em mãos estamos prontos para adicionar um retângulo ou o que quer que quisermos ao nosso SVG.

Para conhecer todas as propriedades de um SVG podemos utilizar o endereço http://www.w3.org/TR/SVG/, que tem a espeficicação do projeto, mas também podemos desenhar alguma coisa no Inkscape e ver como fica o código fonte.

Bom desenhos para todos nós!

Criando transparências com GIMP – Limpando o fundo da imagem (Video Tutorial)

Gimp é um ótimo programa de edição de imagens, suporta vários formatos de arquivo e tem muitas funcionalidades, bem como suporta a instalação de diversos plugins, infelizmente as pessoas não o conhecem ou tem dificuldades básicas em suas utilização.

A fim de diminuir as dificuldades em relação ao conhecimento dos princípios básicos do GIMP, este video tutorial visa explicar conceitos de transparência, canal alpha e borrachas, e tratar levemente sobre camadas.

I hope you enjoy!