前一段项目中用到了svg图片就和其他的元素一样 直接引用就可以展示在页面上,因为项目紧张没有仔细的研究,最近在扩展自己的基础知识,偶然看到了这个东西,于是总结了一些博客园中关于这个svg的基础知识,只是自己基础的理解,没有更深层次的理解,但是并不想作大自然的搬运工,只是想把自己理解到的和大家分享一下,废话不多说,下面开始正式的讲解:

  1.SVG是啥

    我的理解就是一个文本文件,但是能够被浏览器渲染成一个图像

    那我们已经有常用的图片了为什么还要用这个生成图片呢?

      相对来说,他比普通的jpg/png图片占用的体积更小;而且能够随意的放大缩小并不会失真。以下是百度百科的解释,相信看起来会更加清晰:

      

  2.SVG怎么用:

    1. 直接在html文件中用SVG标签插入;<svg>....</svg>

    2. 也可以通过 img 等标签直接引用已经写好的SVG文件;

      <img src="svgDemo.svg">

    还有其他几种用法:放到css样式中/转化成base64

  3. SVG的语法:

    可以在W3school或者菜鸟教程上面看到详细的讲解;

  总结:

    实际项目中应该是视觉提供给我们一个SVG文件,然后我们负责把这个文件展示在页面当中,具体的图像绘制规则接触的比较少,但是我们可以查看对应的svg文件(只是一个文本文件, 通过文本编辑起就可以打开)来学习绘图的方法。

    学无止境,每一门学问都是值得深究的,但每个人的精力也是有限的,希望每个人都能用有限的精力去学习和创造更多的知识,只是因为热爱,而不是为了完成任务。    

浅谈SVG(可缩放的矢量图形)的更多相关文章

  1. Qt3升至Qt4需要注意的几件事项浅谈

    Qt3升至Qt4需要注意的几件事项浅谈 公司以前的项目是用Qt3写的,随着时间的推移慢慢显示出Qt3有多方面的限制,因此先公司决定用Qt4来改写这个项目,并为软件添加新功能,在此背景先编写此文章. 先 ...

  2. 浅谈JAVA集合框架

    浅谈JAVA集合框架 Java提供了数种持有对象的方式,包括语言内置的Array,还有就是utilities中提供的容器类(container classes),又称群集类(collection cl ...

  3. 浅谈javascript函数节流

    浅谈javascript函数节流 什么是函数节流? 函数节流简单的来说就是不想让该函数在很短的时间内连续被调用,比如我们最常见的是窗口缩放的时候,经常会执行一些其他的操作函数,比如发一个ajax请求等 ...

  4. 安卓开发_浅谈Android动画(四)

    Property动画 概念:属性动画,即通过改变对象属性的动画. 特点:属性动画真正改变了一个UI控件,包括其事件触发焦点的位置 一.重要的动画类及属性值: 1.  ValueAnimator 基本属 ...

  5. 浅谈OCR之Onenote 2010

    原文:浅谈OCR之Onenote 2010 上一次我们讨论了Tesseract OCR引擎的用法,作为一款老牌的OCR引擎,目前已经开源,最新版本3.0中更是加入了中文OCR功能,再加上Google的 ...

  6. 【Unity游戏开发】浅谈 NGUI 中的 UIRoot、UIPanel、UICamera 组件

    简介 马三最近换到了一家新的公司撸码,新的公司 UI 部分采用的是 NGUI 插件,而之前的公司用的一直是 Unity 自带的 UGUI,因此马三利用业余时间学习了一下 NGUI 插件的使用,并把知识 ...

  7. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  8. 【ASP.NET MVC系列】浅谈Google Chrome浏览器(操作篇)(下)

    ASP.NET MVC系列文章 [01]浅谈Google Chrome浏览器(理论篇) [02]浅谈Google Chrome浏览器(操作篇)(上) [03]浅谈Google Chrome浏览器(操作 ...

  9. 浅谈关于QT中Webkit内核浏览器

    关于QT中Webkit内核浏览器是本文要介绍的内容,主要是来学习QT中webkit中浏览器的使用.提起WebKit,大家自然而然地想到浏览器.作为浏览器内部的主要构件,WebKit的主要工作是渲染.给 ...

随机推荐

  1. 华为交换机VRRP 综合配置示例

    组网需求: 楼层1和楼层2分别通过两条线路做冗余接入交换机(本示例只考虑vrrp,暂不考虑其他方面).当其中一段链路故障时,能通过另外一条链路传输. 配置信息: <lsw9>dis cu ...

  2. Hexo搭建博客笔记

    Hexo搭建(建议看ppt:https://files.cnblogs.com/files/-SANG/%E4%BD%A0%E7%9A%84%E7%8C%AB.pptx ) 安装Git https:/ ...

  3. JFreeChart绘制XY折线图(工具类设计)

    准备用Java写通信的仿真平台作为毕业设计,相比matlab绘图,Java绘图需要自己去写很多工具类,博主在这采用了JFreeChart的开源解决方案,摸索着自己写了一个XY折线图工具类,话不多说贴源 ...

  4. 【Ansible 文档】【译文】Ad-Hoc 命令介绍

    Introduction To Ad-Hoc Commands Ad-Hoc命令介绍 下面的例子展示了如何使用 /usr/bin/ansible 来运行ad hoc任务. 什么是ad hoc命令? 一 ...

  5. Linux chmod +755和chmod +777 各是什么意思呢?

    你可以在linux终端先输入ls -al,可以看到如: -rwx-r--r-- (一共10个参数)第一个跟参数跟chmod无关,先不管.2-4参数:属于user5-7参数:属于group8-10参数: ...

  6. Spark项目之电商用户行为分析大数据平台之(五)实时数据采集

  7. 21天,搞定软件测试从业者必备的Linux命令

    开始之前,先同步一个结论: 对于软件测试从业者,如果你至今为止,还不懂Linux,或者完全没有接触Linux ,这是一件很危险和恐怖的事 . 此刻.现在.果断,学习Linux命令 . 如果你工作中,完 ...

  8. javascript实现拖曳与拖放图片

    javascript实现拖曳与拖放图片 其实对于drag和drop拖曳与拖放事件IE很早以前就支持这个操作了,我们先来看看HTML5中新增的拖放API. 在HTML5中想要实现拖放操作,至少要做以下操 ...

  9. JS实现网页换肤功能效果

    网页换肤的基本原理 使用 JS 切换对应的 CSS 样式表.例如hao123首页的右上方就有网页换肤功能.除了切换 CSS 样式表文件之外,通常的网页换肤还需要通过 Cookie 来记录用户之前更换过 ...

  10. Ubuntu软件的安装和使用

    windows 系统有很多的截图的软件 比如 QQ 浏览器什么的,但是ubuntu 还是很少的截图软件的接下来介绍一下ubuntu 的截图软件 1.键盘上的alt+printscreen 可以全屏幕的 ...