Как експортировать SVG из Photoshop'а, что бы потом его можно было редактировать?

Question

[hellcaster]

У меня в макете (.psd) есть svg файл. Как его экспортировать, что бы потом его можно было вставить в html и из css менять его? Когда я нажимаю export as и выбираю svg, то он экспортируется

вот так

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="75" height="22" viewBox="0 0 75 22">
  <metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c142 79.160924, 2017/07/13-01:06:39        ">
   <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
      <rdf:Description rdf:about=""/>
   </rdf:RDF>
</x:xmpmeta>
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    
                           
<?xpacket end="w"?></metadata>
<image id="logotype-white-mobile.svg" width="75" height="22" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAAAWCAQAAAAiV6lIAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfiCAYVOSnUmHB5AAACH0lEQVRIx7WX752aQBCGn/WXAuggpgOsIFpBoIKDCqIVnFbApQJIBdqBdiCp4EgFbgdvPvDnBAUWc87H3dmZh53xHRcddWtn7RXJo2XydJEUtNbOkt41p8c010XScmil5e9XOdRvlw7CUpK0ba3Vn+H1pLk5o+1tlA6UtP0CQMHvq92v+PiAx16xyRg3n4TYwW/Q5HPEA3LeKizTodechABIVZiTQ8xIf7sxHoZaGTu772QKE1Le08/RiAUAr+2SPwh1YGUszAZ8NwCMJyuqAqby/xMqM6GxMIhlLCeAvna+8szIKHtx1HcQqunP2fQwd8FiTsCc42dAjWH51a25WEgB+EonQQX3oAaxtMaDspAO92UJsUCkyBkqYo8H7ExHXnqxtCYBYOeaxORN6y8doeqb/dHtyVK3vE6gJS/MAcicVKsGO2jHK7DXwhSOUAVzfI4s2ttDtm159g2fVpsrvR5HvcPnXGWImoHT6sm+IhZkfHtItzfkgM9w6/uAZWEykxMCEGn9sV0WMa+ks4EaK0G/GasV73gESsxmwNGyMjmAOSkmBRLZegKXWHZKBzmBnYG1/tD3eQ0UgMn0nQhIlJernySnHbD6N5mUynfHfn1AAZiYA+BxLP+7PQULTMYb4FUi42IxOc0AexIWmI2rEFf+tRz7pE/EAkLySWAFKwACJU/EMpYYO+lE3ZPr8pGwdTnU+8QYOK1g2hOjktvzP27Ai3/GXPADAAAAAElFTkSuQmCC"/>
</svg>

и я его не могу менять (например при hover менять цвет из белого на красный). А когда я нажимаю на export contents, то он у меня экспортируется как файл .ai

Answer 1

[Максим Тимофеев]

Photoshop не умеет работать с вектором, для этого есть AI.

У меня в макете (.psd) есть svg файл

вряд ли там svg, не представляю как это сделано, можно пример?

Comments

[hellcaster]

[Orbb]

Victor Muryn, экспорт слоя как svg.

[Orbb]

кстати, потом еще надо открыть такой svg через текстовый редактор и исправить в нем img/svg на image/svg или что-то подобное. Давно не работал с графикой, но если открыть его - сразу увидишь, там на 1 строке буквально. Иначе хром и сафари (хромиум) не будет его отображать в вебе.

[hellcaster]

Orbb,
где здесть export as svg?

[Moskus]

muryn.official, Export As...

[hellcaster]

Когда я нажимаю export as и выбираю svg, то он экспортируется

вот так

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="75" height="22" viewBox="0 0 75 22">
  <metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c142 79.160924, 2017/07/13-01:06:39        ">
   <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
      <rdf:Description rdf:about=""/>
   </rdf:RDF>
</x:xmpmeta>
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    
                           
<?xpacket end="w"?></metadata>
<image id="logotype-white-mobile.svg" width="75" height="22" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAAAWCAQAAAAiV6lIAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfiCAYVOSnUmHB5AAACH0lEQVRIx7WX752aQBCGn/WXAuggpgOsIFpBoIKDCqIVnFbApQJIBdqBdiCp4EgFbgdvPvDnBAUWc87H3dmZh53xHRcddWtn7RXJo2XydJEUtNbOkt41p8c010XScmil5e9XOdRvlw7CUpK0ba3Vn+H1pLk5o+1tlA6UtP0CQMHvq92v+PiAx16xyRg3n4TYwW/Q5HPEA3LeKizTodechABIVZiTQ8xIf7sxHoZaGTu772QKE1Le08/RiAUAr+2SPwh1YGUszAZ8NwCMJyuqAqby/xMqM6GxMIhlLCeAvna+8szIKHtx1HcQqunP2fQwd8FiTsCc42dAjWH51a25WEgB+EonQQX3oAaxtMaDspAO92UJsUCkyBkqYo8H7ExHXnqxtCYBYOeaxORN6y8doeqb/dHtyVK3vE6gJS/MAcicVKsGO2jHK7DXwhSOUAVzfI4s2ttDtm159g2fVpsrvR5HvcPnXGWImoHT6sm+IhZkfHtItzfkgM9w6/uAZWEykxMCEGn9sV0WMa+ks4EaK0G/GasV73gESsxmwNGyMjmAOSkmBRLZegKXWHZKBzmBnYG1/tD3eQ0UgMn0nQhIlJernySnHbD6N5mUynfHfn1AAZiYA+BxLP+7PQULTMYb4FUi42IxOc0AexIWmI2rEFf+tRz7pE/EAkLySWAFKwACJU/EMpYYO+lE3ZPr8pGwdTnU+8QYOK1g2hOjktvzP27Ai3/GXPADAAAAAElFTkSuQmCC"/>
</svg>

и я его не могу менять (например при hover менять цвет из белого на красный)

[Orbb]

muryn.official, а потому что это то что я тебе выше сказал. Это не svg, это png.

data:img/png;base64

[Orbb]

двойным кликом на слое открывай отдельно и сохраняй)

[Максим Тимофеев]

muryn.official, не все то svg, что так называется