Guia do Usuário Cancelar

SVG

Saiba como trabalhar com SVG para usar XML e JavaScript na criação de gráficos da Web que respondam a ações de usuários com efeitos sofisticados, como realce, dicas de ferramentas, áudio e animação.

Link direto para o Adobe Illustrator

Experimente no aplicativo
Aplique filtros SVG em algumas etapas simples.

Sobre o SVG

SVG é um formato vetorial que descreve imagens como formas, caminhos, texto e efeitos de filtro. Os arquivos resultantes são compactos e fornecem elementos gráficos de alta qualidade na Web, impressos e até mesmo em dispositivos portáteis com recursos limitados, diferentemente dos formatos GIF, JPEG, WBMP e PNG, que são volumosos. Os usuários podem ampliar a exibição de uma imagem SVG na tela, sem sacrificar a nitidez, os detalhes ou a clareza. Além disso, o SVG fornece suporte superior para texto e cores, o que garante que os usuários vejam as imagens exatamente como elas aparecem na prancheta do Illustrator.

O formato SVG é totalmente baseado em XML e oferece muitas vantagens a desenvolvedores e usuários. 

É possível salvar a arte no formato SVG usando os comandos Salvar, Salvar como, Salvar uma cópia ou Salvar para Web e dispositivos. Para acessar o conjunto completo de opções de exportação de SVG, use os comandos Salvar, Salvar como ou Salvar uma cópia. O comando Salvar para Web e dispositivos fornece um subconjunto de opções de exportação de SVG que são aplicáveis a trabalhos orientados para a Web.

Aplicar efeitos SVG

Você pode usar efeitos SVG (filtros) para adicionar propriedades gráficas, como sombras, ao seu trabalho artístico. Efeitos SVG diferem das suas contrapartes em bitmap por serem baseados em XML e independentes de resolução. Um efeito SVG não é nada mais do que uma série de propriedades XML que descrevem várias operações matemáticas. O efeito resultante é renderizado no objeto de destino em vez de no gráfico de origem.

O Illustrator oferece um conjunto padrão de efeitos SVG. Você pode aplicar um efeito padrão diretamente ou editar seu código XML para personalizá-lo. Você também pode criar efeitos SVG.

Observação:

Para modificar os filtros SVG padrão do Illustrator, edite o arquivo Filters.svg Adobe SVG no seguinte local usando um editor de texto:

  • macOS: ~/Library/Application Support/Adobe/Adobe Illustrator <versão>/<idioma>
  • Windows: C:\Users\<nome de usuário>\AppData\Roaming\Adobe\Adobe Illustrator <versão> Settings\<idioma>\x64

Você pode modificar definições de filtros existentes, excluí-las e adicionar novas.

Aplicar um efeito padrão

  1. Selecione um objeto ou grupo (ou uma camada no painel Camadas).

  2. Acesse Efeito > Filtros SVG > Aplicar filtros SVG.

Aplicar um efeito personalizado

  1. Selecione um objeto ou grupo (ou uma camada no painel Camadas).

  2. Acesse Efeito > Filtros SVG > Aplicar filtros SVG.

  3. Na caixa de diálogo, selecione um efeito e depois Editar filtro SVG   . Edite o código padrão e selecione OK.

Criar e aplicar um efeito

  1. Selecione um objeto ou grupo (ou uma camada no painel Camadas).

  2. Acesse Efeito > Filtros SVG > Aplicar filtros SVG.

  3. Na caixa de diálogo, selecione Novo filtro SVG   . Insira o novo código e selecione OK.

Quando você aplicar um efeito de filtro SVG, o Illustrator exibirá uma versão rasterizada do objeto na prancheta. Você pode controlar a resolução dessa imagem de visualização ao modificar a configuração de resolução de rasterização do documento.

Observação:

Um efeito SVG deve ser o último efeito quando um objeto usa vários efeitos. Em outras palavras, ele deve aparecer na parte inferior do painel Aparência (logo acima da entrada Transparência). Se outros efeitos acompanharem um efeito SVG, a saída SVG consistirá em um objeto rasterizado.

Importar efeitos de um arquivo SVG

  1. Selecione Efeito > Filtro SVG > Importar Filtro SVG.

  2. Selecione o arquivo SVG do qual deseja importar efeitos e selecione Abrir.

Visão geral do painel Interatividade SVG

O painel Interatividade SVG permite ver todos os eventos e arquivos JavaScript associados ao arquivo atual.
Use o painel Interatividade SVG (Janela > Interatividade SVG) para adicionar interatividade à sua arte quando ela for exportada para visualização em um navegador da Web. Por exemplo, ao criar um evento que aciona um comando JavaScript, você pode criar um movimento rapidamente em uma página da Web quando o usuário realizar uma ação, como mover o cursor do mouse sobre um objeto.

Excluir um evento do painel Interatividade SVG

Você pode usar o painel Interatividade SVG para excluir um ou todos os eventos.

Para excluir um evento

  • Selecione o evento e depois Remover entrada selecionada   .

Para excluir todos os eventos

  • Selecione Limpar eventos no menu do painel  

Listar, adicionar ou remover eventos vinculados a um arquivo

Selecione a opção Vincular arquivos JavaScript   e depois Adicionar para adicionar outros arquivos JavaScript. Caso queira remover a entrada JavaScript selecionada, escolha Remover.

Adicionar Interatividade SVG à arte

  1. No painel Interatividade SVG, selecione um Evento. (Consulte Eventos SVG.)

  2. Insira o JavaScript correspondente e pressione Enter.

Eventos SVG

onfocusin

Aciona a ação quando o elemento recebe foco, como uma seleção com o cursor.

onfocusout

Aciona a ação quando o elemento perde foco (geralmente quando outro elemento recebe foco).

onactivate

Aciona a ação com um clique do mouse ou pressionamento de tecla, dependendo do elemento SVG.

onmousedown

Aciona a ação quando o botão do mouse é pressionado sobre um elemento.

onmouseup

Aciona a ação quando o botão do mouse é solto sobre um elemento.

onclick

Aciona a ação quando o botão do mouse é clicado sobre um elemento.

onmouseover

Aciona a ação quando o ponteiro é movido até um elemento.

onmousemove

Aciona a ação quando o ponteiro está sobre um elemento.

onmouseout

Aciona a ação quando o ponteiro é afastado de um elemento.

onkeydown

Aciona a ação quando uma tecla é pressionada.

onkeypress

Aciona a ação enquanto uma tecla é pressionada.

onkeyup

Aciona a ação quando uma tecla é solta.

onload

Aciona a ação depois que o documento SVG foi completamente analisado pelo navegador. Use esse evento para chamar funções de inicialização únicas.

onerror

Aciona a ação quando um elemento não é carregado adequadamente ou quando outro erro ocorre.

onabort

Aciona a ação quando o carregamento da página é interrompido antes da conclusão do carregamento do elemento.

onunload

Aciona a ação quando o documento SVG é removido de uma janela ou quadro.

onzoom

Aciona a ação quando o nível de zoom é alterado no documento.

onresize

Aciona a ação quando a exibição do documento é redimensionada.

onscroll

Aciona a ação quando a exibição do documento é rolada ou deslocada.

Dicas para criar arquivos SVG

  • Use camadas para adicionar estrutura a um arquivo SVG. Cada camada é convertida em um elemento de grupo (<g>) ao salvar uma arte no formato SVG. (Por exemplo, uma camada chamada Button1 se torna <g id="Button1_ver3.0"> no arquivo SVG.) Camadas aninhadas se tornam grupos aninhados SVG, e camadas ocultas são preservadas com a propriedade de estilo SVG display="none".

  • Se você quiser que os objetos em diferentes camadas apareçam transparentes, ajuste a opacidade de cada objeto em vez de cada camada.

  • Dados de rasterização não são dimensionáveis no SVG Viewer e não podem ser editados como outros elementos SVG. Evite criar um trabalho final que será rasterizado no arquivo SVG. Use efeitos SVG para adicionar efeitos de gráfico sem causar rasterização.

  • Use símbolos e simplifique os caminhos na sua arte para melhorar o desempenho do SVG. Evite também usar pincéis que produzem muitos dados de caminho, como Carvão, Cinzas e Caneta de rolagem, se o desempenho for de alta prioridade.

  • Use fatias, mapas de imagem e scripts para adicionar links da Web a um arquivo SVG.

  • Uma linguagem de scripts, como JavaScript, proporciona uma funcionalidade ilimitada a um arquivo SVG. Movimentos do cursor e do teclado podem invocar funções de script, como efeitos de sobreposição.

Opções de exportação SVG otimizadas para a Web

Uma nova opção de exportação SVG (Arquivo > Exportar > Exportar como > SVG) está disponível. O novo fluxo de trabalho permite que você gere arquivos SVG padronizados e otimizados para a Web para seus projetos de design para dispositivos e sites. Para obter mais informações, consulte Opções de exportação para SVG.

Veja também

Tem alguma dúvida ou sugestão?

Pergunte à comunidade

Se você tiver alguma dúvida ou sugestão para compartilhar, venha participar da comunidade do Adobe Illustrator. Adoraríamos ver suas criações e ouvir o que você tem a dizer.

Receba ajuda com mais rapidez e facilidade

Novo usuário?