SVG no Google Web Designer

O SVG é um formato de imagem baseado em XML usado para gráficos vetoriais. As imagens SVG podem ser especialmente úteis em layouts responsivos porque podem ser redimensionadas sem perda de qualidade.

Como redimensionar SVGs

Se você estiver redimensionando uma imagem ou forma SVG para torná-la maior, use as propriedades de largura e altura em vez do dimensionamento 3D. Se você usar o controle de transformação da ferramenta Seleção, talvez seja necessário alterar o estilo de dimensionamento.

Como adicionar SVGs

Há várias maneiras de adicionar SVGs a um documento:

• Importar um arquivo SVG (veja mais informações abaixo)
• Usar as ferramentas "Caneta", "Oval", "Retângulo" ou "Linha" para desenhar uma forma SVG
• Inserir código SVG diretamente na Visualização de código
• Colar código SVG na Visualização de design
• Converter um elemento de texto em SVG aplicando um filtro do SVG

Como importar arquivos SVG

É possível importar um arquivo SVG usando o comando de menu Arquivo > Importar recursos... ou arrastando o documento para a janela do Google Web Designer.

Ao importar um arquivo SVG, é possível escolher entre tratar o SVG como uma imagem ou incorporar o código SVG in-line no HTML do documento. A tabela abaixo lista alguns dos casos de uso de cada método.

Imagem	In-line
Disponível para uso como máscara de imagens Compatível com pontos focais Possibilidade de extrair cores Inclusão na "Biblioteca"	Compatível com filtros do SVG Editável na Visualização de código

Filtros SVG

É possível adicionar efeitos especiais a elementos SVG usando filtros do SVG, como desfoque, brilho e muito mais. Veja a lista completa de filtros do SVG.

    

Exemplos de efeitos de filtro do SVG (SVG original à esquerda)