SVG嵌入HTML

SVG:

SVG是可缩放矢量图形,1999年由万维网联盟发布。于2013年成为W3C推荐标准。

SVG是指可伸缩矢量图形

SVG用来定义用于网络的基于矢量的图形

SVG使用XML格式定义图形

SVG图像在放大或缩小(改变尺寸)的情况下,其图形质量不会受受损失

SVG是W3C的一个标准

SVG优势(与位图图像相比):

SVG可被非常多的工具读取和修改(比如记事本)

SVG与JPEG和GIF图像比起来,尺寸更小,且可压缩性更强。

SVG是可伸缩的

SVG图像可在任何的分辨率下被高质量地打印

SVG可在图像质量不下降的情况下被放大

SVG图像中的文本是可选的,同时也是可搜索的(很适合制作地图)

SVG可以与Java技术一起运行

SVG是开放的标准

SVG文件是纯粹的XML

SVG嵌入HTML方法:

使用

元素来嵌入SVG图像

将SVG图像作为背景图像嵌入

直接使用

使用元素来嵌入SVG图像

使用元素来嵌入SVG图像

总之,SVG格式文件在矢量图基础上,嵌Web浏览器中,解决了位图图像发虚有锯齿的缺陷,更加轻量级,是UI设计师交与Web前端工程师的优先选择格式。

还可以将自己制作的图标放在特定的图标网站,交付给前端人员网站链接,供他们自行下载,可上传图标网站推荐:阿里巴巴矢量库

参考原文:http://www.w3cplus.com/html5/svg-introduction-and-embedded-html-page.html©w3cplus.com

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 这篇文章是一个名为Web和界面设计与矢量系列的一部分。 创建一组光面标签并将其保存为Web 快速提示:如何使用外观...
    平面设计知识库阅读 9,158评论 0 9
  • 1. 浏览器页面有哪三层构成,分别是什么,作用是什么? 构成:结构层、表示层、行为层分别是:HTML、CSS、Ja...
    程序猿人王小贱阅读 5,905评论 1 11
  • 昨天是王小波逝世二十周年,银河奶奶用参加各种从早到晚的悼念活动来纪念她曾经的爱人。与我来讲这是残忍的,无法想象伤口...
    霜巍阅读 1,333评论 0 0

友情链接更多精彩内容