×÷ÕߣºØýÃû ÎÄÕÂÀ´Ô´£º²»Ïê µã»÷Êý£º ÔÚÏßͶ¸å Ͷ¸åÖ¸ÄÏ  |
ÍøÒ³ÖÆ×÷WebjxÎÄÕ¼ò½é£ºSVGÈ«³ÆÊÇScalable Vector Graphics£¬Èç¹ûÄãʹÓùýadobe IllustratorµÄ»°£¬ÏàÐÅÄã¶ÔÕâÖÖÊÊÁ¿¸ñʽµÄͼƬ²¢²»Ä°Éý£¡ |
|

ÔÚÎÒÃÇ¿ªÊ¼Ê¹ÓÃSVGǰ£¬ÈÃÎÒÃÇÏÈÁ˽âһϠSVG£¬²¢ÇÒ½âÊÍÒ»ÏÂΪʲôʹÓÃSVG¡£
SVGÈ«³ÆÊÇScalable Vector Graphics£¬Èç¹ûÄãʹÓùýadobe IllustratorµÄ»°£¬ÏàÐÅÄã¶ÔÕâÖÖÊÊÁ¿¸ñʽµÄͼƬ²¢²»Ä°Éý£¡
ΪʲôʹÓÃSVG£¿
- Îļþ·Ç³£Ð¡
- Äܹ»ÎÞËðʧµÄËõ·Å³ß´ç
- ÔÚRetinaÏÔʾÆÁÉÏЧ¹û³¬°ô
- Äܹ»¿ØÖÆÍ¼Æ¬ÑùʽÉè¼Æ£¬ÀýÈ绥¶¯ºÍ¹ýÂËfilter
ä¯ÀÀÆ÷Ö§³Ö
- IE8¼°Æä¸üµÍ°æ±¾²»Ö§³Ö
- Android 2.3¼°Æä¸üµÍ°æ±¾²»Ö§³Ö
- ÆäËüä¯ÀÀÆ÷¶¼Ö§³Ö
Èç¹ûÄãÐèÒªÖ§³ÖÕâЩ°æ±¾µÄä¯ÀÀÆ÷µÄ»°£¬Äã¿ÉÒÔʹÓÃModernizr£¬ÈçÏ£º
if (!Modernizr.svg) {
$(".gblogo img").attr("src", "images/logo.png");
}
|
»òÕßʹÓÃÈçϸü¼òµ¥µÄ´úÂ룺
<img src="gblogo.svg" onerror="this.onerror=null; this.src="gblogo.png"">
|
SVGÎļþ×÷Ϊһ°ãͼƬʹÓÃ

Äã¿ÉÒÔ×÷ΪͼƬÀ´Ö±½ÓʹÓã¬ÈçÏ£º
<img src="logo.svg" alt="gbtags logo">
|
SVGÎļþ×÷Ϊ±³¾°Í¼Æ¬Ê¹ÓÃ
ÎÒÃÇÒ²¿ÉÒÔʹÓÃSVGͼƬ×÷Ϊ±³¾°Í¼Æ¬Ê¹Óã¬ÈçÏ£º
<a href="http://www.webjx.com" class="logo">
csswang.com
</a>
|
css´úÂë:
ʹÓÃÐÐÄÚSVG
Äã¿ÉÒÔÖ±½Ó½«SVG´úÂ뿽±´µ½bodyÖУ¬½«»á¿´µ½Í¼Æ¬£¬ÈçÏ£º
<body>
<!-- ½«SVG´úÂ뿽±´µ½´Ë´¦£¬½«»áÏÔʾͼƬ -->
</body>
|
ʹÓÃCSS¿ØÖÆSVG
Äã¿ÉÒÔʹÓÃCSSÀ´¿ØÖÆSVGÎļþ£¬ÏÂÃæ´úÂ뽫¿ØÖÆÊó±êÐü¸¡Ê±µÄͼƬ±³¾°ÑÕÉ«£º
<g class="logo" transform="translate(0.000000,500.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
|
ÒÔÉÏ´úÂ붨ÒåÁËÒ»¸ölogoµÄclass£¬È»ºóÎÒÃÇ¿ÉÒÔÔÚCSS¶¨ÒåÈçÏ£º
×¢ÒâSVGÖÐÎÒÃÇʹÓÃfill¶ø²»ÊÇbackgroundÀ´¶¨Òå±³¾°É«¡£
ÉõÖÁ¿ÉÒÔʹÓÃfilterÀ´¿ØÖÆÄ£ºý¶È£¬ÈçÏ£º
µ±ÄãʹÓÃÊó±êhoverͼƬʱ£¬»áÓÐÈçÏÂЧ¹û¡£

ÔÚÏßµ÷ÊÔ£ºhttp://www.gbtags.com/gb/debug/acfcf33e-db11-4b71-bdcb-d38e99fdcef3.htm
SVGÏà¹Ø¹¤¾ß
- ÔÚÏßתSVG¹¤¾ß£ºhttp://image.online-convert.com/convert-to-svg
- ΢ÈíµÄSVG filterЧ¹ûչʾ¹¤¾ß£ºhttp://ie.microsoft.com/testdrive/graphics/hands-on-css3/hands-on_svg-filter-effects.htm
- SVG¼õ·Ê¹¤¾ß£ºhttp://www.mobilefish.com/services/base64/base64.php
×ܽá
SVGÊÇÒ»¸ö·Ç³£Ç¿´óµÄͼƬ¸ñʽ£¬¿ÉÒÔ°ïÖúÄã¸ßЧµÄ´¦ÀíͼƬ£¬ÓµÓбÈJPG»òÕßPNG¸üÁé»îÇ¿´óµÄͼÐÎչʾ·½Ê½£¬ÏàÐÅÈç¹û¼ÓÒÔʱÈÕ£¬±Ø¶¨³ÉΪ×îÁ÷ÐеÄͼƬ´¦Àí·½Ê½£¡
|