SVG格式&引入方式

最新推荐文章于 2024-05-23 17:52:27 发布

火星玛莎车主

最新推荐文章于 2024-05-23 17:52:27 发布

阅读量2.1k

点赞数

分类专栏： HTML\CSS\JS笔记文章标签： html svg

本文链接：https://blog.csdn.net/kkk1mmy/article/details/112784564

版权

HTML\CSS\JS笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

什么是SVG格式：

一种开放标准的矢量图形语言
可以直接用代码来描绘图像，用任何文字处理工具打开svg图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器(如chrome浏览器)来观看。
设计高分辨率的Web图形页面。
具备目前网络流行的jpg和png等格式无法具备的优势：可以任意放大图形显示，但绝不会以牺牲图像质量为代价;可在svg图像中保留可编辑和可搜寻的状态;平均来讲，svg文件比其它格式的图像文件要小很多，因而下载也很快。
SVG可作为单独的一个文档出现, 文件后缀为.svg。

CANVAS和SVG格式的区别：

Canvas绘制图形：
1. 位图
1. 放大变模糊，失真，丰富
1. 基于HTML既有标签绘制
SVG绘制图形：
1. 矢量图
1. 放大不会失真，依然清晰稍逊于位图
1. 基于XML绘制，可自定义标签

怎么打开SVG格式的文件：

由于svg是矢量图文件，一般的图片查看工具无法打开，使用Adobe Illustrator可以查看而且能够再次编辑svg文件，还能导出保存为svg或其他格式的文件。
svg文件还可以同过浏览器打开，如使用火狐浏览器就可以直接svg文件，不过有些浏览器可能要安装插件，其它的软件还有如SVGDeveloper专业svg格式编辑软件。

HTML引入SVG有多种方式，下面讲解四种方式：

图片
背景
框架
直接引用

<body>
  hello world!!!
<!--  图片方式引入-->
  <img src="standard_svg.svg" />
<!--  背景方式引入-->
  <div style="height:200px;width:200px;background:url(standard_svg.svg) no-repeat"></div>
<!--  框架方式引入-->
  <iframe src="first-圆-人脸.svg"></iframe>
<!--  直接在html中引入svg代码-->
  <div id="svg_div">
    <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
      <circle cx="100" cy="100" r="50" fill="red"></circle>
    </svg>
  </div>
</body>

火星玛莎车主

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
SVG格式&引入方式

什么是SVG格式：一种开放标准的矢量图形语言可以直接用代码来描绘图像，用任何文字处理工具打开svg图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器(如chrome浏览器)来观看。设计高分辨率的Web图形页面。具备目前网络流行的jpg和png等格式无法具备的优势：可以任意放大图形显示，但绝不会以牺牲图像质量为代价;可在svg图像中保留可编辑和可搜寻的状态;平均来讲，svg文件比其它格式的图像文件要小很多，因而下载也很快。SVG可作为单独的一个文档出现, 文件后缀为.
复制链接

扫一扫