Skip to content

[html] 第110天 什么是svg?说说svg有什么运用场景? #1021

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

第110天 什么是svg?说说svg有什么运用场景?

Activity

LinStan

LinStan commented on Aug 4, 2019

@LinStan

SVG是可缩放的矢量图形,是用XML来定义的图像。一个最基础的svg标签如下:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect width="300px" height="100px"  />
</svg>

经过缩放不会有失真的情况。
一般可以通过以下几种方式来使用:
<img src="test.svg"> 兼容性差
<embed src="test.svg" type="image/svg+xml">
<iframe src="test.svg“> 不推荐
<object data="test.svg" type="image/svg+xml">

svg详细属性可以参见svg参考手册

liuxiaole

liuxiaole commented on Aug 4, 2019

@liuxiaole

SVG是可缩放的矢量图形,是用XML来定义的图像。一个最基础的svg标签如下:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect width="300px" height="100px"  />
</svg>

经过缩放不会有失真的情况。
一般可以通过以下几种方式来使用:
<img src="test.svg"> 兼容性差
<embed src="test.svg" type="image/svg+xml">
<iframe src="test.svg“> 不推荐
<object data="test.svg" type="image/svg+xml">

svg详细属性可以参见svg参考手册

在 9012 年的今天, 这不算兼容性差吧?都支持 IE9+,iOS5+,Android 3.0+的啊。

svg in css bg: https://caniuse.com/#feat=svg-css
svg in html img element: https://caniuse.com/#feat=svg-img
inline svg: https://caniuse.com/#search=inline%20svg

EragonBubble

EragonBubble commented on Aug 5, 2019

@EragonBubble

SVG为可缩放的矢量图形,缩放不失真

censek

censek commented on Jan 21, 2020

@censek

可缩放矢量图形

D3.js

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @liuxiaole@haizhilin2013@EragonBubble@LinStan@censek

        Issue actions

          [html] 第110天 什么是svg?说说svg有什么运用场景? · Issue #1021 · haizlin/fe-interview