SVG代码如何转为SVG文件

最新推荐文章于 2024-07-31 16:50:09 发布
最新推荐文章于 2024-07-31 16:50:09 发布
阅读量2.3w 收藏 11
点赞数 6
分类专栏： 前端相关 文章标签： svg 转png 如何获取svg文件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WeilaPls/article/details/89396561
版权

今天要做一张关于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-formatter:格式化SVG源代码的工具-Form source code
03-25
SVG图标化器
.net 将SVG标签代码转成图片格式
06-05
.net 将SVG标签代码转成图片格式, vs2012，.net 可直接运行 内含Svg.DLL
html中svg标签源码转.svg文件
automation13的博客
10-11 3929
1、拷贝svg标签源码，例如： <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M36 4H12C9.79 4 8 5.79 8 8v32c0 2.21 1.79 4 4 4h24c2.21 0 4-1.79 4-4V8c0-2.21-1.7...
svg基本使用
最新发布
m0_72791534的博客
07-31 971
简介： 1、前言： 位图：放大会失真图像边缘有锯齿；是由像素点组成；前端的 Canvas 就是位图效果。 矢量图：放大不会失真；使用 XML 描述图形。 对于初学 SVG 的前端来说，可以简单的理解为 “SVG 是一套新标签”。所以可以使用 CSS 来设置样式，也可以使用 JS 对 SVG 进行操作。 在不设置宽高的情况下，默认为300 * 150，当内部元素大于300 * 150时，大于部分会被隐藏 2、viewBox 属性定义了SVG中可以显示的区域。 语法：viewBox=“x y w h”
将HTML文件或者SVG代码文件转换成.svg形式的图片
毕业才是起点
06-15 1928
【代码】将HTML文件或者SVG代码文件转换成.svg形式的图片。
chrome svg 没眼色_将JavaScript代码转换为漂亮的SVG流程图——js2flowchart
weixin_39724266的博客
11-23 176
引言js2flowchart 是一个可视化库，可将任何JavaScript代码转换为漂亮的SVG流程图。你可以轻松地利用它学习其他代码、设计你的代码、重构代码、解释代码。这样一个强大的神器，真的值得你拥有，看下面截图就知道了，有没有很强大。Githubhttps://github.com/Bogdan-Lyashenko/js-code-to-svg-flowchart安装使用安装yarn add...
将svg图片代码转换成base64
m0_52441527的博客
10-19 1304
【代码】将svg图片代码转换成base64。
Svg代码转图片
chunaocui3699的博客
07-09 4523
之前做了一个svg简易的编辑器！有个需求将编辑器编辑好的svmXml代码转成图片然后上传到图片服务器！在网上招了好多的例子！发现大部分都要用到第三方的js插件！所以为了方便就自己写了个简单点的！下面分享出来！也算自己的一个笔记吧！ 直接上页面部分代码： div中就是你的svg x...
vue动态加载SVG文件并修改节点数据的操作代码
10-14
在本文中，我们将探讨如何在Vue项目中动态加载SVG文件并修改其内部的节点数据。SVG（Scalable Vector Graphics）是一种基于XML的矢量图像格式，它允许我们创建可缩放的图形，这对需要交互性和动态变化的场景尤其有用...
svg代码与css代码互相转换，并压缩
06-29
1. **解析SVG文件**：读取SVG源代码，识别出可转换的部分。 2. **提取可样式化元素**：找出可以转化为CSS的图形元素。 3. **生成CSS规则**：根据SVG元素生成对应的CSS选择器和属性。 4. **数据URI编码**：将SVG图形...
vue项目里面引用svg文件并给svg里面的元素赋值
10-14
在引用SVG文件之前，确保SVG代码是正确的。这里要注意的是，SVG文件中的XML声明`<?xml version="1.0" encoding="utf-8"?>`可能会导致Vue中无法正常显示SVG。因此，需要移除XML声明部分，例如： ```xml <!-- 删除这...
SVG图片预览转换工具
12-23
一款开源的预览svg图形的软件 小巧 速度奇快无比非常好用 和windws完全融合
tosvg:将img文件转换为svg
05-02
转换 这是什么？ 此cli工具可将jpg和png文件转换为svg 安装 使用npm npm install -g tosvg GitHub结帐 $ git clone https://github.com/yfujii01/tosvg.git ~/.tosvg $ cd ~/.tosvg $ make 用法 $ tosvg input.png output.svg
html-to-svg:网页的svg屏幕截图（将给定的URL保存到SVG文件中）
04-14
将给定的URL保存到SVG文件 一个简单的Web服务，它将给定的URL保存到SVG图像。 使用docker run -p 8080:8080 gcr.io/as-a-service-dev/html-to-svg 原料药 网址参数： url ：要捕获的网站的URL （ width ）：视口宽度（以像素为单位），默认为1280 （ height ）：视口高度（以像素为单位），默认为800 示例：/？ /?url=https://steren.fr 在本地运行服务器 使用docker build . -t html-to-svg docker build . -t html-to-svg 从docker run -p 8080:8080 html-to-svg 在浏览器中打开http://localhost:8080/?url=https://steren.fr
jquery-svg-convert：使用jQuery快速将.svg图像转换为代码
02-03
jquery-svg-convert：使用jQuery快速将.svg图像转换为代码
svg转png插件saveSvgAsPng
08-29
svg转png插件saveSvgAsPng
SVG.rar_svg_svg 源代码_svg c++
09-21
通过分析这些SVG示例，开发者可以学习如何编写SVG代码，理解其语法结构，以及如何在C++程序中利用这些代码来生成和操作矢量图形。这不仅有助于提升图形设计技能，也有助于提高C++应用的视觉表现力。 SVG的学习资源...
svg代码转base64代码
热门推荐
qq_45832807的博客
07-29 1万+
转换页面上的svg代码 svgBase64(): void { // 找到页面上面的svg元素 const svg = document.getElementById('svg'); // 将整个 document 对象序列化为一个 XML 字符串 const s = new XMLSerializer().serializeToString(svg); // 通过window.btoa() 方法用于创建一个 base-64 编码的字符串 con.
将JavaScript代码转换为SVG流程图：js-code-to-svg-flowchart
gitblog_00052的博客
03-20 492
将JavaScript代码转换为SVG流程图：js-code-to-svg-flowchart js-code-to-svg-flowchartjs2flowchart - a visualization library to convert any JavaScript code into beautiful SVG flowchart. Learn other’s code. Design ...
转为svg
05-31
好的，我可以将刚才设计的建筑公司logo转换为SVG格式，如下所示： ```svg <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"> <rect width="100" height="100" fill="#f3f3f3"/> <path d="M86.4,58.8L50,38.4L13.6,58.8v23.2h72.8V58.8z" fill="#0077c0"/> <path d="M50,37.6L13.6,58V81.2h72.8V58L50,37.6z" fill="#a7a9ac"/> </svg> ``` 这里我使用了两个`<path>`元素来绘制图案，一个是蓝色部分，一个是灰色部分。同时，我也添加了一个填充为浅灰色的矩形元素，用于填充SVG视口的背景。 您可以将上述代码复制到文本编辑器中，保存为SVG文件，然后在网页或应用程序中使用它。如果需要修改颜色或者大小等属性，可以通过修改代码中的相应值来实现。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值