svg

Baseline Widely available *

This feature is well established and works across many devices and browser versions. Itâs been available across browsers since â¨2015å¹´7æâ©.

* Some parts of this feature may have varying levels of support.

å¦æ svg ä¸æ¯æ ¹åç´ ï¼svg åç´ å¯ä»¥ç¨äºå¨å½åææ¡£ï¼æ¯å¦è¯´ï¼ä¸ä¸ª HTML ææ¡£ï¼ååµå¥ä¸ä¸ªç¬ç«ç svg çæ®µãè¿ä¸ªç¬ç«çæ®µæ¥æç¬ç«çè§å£ååæ ç³»ç»ã

ä½¿ç¨ä¸ä¸æ

ç±»å«	å®¹å¨åç´ ãç»æåç´
åè®¸çåå®¹	ä»»ææ°éãä»»æé¡ºåºçä¸ååç´ ï¼ å¨ç»åç´ æè¿°æ§åç´ å½¢ç¶åç´ ç»æååç´ æ¸ååç´ `<a>`ã`<clipPath>`ã`<filter>`ã`<foreignObject>`ã`<image>`ã`<marker>`ã`<mask>`ã`<pattern>`ã`<script>`ã`<style>`ã`<switch>`ã`<text>`ã`<view>`

ç¤ºä¾

æèä¸ä¸é¢ç svg å¾çï¼ä»£è¡¨æå¤§å©å½æï¼ï¼

xml

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg"
     width="150" height="100" viewBox="0 0 3 2">

  <rect width="1" height="2" x="0" fill="#008d46" />
  <rect width="1" height="2" x="1" fill="#ffffff" />
  <rect width="1" height="2" x="2" fill="#d2232c" />
</svg>

å®å¯ä»¥åå«å¨ html5 ææ¡£éï¼å¦ä¸æç¤ºï¼

html

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>HTML/SVG Example</title>
  </head>

  <body>
    <svg width="150" height="100" viewBox="0 0 3 2">
      <rect width="1" height="2" x="0" fill="#008d46" />
      <rect width="1" height="2" x="1" fill="#ffffff" />
      <rect width="1" height="2" x="2" fill="#d2232c" />
    </svg>
  </body>
</html>