svg的简介-svg转png的坑

最新推荐文章于 2024-06-04 17:21:32 发布

火辣辣-

最新推荐文章于 2024-06-04 17:21:32 发布

阅读量1.3k

点赞数

分类专栏：学习总结

本文链接：https://blog.csdn.net/weixin_39559449/article/details/117448851

版权

学习总结专栏收录该内容

22 篇文章 0 订阅

订阅专栏

参考文章
我是不是消失很久了。。。。大概3个月没有记录过博客了，很多次打开之后懒得记录又关闭了。。。

懒惰是魔鬼，大家不要像我学习🙈🙈🙈

最近项目一直遇到一个问题，就是和svg有关的，svg虽然出来很久了但是坑还是很多的，我把我遇到的问题记录一下和大家分享～

一. svg简介
在 2003 年一月，SVG 1.1 被确立为 W3C 标准。

参与定义 SVG 的组织有：Sun公司（已被Oracle公司收购）、Adobe、苹果公司、IBM 以及柯达。

与其他图像格式相比，使用 SVG 的优势在于：

SVG 可被非常多的工具读取和修改（比如记事本）
SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
SVG 可以与 Java 技术一起运行
SVG 是开放的标准
SVG 文件是纯粹的 XML
二. svg在html中加载
如果svg直接作为代码段嵌套在html页面中，那么用户就和操作普通的don元素一样去操作svg即可，

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg> 
 
</body>
</html>

但是如果是使用a标签或者img标签，那么就是一个资源加载，是无法使用js去操作dom的，比如修改属性什么的

<a href="circle1.svg">View SVG file</a>

//or

<img src="circle1.svg" alt="svg"/>

三. 兼容性
一图已言之：
在这里插入图片描述

svg兼容性

四. 操作svg的第三方库
svg的本身的标签也很简单，但是比较繁琐，可以使用第三方库snap.js

官网：http://snapsvg.io/

国内比较好的一个中文网址案例：https://www.zhangxinxu.com/GitHub/demo-Snap.svg/demo/basic/Element.add.php

五. svg转png的坑！
重点来来，这个是大坑好吗！！！

svg是作为矢量图，那么正常转换也是可以的，比如采用html2canvas截图，也可以参考我的这篇文章

坑1:如果你的svg中的文字包含第三方字体，svg矢量元素那么转换后的字体是丢失的！
坑2:svg中转 canvas，如果svg中包含文字路径textpath，并且使用了第三方canvas库fabric.js，那么textpath是会丢失的；
坑3:svg转canvas，svg中的一些信息会丢失，原因参考文章；

火辣辣-

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
svg的简介-svg转png的坑

2020年3月27日火辣辣％1 $ S我是不是消失很久了。。。。大概3个月没有记录过博客了，很多次打开之后懒得记录又关闭了。。。懒惰是魔鬼，大家不要像我学习????????????最近项目一直遇到一个问题，就是和svg有关的，svg虽然出来很久了但是坑还是很多的，我把我遇到的问题记录一下和大家分享～一. svg简介在 2003 年一月，SVG 1.1 被确立为 W3C 标准。参与定义 SVG 的组织有：Sun公司（已被Oracle公司收购）、Adobe、苹果公司、IBM 以及柯达。与其他图像
复制链接

扫一扫