[SVG] SVG向量圖的使用

Posted on Edited on In Views: Disqus:

 

一個嵌入SVG圖檔範例

<html>
<body>
    <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNzEiIGhlaWdodD0iMTgwIj48cmVjdCB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgZmlsbD0iI2VlZSIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9Ijg1LjUiIHk9IjkwIiBzdHlsZT0iZmlsbDojYWFhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjEycHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+MTcxeDE4MDwvdGV4dD48L3N2Zz4=">
</body>
</html>

黃色部分是經過base64編碼過的

將之解碼後為

<svg xmlns="http://www.w3.org/2000/svg" width="171" height="180">
    <rect width="171" height="180" fill="#eee" />
    <text text-anchor="middle" x="85.5" y="90" style="fill:#aaa;font-weight:bold;font-size:12px;font-family:Arial,Helvetica,sans-serif;dominant-baseline:central">
        171x180
    </text>
</svg>

也就是說可另寫為

<html>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" width="171" height="180">
        <rect width="171" height="180" fill="#eee" />
        <text text-anchor="middle" x="85.5" y="90" style="fill:#aaa;font-weight:bold;font-size:12px;font-family:Arial,Helvetica,sans-serif;dominant-baseline:central">
            171x180
        </text>
    </svg>
</body>
</html>

 

参考資料：

Hands On: SVG Filter Effects

convertstring

SVG Tutorial