Ir para conteúdo
Bergs

Exportar ícone no formato SVG

Recommended Posts

Olá Pessoal,

 

Estou com uma dúvida, queria poder exportar uma imagem no photoshop para o formato SVG, o tipo de imagem que quero fazer dessa forma são icones chapados (de uma única cor) que estão como png dentro no Photoshop CS5.  É possível transformar um png em vetor para exportar no formato SVG pelo Photoshop?

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Nas versões mais recentes do PS é possível, no CS5 não diretamente, mas pode tentar esse script:

http://hackingui.com/design/export-photoshop-layer-to-svg/

Apenas certifique-se que possui os gráficos em shapes (vetor), caso contrário, terá que vetorizar (criar os shapes), mas para refazer esse trabalho no PS, seria mais interessante vetorizar diretamente no Illustrator por exemplo e de lá exportar seus SVGs facilmente sem uso de scripts de terceiros. Outra alternativa caso não tenha o Illustrator, seria converter seus pngs em svgs através de ferramentas de conversão online.

 

Att.

  • +1 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá Public2004, tentei essa solução mas como não tinha os arquivos em vetor ficou  inviável. Era para criar fonts web com eles. Acabei usando em PNG porque o designer não encontrou os ícones que usou no layout em SVG e para o cliente não reclamar dos ícones deixei em PNG mesmo.

 

Obrigado :smiley:

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

E ai Bergs beleza?

 

Apenas complementando a resposta.

Se as imagens estiverem comoo shapes do photoshop você pode fazer o seguinte:

No photoshop

-> File

-> Export

-> Paths to Illustrator

-> Excolha o local para salvar o arquivo.ai

 

No Illustrator

-> Abra o arquivo Salvo

-> As vezes ele aparece transparente no arquivo, dando a impressão que está em branco, se for o caso, use cmd + a (MAC) ou ctrl + a (windows) para localizar o shape convertido.

-> Coloque uma cor nele

-> File

-> Save as...

-> SVG

-> SVG Code (para visualizar o código)

 

Sobre ferramentas online, conheço a http://www.online-convert.com, ela cumpre o serviço muito bem para imagens de uma cor única.

 

Abs,

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
Em 21/04/2017 at 17:27, WilliansS disse:

E ai Bergs beleza?

 

Apenas complementando a resposta.

Se as imagens estiverem comoo shapes do photoshop você pode fazer o seguinte:

No photoshop

-> File

-> Export

-> Paths to Illustrator

-> Excolha o local para salvar o arquivo.ai

 

No Illustrator

-> Abra o arquivo Salvo

-> As vezes ele aparece transparente no arquivo, dando a impressão que está em branco, se for o caso, use cmd + a (MAC) ou ctrl + a (windows) para localizar o shape convertido.

-> Coloque uma cor nele

-> File

-> Save as...

-> SVG

-> SVG Code (para visualizar o código)

 

Sobre ferramentas online, conheço a http://www.online-convert.com, ela cumpre o serviço muito bem para imagens de uma cor única.

 

Abs,

 

 

 

Valeu WilliansS :thumbsup::smiley:

Compartilhar este post


Link para o post
Compartilhar em outros sites
Em 15/05/2017 at 18:22, alx disse:

Sem sofrimento... gera uma imagem PNG com fundo transparente e usa esse site aqui...

 

https://iconverticons.com/

 

Olá @alx como era urgente acabei deixando como PNG. obrigado pela resposta. [tópico resolvido]

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por KD14
      Exemplo: Meu arquivo no illustrator tem as dimensões de 2000 x 2000 px (o mesmo tamanho da prancheta), quando eu exporto para JPEG ou PNG ele fica com as dimensões de 4168 x 4167.
      Alguém sabe o porque disso?
    • Por eduardoalmeida
      Seguinte galera!!! 
      Estou criando um logotipo pessoal, pra apresentação de um trabalho.. porém sou iniciante em photoshop.. sei quase nada rs 
      Poderiam me ajudar??!!
       
      Seguinte, gostaria de fazer essas 3 "faixas" da imagem
       

       
      Exatamente 3 faixas assim.. como é o nome? Talvez com nome encontro tutoriais no youtube rs 
       
      Agradeço desde já!
    • Por Victordiniz
      Bom dia a todos, confesso que não sei quase nada de html mais estou tentando, quem poder me ajudar fico muito agradecido.
      Bom estou criando um efeito html que é composto por 3 imagens que ao passar o mouse a imagem 1 é substituída por a 2 e ao tirar o mouse pela imagem 3.
      Porém a imagem 2 irá ser no formato WebP  e com isso estou tendo problemas no navegador Firefox que não suporta o formato.
      A unica alternativa seria dentro do efeito chamar uma imagem Jpg pra substituír a Webp quando o navegador não suportar. E ai que está o problema não estou conseguindo chamar essa imagem. Desde já muito obrigado. 
       
      Esse é o HTML:
       
      <a href="ENDEREÇO-DO-LINK"><img src="ENDEREÇO-DA-IMAGEM-1" border="0" onmouseover="this.src='ENDEREÇO-DA-IMAGEM-2'" onmouseout="this.src='ENDEREÇO-DA-IMAGEM-1'"></a>
    • Por rckholanda
      Boa tarde Pessoal,
       
      Estou com um problema aonde a pagina possui um "loader.svg" porém esse loader parece que entra em loop infinito, ao removê-lo da página, a mesma perde referencia de toda index.
       
      alguém poderia me ajudar?
       
      http://jjm.hhdesign.com.br/
       
      Abaixo o código do loader.svg
      <svg width="44" height="44" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#fff"> <g fill="none" fill-rule="evenodd" stroke-width="1"> <circle cx="22" cy="22" r="1"> <animate attributeName="r" begin="0s" dur="1.8s" values="1; 20" calcMode="spline" keyTimes="0; 1" keySplines="0.165, 0.84, 0.44, 1" repeatCount="indefinite" /> <animate attributeName="stroke-opacity" begin="0s" dur="1.8s" values="1; 0" calcMode="spline" keyTimes="0; 1" keySplines="0.3, 0.61, 0.355, 1" repeatCount="indefinite" /> </circle> <circle cx="22" cy="22" r="1"> <animate attributeName="r" begin="-0.9s" dur="1.8s" values="1; 20" calcMode="spline" keyTimes="0; 1" keySplines="0.165, 0.84, 0.44, 1" repeatCount="indefinite" /> <animate attributeName="stroke-opacity" begin="-0.9s" dur="1.8s" values="1; 0" calcMode="spline" keyTimes="0; 1" keySplines="0.3, 0.61, 0.355, 1" repeatCount="indefinite" /> </circle> </g> </svg>  
    • Por Caio Dom
      Boa tarde, estou usando esse código para fazer com que as imagens carreguem mais rápido, porém só funciona com JPG, gostaria que funcionasse também com PNG, se alguém puder me ajudar agradeço. Segue o código abaixo:
      <?php // The file $qualita = $_REQUEST['q']; if(!$qualita) { $qualita = 1; } $filename = $_GET['img']; $prop = $_REQUEST['scala']; if(!$prop) { $prop = 1; } // Set a maximum height and width // Content type header('Content-Type: image/jpeg'); // Get new dimensions list($width_orig, $height_orig) = getimagesize($filename); //$width = $prop*621; //$height = $prop*502; $width = 1000; $height = 667; //maantem ration $ratio_orig = $width_orig/$height_orig; if ($width/$height > $ratio_orig) { $width = $height*$ratio_orig; } else { $height = $width/$ratio_orig; } // Resample $image_p = imagecreatetruecolor($width, $height); $image = imagecreatefromjpeg($filename); imagecopyresampled($image_p, $image, 0, 0, 0, 0, $width_orig*$prop, $height_orig*$prop, $width_orig, $height_orig); // Output imagejpeg($image_p, null, 100); ?>  
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.