Como Converter Imagem de Logotipo PSD em SVG no Photopea Gratuito

Hoje vamos te ensinar a transformar um PSD de logotipo (que contém textos e imagens rasterizadas) em um SVG totalmente vetorizado, leve e com cores editáveis via CSS.

Para isso, vamos utilizar apenas duas ferramentas gratuitas online:

• Photopea – para converter texto e elementos em vetor.

• SVGOMG – para otimizar o SVG final e deixá-lo pronto para uso em sites e no WordPress.

1. Preparação do arquivo no Photopea

1. Abra seu arquivo PSD no Photopea.

2. Se houver camadas de fundo de referência (ex.: um retângulo azul), oculte essas camadas — o fundo do SVG será transparente.

3. Verifique suas camadas principais:

   • Texto (no caso, TheKey)

   • Elementos rasterizados (no caso, SEO + lupa verde claro e sombra da lupa verde escuro).

2. Converter o texto em vetor

1. Clique na camada de texto (TheKey).

2. Botão direito > Converter em Forma (Convert to Shape).

3. Agora o texto vira path vetorial dentro do SVG.

4. A cor desse texto já pode ser alterada via fill no SVG ou herdada via CSS (currentColor).

3. Vetorizar as partes rasterizadas (SEO + lupa)

Como a parte “SEO” e a lupa estão em raster, é preciso transformá-las em paths vetoriais:

1. Selecione a camada SEO+cabo (verde claro).

2. Vá em Selecionar > Intervalo de Cores e clique no verde claro. Na janelinha que abre, ajuste a Tolerância (20–30) até selecionar toda a área verde desejada.

   1. Se preferir, em vez do passo acima, pode usar a varinha, ou usar CTRL+CLICK na camada, para selecionar as partes desejadas.

3. Vá na aba Demarcadores > Criar caminho da seleção.

4. Crie uma nova camada de forma com o preenchimento verde.

5. Repita o mesmo processo para a camada sombra-cabo (verde escuro).

👉 Assim, cada parte verde vira um shape vetorial.

Se a lupa tiver um “buraco” no centro, selecione o caminho interno e aplique Subtrair forma frontal (Subtract) para criar o furo corretamente no SVG.

4. Organizar e nomear camadas

• Renomeie os vetores: thekey, seo, lupa, sombra.

• Agrupe em uma pasta chamada logo.

• Remova qualquer raster que sobrou (camadas antigas podem ser ocultadas/deletadas).

5. Exportar para SVG

1. Vá em Arquivo > Exportar como > SVG.

2. Configure assim:

   • Desmarque add raster graphics

   • Desmarque rasterize text

   • Marque vectorize text

   • Marque minify

3. Salve o arquivo .svg.

Agora o logo está 100% vetor (sem imagens embutidas).

6. Otimizar no SVGOMG

1. Abra o SVG em SVGOMG: https://svgomg.net/
2. Configure conforme explicamos abaixo.

🔹 Global settings

• Show original → OFF (só serve para comparação visual).
• Compare gzipped → ON (opcional, só para ver o tamanho final).
• Prettify markup → OFF (deixa o código legível, mas maior).
• Multipass → ON (faz várias rodadas de otimização).
• Number precision → 3 (bom equilíbrio entre qualidade e peso).
• Transform precision → 5 (mantém fidelidade nos caminhos).

🔹 Features (plugins)

• Remove doctype → ON
• Remove XML instructions → ON
• Remove comments → ON
• Remove <metadata> → ON
• Remove xmlns → ❌ OFF
• Remove editor data → ON
• Clean up attribute whitespace → ON
• Merge styles → ON
• Inline styles → ❌ OFF ← (importante para poder sobrescrever cores via CSS)
• Minify styles → ON
• Style to attributes → ON ← (move style para fill/stroke em atributos)
• Clean up IDs → ON
• Remove raster images → ON (garante SVG 100% vetor; se você precisar manter <image>, deixe OFF)
• Remove unused defs → ON
• Round/rewrite numbers → ON
• Round/rewrite number lists → ON
• Minify colours → ❌ OFF ← (evita qualquer alteração/“arredondamento” de cor)
• Remove unknowns & defaults → ON
• Remove unneeded group attrs → ON
• Remove useless stroke & fill → ❌ OFF ← (não remova fill/stroke que você quer editar depois)
• Remove viewBox → ❌ OFF ← (mantém responsivo)
• Remove/tidy enable-background → ON
• Remove hidden elements → ON
• Remove empty text → ON
• Shapes to (smaller) paths → ON
• Move attrs to parent group → ON
• Move group attrs to elements → ON
• Collapse useless groups → ON
• Round/rewrite paths → ON
• Convert non-eccentric <ellipse> to <circle> → ON
• Round/rewrite transforms → ON
• Remove empty attrs → ON
• Remove empty containers → ON
• Merge paths → ON
• Remove unused namespaces → ON
• Replace duplicate elements with links → ❌ OFF (pode dificultar edição posterior)
• Sort attrs → ON
• Sort children of <defs> → ON
• Remove <title> → ON
• Remove <desc> → ON
• Prefer viewBox to width/height (= removeDimensions) → ON
• Remove style elements → ❌ OFF
• Remove script elements → ON
• Remove out-of-bounds paths → ON

Depois, baixe o SVG otimizado.

7. Subir no WordPress com segurança

• Instale o plugin Safe SVG (ou SVG Support) para liberar upload de SVGs.

• No Elementor, pode ser usado inline (se quiser trocar cores via CSS) ou como imagem normal.

Conclusão

Seguindo esses passos você terá:

• Um logo leve (3–8 KB),

• 100% escalável em qualquer tela,

• Cores editáveis diretamente pelo CSS,

• Sem perda de qualidade no PageSpeed Insights.