浅谈SVG(可缩放的矢量图形)
前一段项目中用到了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(可缩放的矢量图形)的更多相关文章
- Qt3升至Qt4需要注意的几件事项浅谈
Qt3升至Qt4需要注意的几件事项浅谈 公司以前的项目是用Qt3写的,随着时间的推移慢慢显示出Qt3有多方面的限制,因此先公司决定用Qt4来改写这个项目,并为软件添加新功能,在此背景先编写此文章. 先 ...
- 浅谈JAVA集合框架
浅谈JAVA集合框架 Java提供了数种持有对象的方式,包括语言内置的Array,还有就是utilities中提供的容器类(container classes),又称群集类(collection cl ...
- 浅谈javascript函数节流
浅谈javascript函数节流 什么是函数节流? 函数节流简单的来说就是不想让该函数在很短的时间内连续被调用,比如我们最常见的是窗口缩放的时候,经常会执行一些其他的操作函数,比如发一个ajax请求等 ...
- 安卓开发_浅谈Android动画(四)
Property动画 概念:属性动画,即通过改变对象属性的动画. 特点:属性动画真正改变了一个UI控件,包括其事件触发焦点的位置 一.重要的动画类及属性值: 1. ValueAnimator 基本属 ...
- 浅谈OCR之Onenote 2010
原文:浅谈OCR之Onenote 2010 上一次我们讨论了Tesseract OCR引擎的用法,作为一款老牌的OCR引擎,目前已经开源,最新版本3.0中更是加入了中文OCR功能,再加上Google的 ...
- 【Unity游戏开发】浅谈 NGUI 中的 UIRoot、UIPanel、UICamera 组件
简介 马三最近换到了一家新的公司撸码,新的公司 UI 部分采用的是 NGUI 插件,而之前的公司用的一直是 Unity 自带的 UGUI,因此马三利用业余时间学习了一下 NGUI 插件的使用,并把知识 ...
- 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
[微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...
- 【ASP.NET MVC系列】浅谈Google Chrome浏览器(操作篇)(下)
ASP.NET MVC系列文章 [01]浅谈Google Chrome浏览器(理论篇) [02]浅谈Google Chrome浏览器(操作篇)(上) [03]浅谈Google Chrome浏览器(操作 ...
- 浅谈关于QT中Webkit内核浏览器
关于QT中Webkit内核浏览器是本文要介绍的内容,主要是来学习QT中webkit中浏览器的使用.提起WebKit,大家自然而然地想到浏览器.作为浏览器内部的主要构件,WebKit的主要工作是渲染.给 ...
随机推荐
- 表格排序(tablesorter)
1.在html页面的head中引用 <script src="/static/Bootstrap/js/jquery/jquery.tablesorter.min.js"&g ...
- Tmux 使用教程 on Fedora 28
Tmux 和 gun/screen 都是优秀的终端复用软件,它的关键的好处就是,保持ssh 登录连接session不中断,并且能支持分屏操作,具备丰富的命令行参数,可以进行动态布局和操作.可以看作为s ...
- Java 的布局管理器GridBagLayout的使用方法【图文说明】
https://www.cnblogs.com/taoweiji/archive/2012/12/14/2818787.html GridBagLayout是java里面最重要的布局管理器之一,可以做 ...
- Hadoop 本地模式安装
0. 说明 本地模式:使用的存储系统,是Linux系统 提前安装好 JDK 参考 CentOS7 安装 JDK 1. 将 Hadoop 的安装包通过 Xftp 发送到centos 用户的 home 目 ...
- PyQt5--Signal&Slot
# -*- coding:utf-8 -*- ''' Created on Sep 14, 2018 @author: SaShuangYiBing ''' import sys from PyQt5 ...
- postgresql+postgis+pgrouting实现最短路径查询(1)---线数据的处理和建立拓扑
准备一个线shp数据,并将其导入postgres里面,postgres安装postgis和pgrouting两个插件(方法见http://www.cnblogs.com/nidaye/p/455352 ...
- C#实现之(自动更新)
做开发的人,尤其是做客户端(C/S)系统开发的人都会遇到一个头疼的问题,就是软件的自动更新:系统发布后怎样自动的更新程序,在下有幸开发过一个自动更新程序,更新程序与任何宿主程序是完全独立的:只要在主程 ...
- luogu P2365 任务安排
嘟嘟嘟 如果常规dp,\(dp[i][j]\)表示前\(i\)个任务分\(j\)组,得到 \[dp[i][j] = min _ {k = 0} ^ {i - 1} (dp[k][j - 1] + (s ...
- gcd以及exgcd入门讲解
gcd就是最大公约数,gcd(x, y)一般用(x, y)表示.与此相对的是lcm,最小公倍数,lcm(x, y)一般用[x, y]表示. 人人都知道:lcm(x, y) = x * y / gcd( ...
- Common lang一些边界方法总结(好记性不如烂笔头,需要慢慢积累).一定要利用好现有的轮子,例如Apache common与Google Guava
好记性真是不如烂笔头啊!!!! 如下代码: List<String> list = new ArrayList<String>(); list.add("1" ...