svg的简介–svg转png的坑

我是不是消失很久了。。。。大概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即可,

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

三. 兼容性

一图已言之:

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中的一些信息会丢失,原因参考文章

发表评论

电子邮件地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据