在互聯(lián)網(wǎng)技術(shù)快速發(fā)展的現(xiàn)在,網(wǎng)站建設(shè)技術(shù)也日新月異,想像一下,透過(guò)程式如CSS與JS的技術(shù)就能夠改變圖形的樣貌,即時(shí)的呈現(xiàn)于你的網(wǎng)站上,而且維持一貫的高品質(zhì),這樣的夢(mèng)想其實(shí)已經(jīng)逐漸在網(wǎng)頁(yè)設(shè)計(jì)產(chǎn)業(yè)上發(fā)酵,因?yàn)樵?strong>成都網(wǎng)站建設(shè)公司看來(lái)SVG圖形格式已經(jīng)成為當(dāng)今網(wǎng)頁(yè)的圖形標(biāo)準(zhǔn)之一。
SVG是一個(gè)相當(dāng)新的圖形標(biāo)準(zhǔn),目前大的使用族群為網(wǎng)頁(yè)設(shè)計(jì)族群,所以一般的用戶(hù)沒(méi)有聽(tīng)過(guò)是很正常的。一般傳統(tǒng)常見(jiàn)的圖片格式,例如GIF、JPG與PNG格式,是以點(diǎn)陣為呈現(xiàn)的基礎(chǔ),然而SVG卻是以向量的方式呈現(xiàn)。
點(diǎn)陣與向量圖形格式的差異,在于點(diǎn)陣格式是以座標(biāo)為呈現(xiàn)視覺(jué)的基礎(chǔ),透過(guò)無(wú)數(shù)的座標(biāo)與色彩資訊,可以呈現(xiàn)出非常豐富的視覺(jué)色彩圖片,像是數(shù)位相機(jī)就是點(diǎn)陣圖形格式的主要族群。然而點(diǎn)陣的圖片經(jīng)過(guò)放大或是縮小,都會(huì)損失部份座標(biāo)的色彩資訊,導(dǎo)致圖片看起來(lái)會(huì)「劣化」。向量圖形格式的基礎(chǔ)并非座標(biāo)而是曲線(xiàn),雖然能夠呈現(xiàn)的色彩不若點(diǎn)陣豐富,但是卻能自由放大縮小且不影響品質(zhì)。
那么,為什么SVG向量圖片格式是網(wǎng)頁(yè)設(shè)計(jì)的新希望?主因在于點(diǎn)陣圖片的問(wèn)題在智慧手機(jī)網(wǎng)頁(yè)呈現(xiàn)上,出現(xiàn)了很大的問(wèn)題。由于智慧手機(jī)的顯示品質(zhì)不斷提升,用戶(hù)能夠看到比電腦更多的圖形細(xì)節(jié),若為了呈現(xiàn)圖片效果,勢(shì)必得使用高解析度的圖片卻會(huì)致使網(wǎng)站速度變差,若是為了提升手機(jī)效率降低圖片品質(zhì),網(wǎng)站的視覺(jué)效果就會(huì)變差,這樣的問(wèn)題也困擾了
成都網(wǎng)站建設(shè)公司的前端設(shè)計(jì)師,所幸SVG的問(wèn)世解決了這樣的問(wèn)題。
SVG六大優(yōu)點(diǎn)
任意縮放向量圖形的優(yōu)勢(shì)就是變形與縮放的條件下,皆不會(huì)影響視覺(jué)品質(zhì),這一點(diǎn)是點(diǎn)陣圖片格式無(wú)法做到的優(yōu)勢(shì)。有些設(shè)計(jì)師透過(guò)不同解析度的點(diǎn)陣圖片,透過(guò)CSS判斷螢?zāi)唤馕龆冗x擇呈現(xiàn)的圖片,但制作較為費(fèi)時(shí),SVG的優(yōu)勢(shì)在此就能好的發(fā)揮。
彈性運(yùn)用SVG是可以透過(guò)編碼的方式呈現(xiàn),因此可以任意崁在HTML文件內(nèi)。由于這樣的特性,開(kāi)啟網(wǎng)站時(shí)會(huì)將圖形視為DOM(Document Object Model)元件的一部分,瀏覽器會(huì)優(yōu)先處理,對(duì)于網(wǎng)頁(yè)的速度提升幫助很大。
取用元件SVG的外觀可以透過(guò)程式控制,控制的方式千變?nèi)f化,讓前端設(shè)計(jì)師揮灑更多創(chuàng)意。舉例來(lái)說(shuō):你可以透過(guò)CSS重復(fù)利用SVG的圖片元素于不同的地方,而且你可以只取用一部分的資源。這樣的效益,可以讓你的用戶(hù)以為你使用了好幾種設(shè)計(jì)元素,但其實(shí)只用了一種,如此網(wǎng)站有更豐富的呈現(xiàn)方式,使用的資源卻比過(guò)去更少。
效能提升先前提過(guò)SVG的格式為向量,所占用的資料量遠(yuǎn)比JPG與PNG點(diǎn)陣圖片來(lái)得小,這對(duì)于運(yùn)算力比較弱智慧手機(jī)來(lái)說(shuō)是更有利的。此外SVG能夠跨平臺(tái)使用,于多種標(biāo)準(zhǔn)瀏覽器呈現(xiàn),點(diǎn)陣與向量格式至今跨平臺(tái)都做得很好,當(dāng)然選擇效能高的格式是優(yōu)先考量的。
網(wǎng)站動(dòng)畫(huà)過(guò)去使用Flash的動(dòng)畫(huà)受到了平臺(tái)的限制,網(wǎng)站的動(dòng)畫(huà)發(fā)展受到了打擊。 SVG的出現(xiàn)讓網(wǎng)站動(dòng)畫(huà)出現(xiàn)了一線(xiàn)曙光,透過(guò)程式控制,設(shè)計(jì)師可以輕易做出基本的旋轉(zhuǎn)、縮放、變形、變色效果的SVG動(dòng)畫(huà),隨著技術(shù)日漸成熟,設(shè)計(jì)師也能制作出復(fù)雜的動(dòng)畫(huà)在
網(wǎng)頁(yè)設(shè)計(jì)上。
資源豐富目前越來(lái)越多的技術(shù)論壇分享SVG的相關(guān)圖像成形技術(shù),而商用軟體Illustrator以及免費(fèi)軟體Inkscape都能設(shè)計(jì)出絕美的SVG向量圖片,讓向量圖片的品質(zhì)不輸給點(diǎn)陣圖片。只有極為少數(shù)的老舊瀏覽器讀取SVG有問(wèn)題,大部分都能正常使用。
網(wǎng)頁(yè)題目:網(wǎng)站建設(shè)行業(yè)新風(fēng)向:SVG圖形格式六大優(yōu)勢(shì)
文章位置:http://redsoil1982.com.cn/news17/186017.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專(zhuān)注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷(xiāo)seo公司;服務(wù)項(xiàng)目有網(wǎng)站建設(shè)等
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話(huà):028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源:
創(chuàng)新互聯(lián)