Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
haizhilin2013 opened this issue Aug 3, 2019 · 4 comments
Open
Labels
html html

Comments

@haizhilin2013
Copy link
Collaborator

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

@haizhilin2013 haizhilin2013 added the html html label Aug 3, 2019
@LinStan
Copy link

LinStan commented Aug 4, 2019

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
Copy link

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
Copy link

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

@censek
Copy link

censek commented Jan 21, 2020

可缩放矢量图形

D3.js

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
html html
Projects
None yet
Development

No branches or pull requests

5 participants