浅谈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的主要工作是渲染.给 ...
随机推荐
- python Pipe 双管道通信
管道:是python多进程中一种交换数据的方式 from multiprocessing import Process,current_process,Queue,Pipe import time i ...
- 等我干IT发财了,就和你离婚。。。。。
01 “等我干IT发财了,就和你离婚” 他淡淡地说 听完后,她心里暖暖的, 她想,没有比这更天长地久. 海枯石烂的承诺了. ——2018年度最佳微小说奖 02 “等我干IT发财了,我就买房和你结婚.” ...
- 深入浅出Web开发——Fiddler
环境配置: 如果使用Chrome,Fiddler无法捕捉HTTP请求信息,请检查Chrome是否使用SwitchyOmega插件.
- Centos7 Nginx 开机启动
Centos 系统服务脚本目录: 用户(user) 用户登录后才能运行的程序,存在用户(user) /usr/lib/systemd/ 系统(system) 如需要开机没有登陆情况下就能运行的程序,存 ...
- BZOJ1121:[POI2008]激光发射器SZK(乱搞)
Description 多边形相邻边垂直,边长为整数,边平行坐标轴.要在多边形的点上放一些激光发射器和接收器.满足下列要求: 1发射器和接收器不能放置在同一点: 2发射器发出激光可以沿壁反射,最终到达 ...
- ingress 代理方式
一: 单域名 + 多工程 apiVersion: extensions/v1beta1 kind: Ingress metadata: name: test annotations: nginx.in ...
- 【webGL】
1.类型化数组 WebGL设计复杂的计算,需要提前知道数值的精度,而标准的javascript数值无法满足需要.WebGL引入了一个概念,叫类型化数组. ArrayBuffer的类型,表示的只是内存中 ...
- javascrpt each map
each方法: 定义一个空数组,通过each方法,往数组添加ID值:最后将数组转换成字符串后,alert这个值: $(function(){ var arr = []; $(":checkb ...
- 蓝桥杯 历届试题 网络寻路(dfs搜索合法路径计数)
X 国的一个网络使用若干条线路连接若干个节点.节点间的通信是双向的.某重要数据包,为了安全起见,必须恰好被转发两次到达目的地.该包可能在任意一个节点产生,我们需要知道该网络中一共有多少种不同的转发路径 ...
- python argparse模块:命令行选项及参数解析
位置参数:给一个例子: import argparse parser = argparse.ArgumentParser() parser.add_argument("echo") ...