美文网首页
SVG笔记(一)

SVG笔记(一)

作者: 嘉bxixi | 来源:发表于2019-06-21 03:08 被阅读0次

SVG

何为svg 

可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式。它由万维网联盟制定,是一个开放标准。

通过svg可以使画面更加生动活泼,使客户舒心以及具有一定的观赏感。

在网页中使用svg有以下三种方式

1. svg就是一种图像格式,和jpeg,gif,png等位图图像格式有所不同,所以作为svg格式的图片更多的可以被应用到网页上,例如将svg文件设置为元素的src属性,或者是给任意的元素设置背景图像,或者是设置为CSS3的属性border-image。但是这种方式也存在不好的地方,就是浏览器在渲染svg图像的时候,会将svg描述的矢量图像转换成栅格图像用于显示,这就失去了svg的一部分功能,svg是文本描述的图像格式,可能会有一些引用文件,比如其他的图像文件,外部脚本或者是web字体文件,在使用这种方式渲染svg时大多数浏览器会忽略引用文件。

2. 元素可以将外部的文件嵌入到html中. 

3. 在网页中嵌入svg,最直接的方式是将svg文件的内容直接写入html文本中,这样在网页中不仅可以显示svg图像,还可以使用脚本控制,用css添加样式,可谓是最好的做法。

用文档表示的图像

1.SVG的根元素。svg的根元素有width、height和viewbox属性。它们是针对于在svg的长宽以及视框而规定的属性。width和height可以控制图形的长宽但viewbox可以控制其在网页上的显示视框,定义svg所有形状所需要遵守的坐标规则。例如视框值为 1 10 100 1000视为对矩形左上角和右下角的描述则用于描述左上角的位置前两个值被称为min-x和min-y,而后两个值为右下角对应宽度和高度。

2.命名是由** 图形编辑程序**定义的命名空间(xmlns是XML命名空间的缩写。)

3.标题title和描述标签desc增强svg的可读性。g元素可以作为一条绳子将图形所需要的图像进行捆绑,使一个图像完整化。

4.svg有path、rect、circle、ellipse、line、polyline和polygon这几种形状元素。

使用流行的图像编辑工具和服务创建SVG

1.AI、Bohemian Coding的Sketch、Inkscape以及一些线上免费使用的工具。

2.利用svg图标服务。图标网站提供

[图标库](http://www.fontawesome.com.cn/faicons/)

相关文章

  • SVG学习笔记

    SVG学习笔记 简介 SVG使用XML来描述二维图形和绘图程序的语言。 SVG形状 SVG在HTML页面 SVG ...

  • SVG 学习笔记

    SVG 学习笔记 SVG是什么 SVG 指可伸缩矢量图形 (Scalable Vector Graphics) S...

  • SVG笔记(一)

    SVG 何为svg 可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格...

  • SVG操作笔记

    Js操作svg笔记 js获取svg里面某个标签元素的位置信息 event.target.getBBox();返回该...

  • SVG 笔记

    1. svg的基础原型 矩形 圆形 椭圆 ...

  • SVG笔记

    一:什么是SVG? 对于SVG的定义如下: ①:SVG 指的是可伸缩矢量图形 (Scalable Vector G...

  • SVG的使用

    SVG图片 一. SVG介绍 1.1. SVG概念解析 SVG全称: Scalable Vector Graphi...

  • SVG学习笔记

    一. SVG是什么? SVG 意为可缩放矢量图形(Scalable Vectors Graphics)。 SVG ...

  • SVG 学习笔记

    SVG概述 SVG : 可缩放矢量图形,使用 XML 格式定义图像。 SVG in HTML 直接嵌入HTML文档...

  • SVG 学习笔记

    SVG 简介 SVG(Scalable Vector Graphics):可缩放矢量图形,是一种基于 XML 的用...

网友评论

      本文标题:SVG笔记(一)

      本文链接:https://www.haomeiwen.com/subject/mkceqctx.html