SVG 是什么?
2024-08-26 10:59:42
SVG 意为可缩放矢量图形(Scalable Vectors Graphics)。
SVG 图形在放大或者改变尺寸的情况下,其图形的质量不会有所损失。
SVG 使用 XML 格式定义图形。
SVG 文件是纯粹的 XML。
SVG 是万维网联盟的标准。
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体。
—————————————————————————
一个实例:
<?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"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/> </svg>
将上面的代码保存为一个文件,文件后缀名为 .svg,这就表示它是一个 SVG 文件。
你可以在这里查看例子的效果(仅用于支持 SVG 的浏览器,现代浏览器也没有不支持 SVG 的了)
代码解释:
第 1 行代码包含了 XML 文件的声明。standalone 这个属性规定这个 SVG 文件是否是“独立的”,还是有引用外部文件。standalone="no" 意味着 SVG 文件不是独立的,会引用外部文件,在这里是 DTD 文件。
第 2 第 3 行引用了这个外部的 SVG DTD,这个 DTD 位于“http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”,含有所有允许的 SVG 元素。
SVG 代码以 <svg> 开始,以 </svg> 结束,这是根元素。width 和 height 可以设置这个 SVG 文档的宽度和高度。version 属性定义所使用的 SVG 的版本,xmlns 属性定义 SVG 命名空间。
SVG 的 <circle> 用来创建一个圆。cx 和 cy 属性定义原点的 x 和 y 坐标(默认为0,0),r 属性定义圆的半径。
stroke 和 stroke-width 属性控制图形的轮廓该怎么显示。这里把圆形的轮廓设置为 2px 宽,黑边框。
fill 属性设置形状内的颜色,我们把颜色填充为红色。
关闭标签 </svg> 的作用是关闭 SVG 元素和文档本身。
注意:所有的开启标签必须有关闭标签。
—————————————————————————
参考链接:
最新文章
- POJ 2914 Minimum Cut
- xxx couldn&#39;t be loaded because it has not been added to the build settings.
- python3 解析apk图标
- [Windows Phone] 以多国语言做为开发前提 (2)
- PHP函数register_shutdown_function的用法
- C#根据屏幕分辨率改变图片尺寸
- CS(计算机科学)知识体
- Linux系统时间, 硬件BIOS时间的校准与同步
- ORA-28002:the password will expire within 6 days
- java解惑--摘要
- Performance Tuning MySQL
- SDN交换机迁移2
- Python 入门基础2 --基本数据类型、运算符
- java线程中断的办法
- JQuery攻略(六)菜单导航
- Lower Power with CPF(四)
- linux服务器---配置samba
- 微信小程序wx.chooseImage和wx.previewImage的综合使用(图片上传可以限制个数)
- ehcache 的 配置文件: ehcache.xml的认识
- Android学习笔记①——安卓工具的基本安装
热门文章
- [原创]java WEB学习笔记82:Hibernate学习之路---映射 一对多关联关系,配置,CRUD方法测试及注意点
- oracle,sqlserver,mysql 命令行 开启、关闭所需要的服务
- 反射认识_06_ArrayList_HashSet区别
- mysql长连接和短连接的问题 转
- [转]]将 ASP.NET MVC3 Razor 项目部署到虚拟主机中
- Logic BIST
- [py]安装ipython
- Ubuntu 安装 “宋体,微软雅黑,WPS Office的symbol、wingdings、wingdings 2、wingdings 3、webding字体,Consolas雅黑混合版编程字体” 等 Windows 7 下的字体(转)
- Tomcat端口被占用快速解决方案
- TI BLE CC2541的I2C主模式