浅谈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的主要工作是渲染.给 ...
随机推荐
- Spine Skeleton Animation(2D骨骼动画)
骨骼动画 首先我们来看到底什么是骨骼动画: 在早期的机器上,渲染本身已经占用了很多CPU资源,因此,对于渲染,往往采取的是一种空间换时间的策略,以避免在模型的渲染中继续加重CPU的负担.帧动画模型在这 ...
- python基础学习1
一.python第一个程序 print("hello world") 二.变量的命名规则 1. 字母数字下划线组成 2. 不能以数字开头,不能含有特殊字符和空格 3. 不能以保留字 ...
- Qt在控件未显示时如何获取正确的控件尺寸
因为打算全屏显示一个对话框,而对话框内有几个QLabel的尺寸要在确定QLabel可用的最大尺寸后,再根据内容调整一次,所以在对话框构造函数内就想确定QLabel的最大尺寸,但因为QWidget::u ...
- System.IO.Path文件路径类
Path类的静态属性和方法,此类操作不影响物料文件. 属性 char a = System.IO.Path.VolumeSeparatorChar;//: char b = System.IO.Pat ...
- Django商城项目笔记No.5用户部分-注册接口-短信验证码
Django商城项目笔记No.4用户部分-注册接口-短信验证码 短信验证码也保存在redis里(sms_code_15101234567) 在views中新增SMSCodeView类视图,并且写出步骤 ...
- JQuery 学习笔记-2017.05.22
JQuery jQuery 是一个 JavaScript 函数库. jQuery 库包含以下特性: HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效 ...
- IOS和安卓不同浏览器常见bug
一.IOS自带safari浏览器 1.safari不支持fixed.input输入框 iOS下的 Fixed + Input 调用键盘的时候fixed无效问题 拖动页面时 header 和 foote ...
- linux下apache中httpd.conf的ServerAdmin 是设置的什么?
<VirtualHost 127.0.0.1:80> ServerAdmin ******@****.com DocumentRoot /home/aaa/sss ServerName s ...
- 流式套接字:基于TCP协议的Socket网络编程(案例2)
案例:在案例1的基础上实现一个服务器对应多个客户端(多线程),且获得每个客户端的IP. 线程代码: package com.yh.mySocket; import java.io.BufferedRe ...
- Docker技术入门与实战 第二版-学习笔记-4-Dockerfile外其他生成镜像的方法
其它生成镜像的方法 即除了标准地使用Dockerfile来生成镜像外,还有一些其他的方法 1)从 rootfs 压缩包导入 格式:docker import [选项] <文件>|<U ...