您好,欢迎来到二三四教育网。
搜索
您的当前位置:首页SVG的使用

SVG的使用

来源:二三四教育网

SVG图片

一. SVG介绍

1.1. SVG概念解析

  • SVG全称: Scalable Vector Graphics, 可缩放矢量图形.
  • SVG是什么?
    • SVG是一种基于XML定义的二维矢量图形.
  • 什么是矢量图形?
    • 矢量图形是计算机图形学中用点/直线或者多边形等基于数学方程的几何图表示的图形.
  • 矢量图形有什么优势呢?
    • 我们来看一张图片, 分别是位图和矢量图形放大8倍的效果.


      img
    • 结果解析:
      • a是原图, b是矢量图形放大后的效果, c是位图放大后的效果.
      • 很明显矢量图形在图像放大后依然可以保持清晰, 而不会出现位图的像素点.

1.2. SVG到底是什么?

  • SVG到底是什么呢?
    • SVG是基于XML的语言,主要用于绘制二维图像。
    • 你可以通过编写代码来展示简单的或者是复杂的图形,例如:直线、曲线等等。
  • 为什么选择SVG呢?
    • SVG 是可伸缩的矢量图形,在浏览器中改变尺寸,其图形质量不会有所损失。
    • 相比其它位图,SVG图像文件更小,可压缩性更强。
    • SVG 可以被记事本等阅读器、搜索引擎访问。
    • SVG 图像中的文本是可选的,同时也是可复制的。
    • SVG 图像可以与DOM,CSS和JavaScript交互。
    • SVG 可以制作成整体或局部动画。
  • 浏览器是否支持呢?
    • 目前主流的浏览器对SVG的支持都非常好.
    • 除了IE8以及以下的浏览器版本.(可以使用polyfull来对旧版的浏览器支持).

二. SVG用法

2.1.SVG画出图片

  • 通常情况下, 不需要自己通过SVG画出图片, 而是自己生成就可以了.
  • 简单了解一下画出的过程:
    <svg class="svg1">
        <rect x="50px" y="50px" width="100px" height="100px"/>
    </svg>
    
  • 画出需要使用的箭头:
    <svg t="1504061791962" class="icon" style="" viewBox="0 0 1024 1024" version="1.1"  p-id="2922"  width="12" height="12">
        <path d="M908.288 127.488l-537.6 537.6-254.976-254.976L0 525.824l254.976 254.976 115.712 115.712L486.4 780.8l537.6-537.6z"
              fill="#ffffff" p-id="2923"></path>
    </svg>
    

2.2.查找SVG图片

  • 可以在iconfont中查找下载SVG图片


    image.png
  • 下载图片:


    image.png
  • 下载所有的图片, 选择下载代码.


    image.png

2.3.SVG图片使用

  • 基本使用:

    <!--1.用法一: 直接在HTML中嵌入使用-->
    <svg t="1504061791962" class="icon" style="" viewBox="0 0 1024 1024" width="12" height="12">
        <path d="M908.288 127.488l-537.6 537.6-254.976-254.976L0 525.824l254.976 254.976 115.712 115.712L486.4 780.8l537.6-537.6z"
              fill="#ffffff" p-id="2923"></path>
    </svg>
    
    <!--2.用法二: 通过.svg文件使用-->
    <!--<img src="imgs/me.svg" alt="消息">-->
    
    <!--3.用法三: 直接作为背景-->
    <div></div>
    
  • svg的js文件的使用

    • 导入JS文件
    • 通过use元素使用svg
  • 代码如下:

    <body>
        <svg>
            <use xlink:href="#icon-shouye"></use>
        </svg>
    </body>
    <script src="imgs/iconfont.js"></script>
    </html>
    

Copyright © 2019- how234.cn 版权所有 赣ICP备2023008801号-2

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务