发表新帖
发表新帖

How to use .svg files in a webpage?

前端 未结
关注
7 1343
长情又很酷
长情又很酷 2021-01-30 19:37

I want to know how can one actually use a .svg file In a web page?

相关标签:
7条回答
  • 粉色の甜心
    2021-01-30 20:15

    Raphaël—JavaScript Library. Nice javascript library that is using svg, and gives you a large range of effects!

    Also supports most browsers, including IE

    0 讨论(0)
  • 情话喂你
    2021-01-30 20:17

    If all you want to do is to place an SVG image such as a logo or static diagram, you just need to be careful to provide a fallback for older versions of Internet Explorer (i.e. versions 8 and earlier).

    The best and simplest method I've found is to use a .png or .jpg for your fallback, placed using a normal img tag. You then wrap the img tag in an object tag, using the data attribute to place the SVG.

    <object data="/path-to/your-svg-image.svg" type="image/svg+xml">
  <img src="/path-to/your-fallback-image.png" />
</object>

    The img fallback is only loaded and used if the browser doesn't understand SVG.

    0 讨论(0)
  • 南方客
    2021-01-30 20:18

    http://www.w3schools.com/svg/svg_inhtml.asp

    The best example:

    <embed src="rect.svg" width="300" height="100"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
    0 讨论(0)
  • 南方客
    2021-01-30 20:18

    I'd like to agree with the answer from "code-zoop". Although this technically doesn't answer your question, it might also be a solution: enter the relevant data straight into the HTML. Either directly as an svg element, or by using Raphaël-JS.

    From w3c-schools:

    SVG is all suported in In Firefox, Internet Explorer 9, Google Chrome, Opera, and Safari you can

    <html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red"/>
</svg>

</body>
</html>

    (end of quote)

    And to think even more outside the box, depending on how you want to use it, you can also put your 1-color graphics in a webfont. (see for example iconmoon.io )

    0 讨论(0)
  • 忘掉有多难
    2021-01-30 20:20

    See svgweb quickstart and the svgweb project homepage for something that works in all browsers including IE (requires flash plugin).

    There are many ways to include an existing svg file:

    • <img src="your.svg"/>
    • <object data="your.svg"/>
    • <iframe src="your.svg"/>
    • <embed src="your.svg"/>
    • <div style="background:url(your.svg)">...</div>
    0 讨论(0)
  • 时光说笑
    2021-01-30 20:27

    Caspar's approach is the proper one. However, I would move the fallback to the CSS, since you probably want to apply some styles to the svg file itself...

    <object data="/path-to/your-svg-image.svg" type="image/svg+xml"  class="logo"> </object>

    CSS

    .no-svg .logo {
  width: 99px;
  height: 99px;
  background-image: url(/path-to/your-png-image.png);
}`
    0 讨论(0)
 看不清?
提交回复
热议问题