本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

如何从 Photoshop 导出 SVG 文件以便我可以编辑它?

发布于2025-01-19 20:11     阅读(1003)     评论(0)     点赞(6)     收藏(0)


在我的布局 (.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 文件。请帮帮我。(抱歉我的英语不好)


解决方案


假设你有最新的 Photoshop--

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




所属网站分类: 技术文章 > 问答

作者:黑洞官方问答小能手

链接:http://www.qianduanheidong.com/blog/article/538612/6eb6639965f856801094/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

6 0
收藏该文
已收藏

评论内容:(最多支持255个字符)