SVG相关研究 - 简书
<div class="fixed-btn note-fixed-download" data-toggle="popover" data-placement="left" data-html="true" data-trigger="hover" data-content=''>
写了7611字，被21人关注，获得了18个喜欢
SVG相关研究
一、SVG基本知识
可缩放矢量图形（英语：Scalable Vector Graphics，SVG）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG由W3C制定，是一个开放标准。
SVG允许3种图形对象类型：矢量图形、栅格图像以及文本。图形对象——包括PNG、JPEG这些栅格图像——能够被编组、设计、转换及集成进先前的渲染对象中。文本可以在任何适用于应用程序的XML命名空间之内，从而提高SVG图形的搜索能力和无障碍性。SVG提供的功能集涵盖了嵌套转换、裁剪路径、Alpha通道、滤镜效果、模板对象以及可扩展性。
&?xml version="1.0"?&
&!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&
&svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="467" height="462"&
&!-- This is the red square: --&
&rect x="80" y="60" width="250" height="250" rx="20" fill="red"
stroke="black" stroke-width="2px" /&
&!-- This is the blue square: --&
&rect x="140" y="120" width="250" height="250" rx="40" fill="blue"
stroke="black" stroke-width="2px" fill-opacity="0.7" /&
2. SVG优点
图像文件可读，易于修改和编辑SVG文件可以使用各种文本编辑器对其进行编辑；同时由于其基于XML，每个节点代表一个元素，也很容易在现有图像上进行元素增加、删除和修改。
SVG图形格式可以方便的创建文字索引，从而实现基于内容的图像搜索对于数据量较少的SVG文件，可以对文件内容进行索引，实现快速搜索。此优点对于用于显示地图来说，可以通过文字索引快速定位到某个元素
SVG图形格式支持多种滤镜和特殊效果此效果可实现对图片中某个元素进行特殊处理，如高光、阴影等。在地图应用中，可以使用此效果完成对地图中某个元素的处理，例如对某个元素进行高光处理，代表此元素被选中
与现有技术可以互动融合例如，SVG技术本身的动态部分（包括时序控制和动画）就是基于SMIL标准。另外，SVG文件还可嵌入JavaScript（严格地说，应该是ECMAScript）脚本来控制SVG对象
SVG图形格式可以用来动态生成图形根据此优点，使用SVG文件显示地图时，可以很方便的在地图上增加或者删除元素
文件大小相对于JPG、PNG格式文件小很多
缩放不失真
3. SVG缺点
IE9以下IE系列浏览器不支持SVG格式图片
没有进行压缩，比其他矢量图格式稍大
二、SVG用于地图应用的可行性
1. 加载效率
详细见demo
3. web相关
4. 相关案例
关于使用SVG作为电子地图在应用中加载方式
对于较小的SVG图片如果地图内容为小区、楼层、室内等元素较少的区域，对应的生成的SVG图片应该比较小。此种图片可以直接进行全图加载，并不会影响用户体验
对于较大的SVG图片如果地图内容为城市等元素较多，布局较为复杂的区域，对应生成的SVG图片应该比较大，对于此情况，应该采用动态局部加载的方式进行加载。动态按需加载算法可以参考相关参考章节3部分。
标量图与矢量图的混合使用
地图不仅包含各种图例，还会包含一些图标（比如锚点）。此类图标一般不会改变大小，如果此种图标矢量版容易生成，则可使用矢量图，如果较为麻烦可以考虑使用标量图进行代替。
地图上窗体如何进行展示
对于桌面应用以Qt来说，SVG地图会被渲染在某个控件上，当需要在地图上展现窗体时（如显示某摄像头视频情况时），可以创建出相关控件设置在渲染控件上层。
对于web应用当用户点击某摄像头想查看视频时，可以使用javascript编程控制，在相关区域显示部分块元素即可。
是否可以只开发web应用，直接将web应用嵌入到桌面应用中（需要测试）
如果地图这部分以后会迁移到web应用中，那么将地图直接使用html加载，再通过桌面应用直接加载html将会减少将近一半的开发时间。
为了达到此目的，需要桌面开发工具支持html解析，目前Qt使用Webkit支持将网页嵌入到桌面应用中，并通过javascript对网页进行操作，但是支持效果如何不得而知。根据以往经验，目前普遍对Qt4的Webkit支持认为不够好。
从可控性、稳定性方面考虑，决定不考虑此种开发方式，还是按照桌面版和web版分别开发的方式进行开发。
SVG自有的动画效果具体能完成哪些工作
SVG现在有几种格式，是否存在兼容性问题
Written with .
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
选择支付方式：【第644期】拥抱Web设计新趋势：SVG Sprites实践应用_前端早读课_传送门
【第644期】拥抱Web设计新趋势：SVG Sprites实践应用
前端早读课
前言终于浪了两天回到厦门了，这两天都是在淋雨中度过。Ok，新的一周又开始了，今天分享的文章来自京东@William 童鞋的投稿。作者从多方面分享svg在web中的应用。正文从这开始～随着移动互联网的到来，各种高清屏幕移动设备的层出不穷，导致H5应用在移动设备retina屏幕下经常会遇到图标不清晰的问题。为了解决屏幕分辨率对图标影响的问题，通常采用CSSSprite，Icon Font，CSS Icon以及SVG以适应@x1屏、@2屏、@3屏，相对比较而言SVG矢量性、缩放无损等诸多优点，更应受前端设计师的青睐，可在许多公司的移动项目应用中却很鲜见，究其主因在于SVG开发学习成本比较高以及在绘制的性能上比PNG要差。此篇文章将从SVG快速导出到SVG、SVG Symbol组件化在项目中实战进行讲解，并提供SVG Symbol快速导出工具，教你如何提高SVG开发效率减少成本。SVG简介SVG是一种开放标准的矢量图形语言，使用svg格式我们可以直接用代码来描绘图像，可以用任何文字处理工具打开svg图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来浏览。SVG优缺点PS：SVG 为什么没有替代 iconfont？PC 端 SVG 有兼容性问题，因此 PC 端还是用 iconfont 比较靠谱。那么，与其为移动端多弄一套 SVG 方案，为什么不直接公用同一套 iconfont 库？成本问题。知道 SVG Sprite 的人不多，而 iconfont 俨然成为前端面试必考题了。抛开兼容，再就是SVG的局限性:单色或线性渐变(从左向右笔直进行渐变)，径向渐变(从内到外进行圆形渐变)都没问题、但是不规则的渐变、就实现不了了。SVG比图片麻烦、设计稿如果不优化节点、直接导出、代码量那个惊人，然而ai导出的SVG代码、节点优化后，也不能直接用、还得小改、总体来说SVG比图片好耗费功力太多。Web应用中SVG的使用方式使用img、object、embed 标签直接引用SVG此方法的缺点主要在于每个图标都需单独保存成一个 SVG 文件，使用时单独请求，增加了HTTP请求数量。inline SVG，直接把SVG写入 HTML 中Inline SVG 作为HTML文档的一部分，不需要单独请求。临时需要修改某个图标的形状也比较方便。但是Inline SVG使用上比较繁琐，需要在页面中插入一大块SVG代码不适合手写，图标复用起来也比较麻烦。SVG Sprite这里的Sprite技术，类似于CSS中的Sprite技术。图标图形整合在一起，实际呈现的时候准确显示特定图标。其实基础的SVG Sprite也只是将原来的位图改成了SVG而已，控制SVG大小、颜色需要重新合并SVG文件。使用 SVG 中的 symbol，use 元素来制作SVG SpriteSVG Symbols的使用，本质上是对Sprite的进一步优化，通过元素来对单个SVG元素进行分组，使用元素引用并进行渲染。这种方法的解决了上述三种方式带来的弊端，少量的http请求，图标能被缓存方便复用，每个SVG图标可以更改大小颜色，整合、使用以及管理起来非常简单。SVG Symbols作为body的第一个元素插入在HTML中使用：使用完整路径引用Icon（此方法涉及到跨域问题）存在跨域问题，同域可以使用。js控制SVG写入body进行引用推荐使用，有效分离结构和展现、解决缓存以及跨域问题。svg.js:svg.html:SVG快速导出SVG导出工具Photoshop CC 2015 以上版本均支持导出SVG功能Adobe Illustrator 导出export-photoshop-layer-to-svg基于photoshop的SVG导出插件export-svg-with-fireworks基于firework的SVG导出插件 Photoshop CC 2015 导出SVG使用Ps可以对矢量图层进行导出，即通过矢量工具绘制所在图层或图层文件夹进行导出，若对不是矢量图形进行导出，可能会引起错误或者导出的文件是位图。SVG导出，建议图形一定要撑满整个画布，若存在间隙，网页使用时图标居中对齐就会比较麻烦。批量导出SVG批量导出SVG，只需在矢量图层或失落图层文件夹名后添加相应格式后缀（如.svg)，依次点击菜单“文件->生成->图像资源”，确认该菜单项已被勾选。但是此方法会根据icon实际大小进行导出，若icon图标存在小数导出就不太适用，我们需要手动去调节。设置导出为单个导出设置导出为单个导出，选中矢量图层单击右键，依次点击“导出为->设置参数->导出”，此方法可以设置SVG的图像实际大小，以及画布大小。导出为：设置导出SVG图像实际大小，以及画布大小：SVG Symbol自动化合并生成Photoshop导出来的是单个SVG文件，需要将这些单个SVG文件进行合并生产symbol的SVG，这样才能通过symbol＋use进行引用。可以使用手工合并，推荐使用工具，安利给大家一个专门用于处理SVG Symbols用的glup插件gulp-svg-symbols。下面我们就来以一个实例一步一步来使用下这个插件。首先新建一个文件夹，目录结构如下图所示：安装gulp-svg-symbols插件,若没有预先安装gulp请先行安装:gulpfile.js写入如下执行任务：执行任务导出svg-symbols：SVG Symbol可视化工具为了方便快速批量合成SVG图标生成 SVG Symbol，提高效率，我们开发了简易版的SVG Symbol可视化工具svg tool。svg tool使用打开后界面使用范围：主要支持单层结构SVG进行合并生产symbol，对于多层结构SVG合并注意手动修改对应颜色。功能：支持拖拽文件夹，自动遍历SVG文件合并生成symbol文件。提供两种导出方式，正常模式、修正模式。对文件viewBox大小不为整进行提示，可以选择自动修正模式系统自动放大处理。导出svg-symbol.svg、svg-symbol.js，可直接引入svg-symbol.js方便使用。svg tool下载地址：mac：/svg/svgtoolfile/svgtool-1.0.0.dmgwin32: /svg/svgtoolfile/svgtool-win32-ia32.zipwin64: /svg/svgtoolfile/svgtool-win32-x64.zip参考资料：Web 设计新趋势: 使用 SVG 代替 Web Icon FontAndroid微信上的SVG使用SVG中的Symbol元素制作Icon突袭HTML5之SVG 2D入门CSS Trick 中总结的 Icon Font使用缺陷svg理解与运用 关于本文作者：@高大师原文链接：/3No7V9 欢迎投稿到前端早读课投稿邮箱：
觉得不错，分享给更多人看到
前端早读课 微信二维码
分享这篇文章
7月19日 21:03
前端早读课 最新文章
前端早读课 热门文章您的邮件地址：错误详细描述：提交
自强学堂为提供的内容仅用于学习，测试和培训。实例可能为了更容易理解而简化。我们一直对教程，参考手册，在线实例保持修订，但是我们不能保证所有内容全部正确。通过使用本站进行学习随之而来的风险与本站无关。当使用本站时，代表您已接受了本站的使用条款和隐私条款。自强学堂是以学习和分享知识为目的，对任何法律问题及风险不承担任何责任。版权所有，保留一切权利。
自强学堂是用
技术开发的站点，托管在ECS
Copyright &
Powered by 自强学堂 All Rights Reserved.
JavaScriptGraphics编程Server SideWeb数据库XMLJavaScript服务器相关XMLHTML 字符CSS浏览器脚本服务器脚本XML 语言