HTML5 学习03——内联 SVG
2024-08-26 07:39:19
什么是SVG?
- SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
- SVG 用于定义用于网络的基于矢量的图形
- SVG 使用 XML 格式定义图形
- SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
- SVG 是万维网联盟的标准
SVG优势
与其他图像格式相比(比如 JPEG 和 GIF),使用 SVG 的优势在于:
- SVG 图像可通过文本编辑器来创建和修改
- SVG 图像可被搜索、索引、脚本化或压缩
- SVG 是可伸缩的
- SVG 图像可在任何的分辨率下被高质量地打印
- SVG 可在图像质量不下降的情况下被放大
浏览器支持
Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持内联SVG。
把 SVG 直接嵌入 HTML 页面
在 HTML5 中,您能够将 SVG 元素直接嵌入 HTML 页面中:
<body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"/>
</svg> </body>
SVG 与 Canvas两者间的区别
SVG 是一种使用 XML 描述 2D 图形的语言。
Canvas 通过 JavaScript 来绘制 2D 图形。
SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。
Canvas 是逐像素进行渲染的。在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。
Canvas 与 SVG 的比较
下表列出了 canvas 与 SVG 之间的一些不同之处。
Canvas | SVG |
---|---|
|
|
最新文章
- bean在容器上的生命周期
- webstorm启动bug
- jquery循环table中tbody的tr中input:text,将值进行拼接传入控制器并返回状态和描述
- 在ubuntu12.0.4上搭建samba服务器以实现文件共享
- ARM开发板系统移植-----rootfs的制作
- 【VMware混合云】掀起你的盖头来
- PHP登录程序
- Linux链接VPN进行转发
- Python科学计算之Pandas
- 记一次小型生产事故 | BeyondComper跨编码方式复制文件内容
- pyecharts使用
- ueditorUE 去掉本地保存成功的提示框!
- ARM Cortex M0 程序映像和启动流程
- dt常用类
- Object的数据属性和访问器属性
- onclick传对象
- Linux 磁盘告警分析
- Solaris 11配置IPS安装系统包(类似linux中的yum源)
- 如何直接执行js代码
- LeetCode: Distinct Subsequences 解题报告
热门文章
- springboot的三种启动方式
- 记JS一个错误,
- Js计算时间差,天数,小时数,余数
- postgresql 查询某一个表中的所有字段
- input时间表单默认样式修改(input[type=";date";])
- LINQ技术
- vue回调函数无法更改model的值
- 查出了a表,然后对a表进行自查询,a表的别名t1,t2如同两张表,因为t1,t2查询的条件不一样,真的如同两张表,关联两张表,可以将两行或者多行数据合并成一行,不必使用wm_concat()函数。为了将t2表的数据全部查出来使用了右连接。
- 2017-2018-2 20165220『Java程序设计』课程 结对编程练习_四则运算
- Get与Post方法的区别