HTML SVG
HTML5? ??? SVG? ?????.
SVG? ??????
SVG? Scalable Vector Graphics(Scalable Vector Graphics)? ?????.
SVG? Vector ???? ???? ???? ? ?????.
SVG? XML ??? ???? ???? ?????
SVG ???? ????? ??? ???? ??? ??? ?? ????.
SVG? World Wide Web Consortium? ?????
SVG? ??
?? ??? ??(?: JPEG, GIF)? ??? ? SVG ??? ??? ??? ????.
SVG ???? ??? ???? ?? ? ??? ? ????.
SVG ???? ??, ???, ???? ?? ?? ?? ??
SVG? ?? ??
SVG ???? ?? ?????? ???? ?? ??
SVG? ??? ?? ?? ?? ?? ??
???? ??
??? ??? SVG? Explorer 9+, Firefox, Opera?? ?????. , ??, ???.
SVG? HTML ???? ?? ??
HTML5??? SVG ??? HTML ???? ?? ??? ? ????:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"> </svg> </body> </html>
???? ?? ??:
SVG ????? ?? ??? ??? SVG ????? ?????.
SVG? ???? ???
SVG? ?????. XML? ???? 2D ???? ?????.
Canvas? JavaScript? ???? 2D ???? ????.
SVG? XML? ???? ?? ?? SVG DOM? ?? ??? ????? ? ??? ?????. JavaScript ??? ???? ??? ??? ? ????.
SVG??? ??? ?? ??? ??? ?????. SVG ??? ??? ???? ????? ???? ???? ??? ? ????.
???? ?? ??? ??????. ?????? ???? ???? ? ?? ????? ??? ? ? ????. ??? ???? ????? ???? ? ?? ??? ???? ?? ??? ?? ??? ???.
???? SVG? ??
?? ??? ???? SVG? ? ?? ???? ?? ????.
| Canvas | SVG |
依賴分辨率 | 不依賴分辨率 |
不支持事件處理器 | 支持事件處理器 |
弱的文本渲染能力 | 最適合帶有大型渲染區(qū)域的應(yīng)用程序（比如谷歌地圖） |
?? ???? .png ?? .jpg ???? ???? ?? 能夠以 .png 或 .jpg 格式保存結(jié)果圖像 復(fù)雜度高會減慢渲染速度（任何過度使用 DOM 的應(yīng)用都不快） 最適合圖像密集型的游戲， 其中的許多對象會被頻繁 重繪 不適合游戲應(yīng)用 | < p> ???? ??? ??? ??? ?????(DOM? ???? ???? ??????? ??? ????). | ||||
??? ???? ??? ???? ?? ??? ?? ?????. |
?? ???????? ???? ?? |
