Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

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.

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

  • Conteúdo Similar

    • Por Jack Oliveira
      Ola galera 
       
      Estava vendo alguns tutoriais que se dizem que ao usar imagens PNG elas tira estabilidade do servidor, que o certo e usar apenas jpg ou jpeg
       
      Bom nesta questão, pessoal como poderia fazer para que quando a imagens elas forem png fazer ser salvas com jpg mais sem que as perdem a qualidade da imagem
       
      Sei que ha algumas imagens elas chegam ha 2000px
       
      Alguma forma que eu possa fazer ela fica com o tamanho recomendado pelo próprio site 
      Por exemplo 
       
      A imagem for 2000px × 1200px
       
      Recomendado da imagem for
      600px x 300px
       
      Mais como disse sem que perca a qualidade
       
      Chamam de otimização de imagens correto?
    • Por Givanildo_Silva
      Srs sou principiante na Linguagem Javascript e estou tendo dificuldades em implementar um projeto, peço ajuda .
      Neste projeto crio dinamicamente  com Javascript polylines dentro de um SVG, cada polyline e criada com duas Classes (draggable e tooltip), a Class draggable é reconhecida normalmente, mas a tooltip não é reconhecida, quando a tag polyline com as classes é adicionada normalmente dentro do index funciona corretamente.
       
      abaixo códigos do projeto:
       
      Função ocultar polyline:
      let valor; let checagem; function teste(checkbox) { valor = checkbox.value; checagem = checkbox.checked; } function ocultar(){ let polyline = document.getElementsByTagName("polyline"); let equipe = document.getElementsByName("equipe"); if(checagem === true){ for(j=0;j<polyline.length;j++){ if(polyline[j].getAttribute("name")=== valor){ polyline[j].setAttributeNS(null, "visibility", "hidden"); } } } if(checagem ===false){ for(j=0;j<polyline.length;j++){ if(polyline[j].getAttribute("name")===valor){ polyline[j].setAttributeNS(null, "visibility", "visible"); } } } } <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="_css/estilo_principal.css"> <script src="js/arrastar.js"></script> <script src="js/tooltip.js"></script> <script src="js/ocultar.js"></script> <title>Painel Diagrama</title> </head> <body> <div id="painel"> <input type="button" value="Desenhar" onclick="criarlinha()"/> <div id="itens" class="w3-container"> <div class="w3-dropdown-hover"> <input type="button" id="equipe-1" value="Equipes" title="Selecione uma Equipe para oculta-lá"/> <div class="w3-dropdown-content w3-bar-block w3-border"> <ul id="equipes"> </ul> </div> </div> </div> </div> <div id="diagrama" > <svg id="tela" width="14800px" height="2640px" viewBox="0 0 14800 2640" onload="makeDraggable(evt); tooltip(evt)"> <g id="tooltip" visibility="hidden" > <rect x="2" y="2" width="80" height="85" fill="black" opacity="0.4" rx="2" ry="2"/> <rect width="80" height="85" fill="grey" rx="2" ry="2"/> <text x="4" y="6">Tooltip</text> <line x1="2" y1="23" x2="170" y2="23" stroke="black" stroke-width="2"></line> <text x="4" y="26">Tooltip</text> <line x1="2" y1="43" x2="170" y2="43" stroke="black" stroke-width="2"></line> <text x="4" y="46">Tooltip</text> <line x1="2" y1="63" x2="170" y2="63" stroke="black" stroke-width="2"></line> <text x="4" y="66">Tooltip</text> </g> <polyline class="draggable tooltip" name="teste" points="885 980 1200 980" stroke="green" stroke-width="10" fill="none" equipe="Equipe: Teste" os="os: 27493/2019" trecho="Trecho: Teste1" fiscal="Fiscal: Fulano de Tal"/> </svg> </div> <script src="js/linhasvg.js"></script> </body> </html> Função tooltip:
      function tooltip(evt) { var svg = document.getElementById('tela'); var tooltip = svg.getElementById('tooltip'); var tooltipText = tooltip.getElementsByTagName('text')[1]; var tooltipText1 = tooltip.getElementsByTagName('text')[0]; var tooltipText2 = tooltip.getElementsByTagName('text')[2]; var tooltipText3 = tooltip.getElementsByTagName('text')[3]; var tooltipRects = tooltip.getElementsByTagName('rect'); var triggers = svg.getElementsByClassName('tooltip'); var line = svg.getElementsByTagName('line'); for (var i = 0; i < triggers.length; i++) { triggers[i].addEventListener('mousemove', showTooltip); triggers[i].addEventListener('mouseout', hideTooltip); } function showTooltip(evt) { var CTM = svg.getScreenCTM(); var x = (evt.clientX - CTM.e + 6) / CTM.a; var y = (evt.clientY - CTM.f + 20) / CTM.d; tooltip.setAttributeNS(null, "transform", "translate(" + x + " " + y + ")"); tooltip.setAttributeNS(null, "visibility", "visible"); tooltipText.firstChild.data = evt.target.getAttributeNS(null, "equipe"); tooltipText1.firstChild.data = evt.target.getAttributeNS(null, "os"); tooltipText2.firstChild.data = evt.target.getAttributeNS(null, "trecho"); tooltipText3.firstChild.data = evt.target.getAttributeNS(null, "fiscal"); var length = tooltipText.getComputedTextLength(); for (var i = 0; i < tooltipRects.length; i++) { tooltipRects[i].setAttributeNS(null, "width", length + 15); line[i].setAttributeNS(null,"x2",length + 15) } } Função linhasvg:
      let svg = document.querySelector("svg"); let status = true; function criarlinha(){ let linha = document.createElementNS("http://www.w3.org/2000/svg","polyline"); let pontos = []; let equipes = document.getElementsByTagName("li") let equipe = prompt("Informe o nome do Setor.") let checar = document.getElementsByClassName("equipe") for (let i = 0; i < 4; i ++ ){ pontos.push(Number(prompt("Informe os valor"))); } linha.setAttribute("class","draggable tooltip"); linha.setAttribute("name",equipe); linha.setAttribute( "points", pontos); linha.setAttribute("fill", "none"); linha.setAttribute("stroke","green"); linha.setAttribute("stroke-width", 6); linha.setAttribute("equipe",equipe) linha.setAttribute("os","2997/2019") linha.setAttribute("trecho","POA/CVN") linha.setAttribute("fiscal","Fiscal: Fulano de Tal") svg.appendChild(linha); pontos = []; let quantidade_li = equipes.length if (quantidade_li > 0) { for (let i = 0; i < checar.length; i++) { if ( checar[i].value === equipe){ status = false; } } } if(status !== false){ let lis; let ul = document.getElementById("equipes"); let l1 = document.getElementsByTagName("li"); let li = document.createElement("li"); let span = document.createElement("span"); var input = document.createElement("input"); input.type ="checkbox"; input.value = equipe; input.className="equipe"; input.name="equipe"; input.setAttribute("onclick","teste(this), ocultar()") span.innerText= equipe; ul.appendChild(li); if (l1.length > 0) { lis = l1.length - 1; } else{ lis = l1.length; } l1[lis].appendChild(span); l1[lis].before(input, span); } let item = document.getElementsByClassName("equipe") let poly = document.getElementsByTagName("polyline") for (let i = 0; i < item.length;i++){ for(j = 0; j < poly.length; j++){ if (item[i].attributes[1].value === poly[j].attributes[1].value){ if(item[i].checked === true){ poly[j].setAttribute( "visibility", "hidden") } } } } } Função arrastar:
      function makeDraggable(evt) { let svg = evt.target; svg.addEventListener('mousedown', startDrag); svg.addEventListener('mousemove', drag); svg.addEventListener('mouseup', endDrag); svg.addEventListener('mouseleave', endDrag); svg.addEventListener('touchstart', startDrag); svg.addEventListener('touchmove', drag); svg.addEventListener('touchend', endDrag); svg.addEventListener('touchleave', endDrag); svg.addEventListener('touchcancel', endDrag); svg.addEventListener('click', clicar); function getMousePosition(evt) { let CTM = svg.getScreenCTM(); if (evt.touches) { evt = evt.touches[0]; } return { x: (evt.clientX - CTM.e) / CTM.a, y: (evt.clientY - CTM.f) / CTM.d }; } let selectedElement, offset, transform; function startDrag(evt) { if (evt.target.classList.contains('draggable')) { selectedElement = evt.target; offset = getMousePosition(evt); // Make sure the first transform on the element is a translate transform let transforms = selectedElement.transform.baseVal; if (transforms.length === 0 || transforms.getItem(0).type !== SVGTransform.SVG_TRANSFORM_TRANSLATE) { // Create an transform that translates by (0, 0) let translate = svg.createSVGTransform(); translate.setTranslate(0, 0); selectedElement.transform.baseVal.insertItemBefore(translate, 0); } // Get initial translation transform = transforms.getItem(0); offset.x -= transform.matrix.e; offset.y -= transform.matrix.f; } } function drag(evt) { if (selectedElement) { evt.preventDefault(); let coord = getMousePosition(evt); transform.setTranslate(coord.x - offset.x, coord.y - offset.y); } } function clicar(evt) { if (selectedElement) { evt.preventDefault(); let coord = getMousePosition(evt); transform.setTranslate(coord.x - offset.x, coord.y - offset.y); } alert("X= " + getMousePosition(evt).x + " Y= " + getMousePosition(evt).y) } function endDrag(evt) { selectedElement = false; } } Estilo estilo_principal:
      @charset "utf-8"; svg#tela{ background: url("_imagens/diagrama.png") no-repeat; } div#diagrama{ position: absolute; border: 2px solid black; top: 180px; left: 30px; width: 95%; height: 80%; overflow: auto; } div#painel{ position: absolute; border: 1px solid black; padding: 10px; left: 30px; } div#painel input{ text-align: center; } input#equipe-1{ width: 150px; margin-left: -10px; } div#itens{ float: right; width: 165px; } .equipe{ margin-left: 5px; } span{ margin-left: 5px; } ul#equipes{ padding-left: 0px; padding-top: -15x; } ul#equipes li{ list-style: none; padding: 1px; } svg text{ fill: white; } #tooltip { dominant-baseline: hanging; } .draggable{ cursor: move; } Desde já agradeço a atenção e colaboração.
       
    • Por Overtron8000
      Criei um mini game com recursos svg gerados por javascript para estudar e queria adicionar uma condição da bolinha quando tocar o chão zerar o contador (seria como a posição cy do eixo da bolinha tocasse o chão no 265px) só que não consigo acessar ele para ativar essa condição tentei assim..
       
      contador.innerHTML=numero+=1 if(balloon.cy==265){ numero=0; contador.innerHTML=numero; } }) https://codepen.io/regis404/pen/PMyYzv   projeto completo ai
    • Por mancialeo_geo
      Olá pessoal! Trabalho com mapas no qgis e finalizo os layouts no corel, faço omapeamento das areas com vants, mas me aconteceude não mapear toda area tive que completar com imagem de satelite, finalizo ele no qgis exporto como pdf, em programas para abrir pdfs ele abre normal, quando abro o pdf no corel ele coe umapartes das imagens transformando elas em png, como resolvo isso é problema no qgis ou no corel?
    • 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?
×

Informação importante

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