html - 如何从 Photoshop 中导出 SVG 文件以便进行编辑？

Question

在我的布局（.psd）中，我有 svg 文件。我怎样才能导出他，以便我可以将他粘贴到 html 中并从 css 编辑？当我点击“导出为”并选择“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>

而且我无法更改它（例如，在悬停时将填充从白色更改为红色）。当我点击“导出内容...”时，它被导出为 .ai 文件。请帮帮我。（对不起我的英语不好）

标签： htmlcsssvgwebphotoshop

Answer 1

假设你有最新的 Photoshop——

1）将该形状/对象移动到它自己的图层 2）右键单击图层，选择导出为 3）应该弹出一个导出模式，选择 SVG 4）在代码编辑器中打开 SVG 文件 5）复制 SVG 代码，粘贴到你想要的 HTML 中 6) CSS 中的样式填充颜色