34: Um tour pelo software SVG - CSS-Tricks

Anonim

Há muito que você pode fazer com SVG sem qualquer software. Supondo que você tenha uma boa fonte de imagens SVG online, você pode usá-las diretamente. Mas é muito comum precisarmos ajustá-los um pouco. Sei que meu fluxo de trabalho mais comum é encontrar algo próximo do que preciso em sites de banco de imagens ou conjuntos de ícones ou semelhantes e, em seguida, manipulá-lo para ficar exatamente como desejo. Ajustar formas, deletar coisas, mudar cores, ajustar a prancheta, tudo isso. É muito mais fácil fazer coisas como essa com um software feito para isso, em vez de manualmente no código.

O software mais comum que usamos nesta série é o Adobe Illustrator (US $ 19,99 / mês). O Illustrator é um software grande e robusto para Mac ou PC. Muitos recursos. E é um pouco como escolher a guitarra como o instrumento que você quer aprender. Existem muitos tutoriais por aí usando. Há um monte de gente usando isso a quem você pode recorrer. O Illustrator pode SALVAR COMO em SVG, o que significa que é um formato de arquivo nativo com o qual você pode trabalhar, o que é muito bom.

Em todos os diferentes softwares que examinamos, nenhum deles produz o SVG tão otimizado quanto você provavelmente gostaria para a web. Todos eles inserem alguns comentários genéricos e coisas do tipo metadados dizendo em que software foram criados e tal, o que é completamente inútil para uso na web. Pior, na verdade, porque aumenta o tamanho do arquivo, o que torna as coisas mais lentas. Você sempre desejará otimizar o SVG obtido de qualquer software (faremos um screencast sobre a otimização em breve).

Inkscape é outra opção popular para edição de SVG. Acho que é provável porque é multiplataforma (filho de trabalho Mac, PC, Linux) e é gratuito. Também existe há muito tempo e tem um conjunto de recursos robusto. Acho um pouco estranho, principalmente como um usuário de Mac, porque a interface é estranhamente diferente de tudo o que estou acostumado.

Tenho gostado do Sketch, que é apenas para Mac ($ 99). Eu particularmente gosto de você poder selecionar objetos e grupos e então “Tornar exportável” e então SVG é uma opção para exportar como, o que fornece SVG recortado e perfeitamente utilizável para usar.

Também analisamos o iDraw (Mac $ 24,99 e iOS $ 8,99). Também existe o WebCode (Mac $ 39,99).

Não vimos isso especificamente no vídeo, mas também existem alguns editores SVG baseados em navegador que são muito legais:

  • Edição SVG
  • Método
  • Mondrian