SVG代码如何转为SVG文件

今天要做一张关于OPPO手机的海报,其中有一个地方需要OPPO的logo,于是想找一张高分辨率的OPPO logo的PNG图片,并且是最新版的oppo logo,发现网上都没有,于是根据以前敲代码的经验,想使用Photoshop开SVG文件,转换分辨率的经验来做,然而发现oppo官网上的logo是svg文件,并且是以svg代码的形式加载的,不像大部分站点是以加载一个svg文件来实现的,没办法,只能将这些代码转为svg文件了

SVG代码如何转为SVG文件

其实整个过程很简单:新建.txt文件 > 代码放进去 > 改为.svg文件

具体制作步骤:

以OPPO这个logo为例

  • 步骤一:找到源代码

官方的SVG代码如下

<svg xmlns="http://www.w3.org/2000/svg">
 <symbol id="oppo-logo-common" viewBox="0 0 281 67">
  <g id="oppoLogo" stroke="none" stroke-width="1" fill-rule="evenodd">
   <g id="LOGO1" fill-rule="nonzero">
    <path d="M33.7265527,0.00470449892 L32.8750384,0.00470449892 C13.5160254,0.319905926 1.42108547e-14,10.7733025 1.42108547e-14,25.4089987 C1.42108547e-14,40.0446948 13.5160254,50.5122049 32.870334,50.8132929 L33.7265527,50.8132929 C53.0808614,50.5027959 66.5968868,40.0493995 66.5968868,25.4089987 C66.5968868,10.768598 53.0808614,0.305792431 33.7265527,0.00470449892 M33.3031479,42.5568974 C19.1614241,42.4063534 10.0252872,35.6789199 10.0252872,25.4231122 C10.0252872,15.1673045 19.1614241,8.43516658 33.3031479,8.28932711 C47.4542807,8.43516658 56.5904176,15.1626001 56.5904176,25.4231122 C56.5904176,35.6836243 47.4542807,42.4063534 33.3125569,42.5568974" id="形状"></path>
    <path d="M247.776549,0.00470449892 L246.925035,0.00470449892 C227.566022,0.319905926 214.049997,10.7733025 214.049997,25.4089987 C214.049997,40.0446948 227.566022,50.5122049 246.920331,50.8132929 L247.776549,50.8132929 C267.130858,50.5027959 280.646883,40.0493995 280.646883,25.4089987 C280.646883,10.768598 267.130858,0.305792431 247.776549,0.00470449892 M247.353144,42.5568974 C233.211421,42.4063534 224.075284,35.6789199 224.075284,25.4231122 C224.075284,15.1673045 233.211421,8.43516658 247.353144,8.28932711 C261.504277,8.43516658 270.640413,15.1626001 270.640413,25.4231122 C270.640413,35.6836243 261.504277,42.4063534 247.362553,42.5568974" id="形状"></path>
    <path d="M176.573958,0.00470449892 L175.717739,0.00470449892 C166.496921,0.155248465 158.602772,2.6062924 152.863284,6.71802446 L152.863284,2.38518095 L142.842701,2.38518095 L142.842701,66.7192037 L152.863284,66.7192037 L152.863284,44.1376089 C158.602772,48.2446364 166.50633,50.7239075 175.713035,50.8462244 L176.573958,50.8462244 C195.928267,50.5357274 209.444292,40.082331 209.444292,25.4419302 C209.444292,10.8015295 195.928267,0.338723924 176.573958,0.0376359914 M176.145849,42.5898289 C162.004125,42.4392849 152.867988,35.7118514 152.867988,25.4560437 C152.867988,15.200236 162.004125,8.46809806 176.145849,8.32225859 C190.292277,8.46809806 199.433118,15.1955315 199.433118,25.4560437 C199.433118,35.7165557 190.292277,42.4392849 176.150553,42.5898289" id="形状"></path>
    <path d="M105.145551,0.00470449892 L104.294037,0.00470449892 C95.0732187,0.155248465 87.1790695,2.6062924 81.4348765,6.71802446 L81.4348765,2.38518095 L71.4189981,2.38518095 L71.4189981,66.7192037 L81.4348765,66.7192037 L81.4348765,44.1376089 C87.1743651,48.2446364 95.0779234,50.7239075 104.289332,50.8462244 L105.150255,50.8462244 C124.504564,50.5357274 138.020589,40.082331 138.020589,25.4419302 C138.020589,10.8015295 124.504564,0.338723924 105.145551,0.0376359914 M104.722146,42.5898289 C90.5804222,42.4392849 81.4395809,35.7118514 81.4395809,25.4560437 C81.4395809,15.200236 90.5804222,8.46809806 104.722146,8.32225859 C118.868574,8.46809806 128.004711,15.1955315 128.004711,25.4560437 C128.004711,35.7165557 118.868574,42.4392849 104.726851,42.5898289" id="形状"></path>
  </g>
  </g>
 </symbol>
</svg>

通过网页右击“审查元素”,可以知道oppo的开发者是将4个字母一个个写成svg代码的,如下图
SVG代码如何转为SVG文件
那4段path代码就是分别代表一个字母

  • 步骤二:新建txt文件(.html文件也行),然后将上面oppo官网打开的开发者工具里的代码,从

<svg id="oppo-logo-common" viewBox="0 0 281 67" width="100%" height="100%">
这一段开发复制代码,放到新建的.txt或.html文件中
如下:

<svg id="oppo-logo-common" viewBox="0 0 281 67" width="100%" height="100%">
                <g id="oppoLogo" stroke="none" stroke-width="1" fill-rule="evenodd">
                    <g id="LOGO1" fill-rule="nonzero">
                        <path d="M33.7265527,0.00470449892 L32.8750384,0.00470449892 C13.5160254,0.319905926 1.42108547e-14,10.7733025 1.42108547e-14,25.4089987 C1.42108547e-14,40.0446948 13.5160254,50.5122049 32.870334,50.8132929 L33.7265527,50.8132929 C53.0808614,50.5027959 66.5968868,40.0493995 66.5968868,25.4089987 C66.5968868,10.768598 53.0808614,0.305792431 33.7265527,0.00470449892 M33.3031479,42.5568974 C19.1614241,42.4063534 10.0252872,35.6789199 10.0252872,25.4231122 C10.0252872,15.1673045 19.1614241,8.43516658 33.3031479,8.28932711 C47.4542807,8.43516658 56.5904176,15.1626001 56.5904176,25.4231122 C56.5904176,35.6836243 47.4542807,42.4063534 33.3125569,42.5568974" id="形状"></path>
                        <path d="M247.776549,0.00470449892 L246.925035,0.00470449892 C227.566022,0.319905926 214.049997,10.7733025 214.049997,25.4089987 C214.049997,40.0446948 227.566022,50.5122049 246.920331,50.8132929 L247.776549,50.8132929 C267.130858,50.5027959 280.646883,40.0493995 280.646883,25.4089987 C280.646883,10.768598 267.130858,0.305792431 247.776549,0.00470449892 M247.353144,42.5568974 C233.211421,42.4063534 224.075284,35.6789199 224.075284,25.4231122 C224.075284,15.1673045 233.211421,8.43516658 247.353144,8.28932711 C261.504277,8.43516658 270.640413,15.1626001 270.640413,25.4231122 C270.640413,35.6836243 261.504277,42.4063534 247.362553,42.5568974" id="形状"></path>
                        <path d="M176.573958,0.00470449892 L175.717739,0.00470449892 C166.496921,0.155248465 158.602772,2.6062924 152.863284,6.71802446 L152.863284,2.38518095 L142.842701,2.38518095 L142.842701,66.7192037 L152.863284,66.7192037 L152.863284,44.1376089 C158.602772,48.2446364 166.50633,50.7239075 175.713035,50.8462244 L176.573958,50.8462244 C195.928267,50.5357274 209.444292,40.082331 209.444292,25.4419302 C209.444292,10.8015295 195.928267,0.338723924 176.573958,0.0376359914 M176.145849,42.5898289 C162.004125,42.4392849 152.867988,35.7118514 152.867988,25.4560437 C152.867988,15.200236 162.004125,8.46809806 176.145849,8.32225859 C190.292277,8.46809806 199.433118,15.1955315 199.433118,25.4560437 C199.433118,35.7165557 190.292277,42.4392849 176.150553,42.5898289" id="形状"></path>
                        <path d="M105.145551,0.00470449892 L104.294037,0.00470449892 C95.0732187,0.155248465 87.1790695,2.6062924 81.4348765,6.71802446 L81.4348765,2.38518095 L71.4189981,2.38518095 L71.4189981,66.7192037 L81.4348765,66.7192037 L81.4348765,44.1376089 C87.1743651,48.2446364 95.0779234,50.7239075 104.289332,50.8462244 L105.150255,50.8462244 C124.504564,50.5357274 138.020589,40.082331 138.020589,25.4419302 C138.020589,10.8015295 124.504564,0.338723924 105.145551,0.0376359914 M104.722146,42.5898289 C90.5804222,42.4392849 81.4395809,35.7118514 81.4395809,25.4560437 C81.4395809,15.200236 90.5804222,8.46809806 104.722146,8.32225859 C118.868574,8.46809806 128.004711,15.1955315 128.004711,25.4560437 C128.004711,35.7165557 118.868574,42.4392849 104.726851,42.5898289" id="形状"></path>
                    </g>
                </g>
            </svg>

然后将id="oppo-logo-common"这段代码改为xmlns="http://www.w3.org/2000/svg"
最终代码如下:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 281 67" width="100%" height="100%">
 <g id="oppoLogo" stroke="none" stroke-width="1" fill-rule="evenodd">
  <g id="LOGO1" fill-rule="nonzero">
   <path d="M33.7265527,0.00470449892 L32.8750384,0.00470449892 C13.5160254,0.319905926 1.42108547e-14,10.7733025 1.42108547e-14,25.4089987 C1.42108547e-14,40.0446948 13.5160254,50.5122049 32.870334,50.8132929 L33.7265527,50.8132929 C53.0808614,50.5027959 66.5968868,40.0493995 66.5968868,25.4089987 C66.5968868,10.768598 53.0808614,0.305792431 33.7265527,0.00470449892 M33.3031479,42.5568974 C19.1614241,42.4063534 10.0252872,35.6789199 10.0252872,25.4231122 C10.0252872,15.1673045 19.1614241,8.43516658 33.3031479,8.28932711 C47.4542807,8.43516658 56.5904176,15.1626001 56.5904176,25.4231122 C56.5904176,35.6836243 47.4542807,42.4063534 33.3125569,42.5568974" id="形状"></path>
   <path d="M247.776549,0.00470449892 L246.925035,0.00470449892 C227.566022,0.319905926 214.049997,10.7733025 214.049997,25.4089987 C214.049997,40.0446948 227.566022,50.5122049 246.920331,50.8132929 L247.776549,50.8132929 C267.130858,50.5027959 280.646883,40.0493995 280.646883,25.4089987 C280.646883,10.768598 267.130858,0.305792431 247.776549,0.00470449892 M247.353144,42.5568974 C233.211421,42.4063534 224.075284,35.6789199 224.075284,25.4231122 C224.075284,15.1673045 233.211421,8.43516658 247.353144,8.28932711 C261.504277,8.43516658 270.640413,15.1626001 270.640413,25.4231122 C270.640413,35.6836243 261.504277,42.4063534 247.362553,42.5568974" id="形状"></path>
   <path d="M176.573958,0.00470449892 L175.717739,0.00470449892 C166.496921,0.155248465 158.602772,2.6062924 152.863284,6.71802446 L152.863284,2.38518095 L142.842701,2.38518095 L142.842701,66.7192037 L152.863284,66.7192037 L152.863284,44.1376089 C158.602772,48.2446364 166.50633,50.7239075 175.713035,50.8462244 L176.573958,50.8462244 C195.928267,50.5357274 209.444292,40.082331 209.444292,25.4419302 C209.444292,10.8015295 195.928267,0.338723924 176.573958,0.0376359914 M176.145849,42.5898289 C162.004125,42.4392849 152.867988,35.7118514 152.867988,25.4560437 C152.867988,15.200236 162.004125,8.46809806 176.145849,8.32225859 C190.292277,8.46809806 199.433118,15.1955315 199.433118,25.4560437 C199.433118,35.7165557 190.292277,42.4392849 176.150553,42.5898289" id="形状"></path>
   <path d="M105.145551,0.00470449892 L104.294037,0.00470449892 C95.0732187,0.155248465 87.1790695,2.6062924 81.4348765,6.71802446 L81.4348765,2.38518095 L71.4189981,2.38518095 L71.4189981,66.7192037 L81.4348765,66.7192037 L81.4348765,44.1376089 C87.1743651,48.2446364 95.0779234,50.7239075 104.289332,50.8462244 L105.150255,50.8462244 C124.504564,50.5357274 138.020589,40.082331 138.020589,25.4419302 C138.020589,10.8015295 124.504564,0.338723924 105.145551,0.0376359914 M104.722146,42.5898289 C90.5804222,42.4392849 81.4395809,35.7118514 81.4395809,25.4560437 C81.4395809,15.200236 90.5804222,8.46809806 104.722146,8.32225859 C118.868574,8.46809806 128.004711,15.1955315 128.004711,25.4560437 C128.004711,35.7165557 118.868574,42.4392849 104.726851,42.5898289" id="形状"></path>
  </g>
 </g>
</svg>

这才是我要的代码

  • 步骤三:将这个.txt或.html文件的后缀直接改为.svg即可

改完后,你可以直接用浏览器打开这个文件,就是图形的形式
你也可以用Photoshop打开SVG文件,可以让你选择你想要的分辨率

如果要给SVG改色什么的,可以直接在path中加入style="fill:#33333;"这样的代码就可以,也可以配合css的fill

更多细节可参考 http://www.ruanyifeng.com/blog/2018/08/svg.html

### 如何将SVG代码导出或生成为SVG文件 要实现将SVG代码保存或换为SVG文件,可以采用多种方法和技术栈。以下是几种常见的解决方案: #### 方法一:前端操作——直接下载SVG字符串 在浏览器环境中,可以直接利用JavaScript动态生成并触发下载功能。核心逻辑是创建一个Blob对象并将SVG数据封装其中。 ```javascript function downloadSvg(svgString, filename) { const blob = new Blob([svgString], { type: "image/svg+xml;charset=utf-8" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = `${filename}.svg`; a.click(); URL.revokeObjectURL(url); // 清理内存 } ``` 此函数接受两个参数:`svgString` 是完整的SVG XML字符串;`filename` 则用于指定最终下载的文件名[^1]。 --- #### 方法二:借助Inkscape命令行工具 如果是在服务器端或者批量化处理场景下工作,则推荐使用 **Inkscape** 命令行工具完成任务。例如,假设已经拥有一段SVG代码存储于变量 `svgContent` 中,可先将其写入临时文件再调用外部程序执行化过程。 ```bash echo "<?xml version='1.0' standalone='no'?> <svg width='10cm' height='5cm' viewBox='0 0 1000 500' xmlns='http://www.w3.org/2000/svg'> <ellipse cx='300' cy='200' rx='200' ry='150' fill='#ffeb3b'/> </svg>" > temp.svg && \ inkscape temp.svg --export-filename=output.svg rm temp.svg ``` 上述脚本展示了如何通过管道符传递SVG内容至临时文件,并进一步由Inkscape负责实际渲染与输出目标SVG文档[^3]。 --- #### 方法三:基于Java环境下的SVG存方案 当项目运行平台限定为JVM生态体系时,也可以考虑纯Java实现路径。下面给出一段示范代码片段展示具体流程: ```java import org.apache.batik.transcoder.TranscoderInput; import org.apache.batik.transcoder.TranscoderOutput; import org.apache.batik.transcoder.image.PNGTranscoder; import java.io.ByteArrayInputStream; import java.io.OutputStream; public class SvgExporter { public static void convertToPng(String svgCode, OutputStream outputStream) throws Exception { try (ByteArrayInputStream bais = new ByteArrayInputStream( svgCode.getBytes("UTF-8"))) { PNGTranscoder t = new PNGTranscoder(); TranscoderInput input = new TranscoderInput(bais); TranscoderOutput output = new TranscoderOutput(outputStream); t.transcode(input, output); } } public static void saveAsFile(String svgCode, String filePath) throws IOException { Files.write(Paths.get(filePath), svgCode.getBytes()); } } ``` 这里定义了一个名为 `convertToPng` 的静态方法用来把输入的SVG编码序列变为PNG图像流形式返回给调用者[^5]。另外还提供了辅助性的 `saveAsFile` 函数帮助快速落地原始SVG文本到磁盘位置上。 --- #### 方法四:PhantomJS自动化抓取网页上的D3图表 对于那些嵌套复杂交互效果的数据可视化作品来说,单纯依靠DOM结构难以完全还原其外观特性。此时引入像 PhantomJS 这样的无界面Webkit引擎便显得尤为重要了。它允许开发者模拟真实用户的浏览行为从而捕获更贴近实际情况的画面表现。 以下是一个简单的例子说明怎样运用该技术获取远程站点加载完毕后的整个画布区域作为独立的SVG资源文件保存下来: ```javascript var page = require('webpage').create(), system = require('system'), address, output; if (system.args.length === 3){ address = system.args[1]; output = system.args[2]; page.open(address,function(status){ if (status!=='success'){ console.log('Unable to load the address!'); phantom.exit(); }else{ var svgElement=page.evaluate(function(){ return document.querySelector('#chart-container>svg').outerHTML; }); fs=require('fs'); fs.write(output,'<?xml version="1.0"?>\n'+svgElement,'w'); phantom.exit(); } }); }else{ console.log('Usage: phantomjs script.js [url] [output]'); phantom.exit(); } ``` 注意这里的重点在于正确选取待提取的目标节点以及确保所得到的内容符合标准XML语法规范以便后续解析器能够正常识别解读[^4]。 ---
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值