[size=medium]
什么是SVG?
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
与其他图像格式相比,使用 SVG 的优势在于:
SVG 可被非常多的工具读取和修改(比如记事本)
SVG 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强。
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
SVG 图像中的文本是可选的,同时也是可搜索的(很适合制作地图)
SVG 可以与 Java 技术一起运行
SVG 是开放的标准
SVG 文件是纯粹的 XML
SVG 的主要竞争者是 Flash。
与 Flash 相比,SVG 最大的优势是与其他标准(比如 XSL 和 DOM)相兼容。而 Flash 则是未开源的私有技术
使用 <embed> 标签
<embed> 标签被所有主流的浏览器支持,并允许使用脚本。
注释:当在 HTML 页面中嵌入 SVG 时使用 <embed> 标签是 Adobe SVG Viewer 推荐的方法!然而,如果需要创建合法的 XHTML,就不能使用 <embed>。任何 HTML 规范中都没有 <embed> 标签。
语法:
<embed src="rect.svg" width="300" height="100"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
注释:pluginspage 属性指向下载插件的 URL。
使用 <object> 标签
<object> 标签是 HTML 4 的标准标签,被所有较新的浏览器支持。它的缺点是不允许使用脚本。
注释:假如您安装了最新版本的 Adobe SVG Viewer,那么当使用 <object> 标签时 SVG 文件无法工作(至少不能在 IE 中工作)!
语法:
<object data="rect.svg" width="300" height="100"
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />
注释:codebase 属性指向下载插件的 URL。
使用 <iframe> 标签
<iframe> 标签可工作在大部分的浏览器中。
语法:
<iframe src="rect.svg" width="300" height="100">
</iframe>
例子:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
fill-opacity:0.1;stroke-opacity:0.9"/>
</svg>
svg可达到的效果:
[/size]
- 大小: 4.4 KB
分享到:
相关推荐
学习 svg 需要掌握的知识:xml、html SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形...
学习svg笔记
demo的代码
自己的XML DOM4J学习笔记 自己的XML DOM4J学习笔记
Odoo owl学习笔记之七--模板(前端核心内容) 内容 概述 指令 QWeb 模板参考 白色空间 表达评估 静态 html 节点 输出数据 设置变量 条件句 动态属性 动态类属性 动态标签名称 循环 子模板 动态子模板 调试 碎片 ...
内容包含了svg的基本图形,线,圆形,椭圆,多边形,图片,文本等基本图形,base_svg.html文件包含了基本图形案例,base_example.html是基本的图形的一个综合案例。... 压缩内容里还有ppt文件,学习笔记等。
83. Svg: Pie-Eyed 181 84. Recebt Entries 182 85. Xin Calendar Mods 183 86. 答复文档 186 87. 公式语言 187 88. Resuable way to get URL parameters into fields 199 89. JSHeader 使用 201 90. JavaScript ...
Three.js(https://github.com/mrdoob/three.js)是一个JavaScript 3D库,封装了底层的WebGL图形接口,提供简化、高效的三维图形程序开发。...当然,除了WebGL之外,Three.js还提供了基于Canvas、SVG标签的渲染器。
83. Svg: Pie-Eyed 181 84. Recebt Entries 182 85. Xin Calendar Mods 183 86. 答复文档 186 87. 公式语言 187 88. Resuable way to get URL parameters into fields 199 89. JSHeader 使用 201 ...
笔耕不缀,持续学习 网站 2021 2020 2019 vdom 原理解析与简单实现 从酷炫的果冻菜单谈起 CSS3 filter 属性 使用 js 实现依次执行异步任务 ...python 学习笔记 Too young, too simple. Sometimes, naive.
#Logo-SVG 笔记! 放弃使用徽标解析器的支持SVG的分支! SVG.js的最小徽标命令集: 前进/后退落后左/左右/右SETX,SETY,SETXY 重复n [...] 至FOO:ARG1:ARG2 BODY END 计划: 重启家清除屏幕/清除/ CS 颜色[rgb] ...
非常实用好看的特效代码,可以完美运行,可以二次修改!
83. Svg: Pie-Eyed 181 84. Recebt Entries 182 85. Xin Calendar Mods 183 86. 答复文档 186 87. 公式语言 187 88. Resuable way to get URL parameters into fields 199 89. JSHeader 使用 201 90. JavaScript ...
目前正在同步整理下面这些学习笔记: Rollup.js 源码研究 WebAssembly 相关知识学习 V8 引擎源码研究 正则表达式学习总结 git深度使用总结 后面计划添加的学习笔记有: Flutter知识总结 搭建个人博客总结 vue-router...
注意这里的bh维度为 1 * h,计算时使用广播机制,进行计算 所以引入激活函数 %matplotlib inline import tensorflow as tf from matplotlib import pyplot as plt import numpy as np ... use_svg_display()
一个用于使用SVG数据进行深度学习的库,包括将功能导出到可区分的PyTorch张量。 SVG-Icons8数据集。 图形用户界面,显示用于矢量图形动画的DeepSVG演示。 更新 2020年12月:新增原料SVG的DataLoader(见部分)。 ...
.jpg .png .gif .bmp .svg 字体文件(Fonts) .svg .ttf .eot .woff .woff2 模板文件 .ejs .jade .vue【这是在webpack中定义组件的方式,推荐这么用】 问题:网页中静态资源多了以后存在的问题 网页加载速度变慢,...
VNote(程序员笔记本)是专门针对程序员们最新开发...学习编程用什么做笔记比较好?VNote(程序员笔记本)让你满意。可以让程序员们在编程时进行笔记记录和编辑,功能强大没绝对能够惊艳到你,有喜欢的小伙伴们不要错过了。
千锋Django笔记.rar
我这里首先有一个完整的笔记(上几万字总结),还有参考文档,其中包含:Array对象的方法参考表格,Canvas参考手册,Date对象方法参考表格,HTML事件列表,jQuery的事件方法,jQuery选择器参考手册,Math参考文档,...