SVG é um dialeto do XML, criado e mantido pela W3C que descreve de forma vetorial desenhos e gráficos bidimensionais, de forma estática, dinâmica ou animada.
Graças ao SVG, usado nativiamente no Inkscape, podemos com o auxilio de Extensões ou com um pouco mais de conhecimento de forma manual, criar documentos interativos que podem ser exibidos em navegadores web.
No arquivo de exemplo temos uma camiseta modelo e queremos dar ao nosso usuário a possibilidade de ver essa mesma camiseta em cores diferentes. Temos ao lado então 3 opções de cores para que o usuário escolha.
O layout apresentando nesse vídeo é puramente didático, e o código SVG gerado pode ser incluído em seu site ou aplicação web.
Ajuste a página para 1024x768 e lembre-se de que apenas os elementos que estão na página serão visualizados no navegador. Elementos de desenho fora da página não vão aparecer no browser.
O Inkscape assim como diversos outros softwares, usa largamente o Python e depende dele para que tudo funcione. No caso da Extensão que vamos usar ela depende da biblioteca python-xml. De qualquer forma caso a Extensão não funcione ela sempre retorna uma mensagem de erro.
A Extensão é muito simples de usar, basta selecionar todos os desenhos envolvidos, selecionando por último o alvo da mudança de propriedades, no caso o desenho da camiseta.
Agora clique no Menu Extensões -> Web -> Javascript -> e por fim em Transmitir Atributos.
No diálogo temos várias opções do configurações, para este exemplo observe se as opções estão como na tela:
Atributos a transmitir: fill
Quando transmitir: ao clicar
Compatibilidade com pré-visualização: Executar depois
Origem e destino da transmissão: Todos os selecionados transmitem para o último item.
Feito isso clique no botão aplicar.
Salve o documento, no seu navegador carregue o arquivo .SVG salvo e pronto, seu desenho aparece na tela e ao clicar em uma das cores ela é transmitida para a camiseta.
Você pode editar o arquivo, mesmo depois de aplicar a Extensão, após salvar basta atualizar o navegador para ver as mudanças.
Caso precise ou queira editar o código SVG no Inkscape, expanda a barra de comandos clicando na seta na base da tela e na opção Editor de xml, agora é só navegar pelos nós do documento. Outra opção é abrir o documento SVG diretamente no seu editor de códigos favorito.
Existem mais Extensões e essa extensão pode ser usada de formas variadas, experimente.
Graças ao SVG, usado nativiamente no Inkscape, podemos com o auxilio de Extensões ou com um pouco mais de conhecimento de forma manual, criar documentos interativos que podem ser exibidos em navegadores web.
No arquivo de exemplo temos uma camiseta modelo e queremos dar ao nosso usuário a possibilidade de ver essa mesma camiseta em cores diferentes. Temos ao lado então 3 opções de cores para que o usuário escolha.
O layout apresentando nesse vídeo é puramente didático, e o código SVG gerado pode ser incluído em seu site ou aplicação web.
O Inkscape assim como diversos outros softwares, usa largamente o Python e depende dele para que tudo funcione. No caso da Extensão que vamos usar ela depende da biblioteca python-xml. De qualquer forma caso a Extensão não funcione ela sempre retorna uma mensagem de erro.
A Extensão é muito simples de usar, basta selecionar todos os desenhos envolvidos, selecionando por último o alvo da mudança de propriedades, no caso o desenho da camiseta.
Agora clique no Menu Extensões -> Web -> Javascript -> e por fim em Transmitir Atributos.
No diálogo temos várias opções do configurações, para este exemplo observe se as opções estão como na tela:
Atributos a transmitir: fill
Quando transmitir: ao clicar
Compatibilidade com pré-visualização: Executar depois
Origem e destino da transmissão: Todos os selecionados transmitem para o último item.
Feito isso clique no botão aplicar.
Salve o documento, no seu navegador carregue o arquivo .SVG salvo e pronto, seu desenho aparece na tela e ao clicar em uma das cores ela é transmitida para a camiseta.
Você pode editar o arquivo, mesmo depois de aplicar a Extensão, após salvar basta atualizar o navegador para ver as mudanças.
Caso precise ou queira editar o código SVG no Inkscape, expanda a barra de comandos clicando na seta na base da tela e na opção Editor de xml, agora é só navegar pelos nós do documento. Outra opção é abrir o documento SVG diretamente no seu editor de códigos favorito.
Existem mais Extensões e essa extensão pode ser usada de formas variadas, experimente.
Comentários
Postar um comentário