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>
 </symbol>
</svg>
通过网页右击“审查元素”，可以知道oppo的开发者是将4个字母一个个写成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>
            </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>
</svg>
这才是我要的代码 
 步骤三：将这个.txt或.html文件的后缀直接改为.svg即可
 
 
改完后，你可以直接用浏览器打开这个文件，就是图形的形式
 你也可以用Photoshop打开SVG文件，可以让你选择你想要的分辨率 
 如果要给SVG改色什么的，可以直接在path中加入style="fill:#33333;"这样的代码就可以，也可以配合css的fill 
更多细节可参考 http://www.ruanyifeng.com/blog/2018/08/svg.html
                    今天要做一张关于OPPO手机的海报，其中有一个地方需要OPPO的logo，于是想找一张高分辨率的OPPO logo的PNG图片，并且是最新版的oppo logo，发现网上都没有，于是根据以前敲代码的经验，想使用Photoshop开SVG文件，转换分辨率的经验来做，然而发现oppo官网上的logo是svg文件，并且是以svg代码的形式加载的，不行大部分站点是以加载一个svg文件来实现的，没办法，只...
可以看到左侧图片是一个jpg格式的，接下来我们就要把它转化成svg;
2.打开SVG在线编辑器，把图片导入
我们可以打开SVG在线编辑器，把图片再百年机器中打开根据我们需要的大小进行设置，如下图：
3.设置图片和背景图大小等选项
选中图片后，右侧对应的是修改图片的一些选项，包括图片透明度，大小，和旋转角度等设置
不选中图片，右侧对应的是背景图的设置选项，包括高宽大小和颜色；
3.保存图片
图片和背景图设置完成后保存图片
保存成功后，图片就成为了SVG格式的啦！
				#SVG到JSON一种将SVG字符串转换为JSON数据并可选地呈现统计信息的方法。
 #Usage创建新实例，提供svg字符串，还可以选择传入options 。 
 var svg_json = new SVGToJSON ( svg [ , options ] ) ;
 #API ## Object.json SVGToJSON()返回一个对象。 OBJ.json是主要的JSON数据。 它是所有SVG标签的数组。 
 var svg_json = new SVGToJSON ( svg ) ;
svg_json = {
  json : [ ... ] 
 ## Object.json [I]中的每个标签Object.json有四个值。 
 var first_tag = svg_json . json [ 0 ] ;
first_tag = {
  attrs : {
				svg转成其他图片格式
百度上搜索的前6,7条都是转载的同一篇文章, 我试了试不知道为啥完全不行。不知道是我菜还是他们都不带脑子，晕着头就是转，自己也没试一下。
这篇是我找到的其他方式，亲测能用。
将这些代码放到一个js文件中
(function (global) {
    global.svgToImg = function (svgHtml) {
        this.svgHtml = svgHtml;
    global.svgToImg.prototype = {
				SVG转图
在工作中我习惯使用plantuml绘画各种各样的流程图，plantUML可以很方便的专为svg图片。所以，我希望在linux操作系统将svg转成各种类型的图片，例如：png、jpg、jpeg、bmp等，但是转成的图片的分辨率是按照原始比例进行存储的，我在使用的图片的时候，放置在doc文档里面的时候并不是特别清晰。
基于以上，我自己使用Qt开发了一个简单的svg转图片工具。
当然svg转图片不一定需要使用工具。例如浏览器也可以转化。
为了使图片保存更加清晰，我将图片放大。这样就能使其更加清
				之前做了一个svg简易的编辑器！有个需求将编辑器编辑好的svmXml代码转成图片然后上传到图片服务器！在网上招了好多的例子！发现大部分都要用到第三方的js插件！所以为了方便就自己写了个简单点的！下面分享出来！也算自己的一个笔记吧！ 
直接上页面部分代码： 
div中就是你的svg x...
     // 找到页面上面的svg元素
     const svg = document.getElementById('svg');
     // 将整个 document 对象序列化为一个 XML 字符串
     const s = new XMLSerializer().serializeToString(svg);
     // 通过window.btoa() 方法用于创建一个 base-64 编码的字符串
import htmlToSvg from "htmlsvg" ;
const htmlElement = document . getElementById ( "DivId" ) ;
const svg = await htmlToSvg ( htmlElement ) ;
console . log ( svg ) ;
 您可以通过传递配置对象直接下载svg
 import htmlToSvg from "htmlsvg" ;
const svgConfig = {
  download : true ,
  filename : "htmltosvg" ,
const htmlElement = document . ge
SVG 提供了沿任意路径绘制文本的功能，我需要在我的Chord Snip附加组件中执行此操作，但我没有任何方法可以获取生成的 SVG 并创建一个图像，Google Sheets 可以将其用作嵌入图像。
理想情况下，我想使用浏览器来呈现 SVG 而不是 canv
其实整个过程很简单：新建.txt文件 > 代码放进去 > 改为.svg文件

具体制作步骤：

步骤一：找到源代码

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

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