2017年1月發(fā)布的Chrome 56瀏覽器開始把收集密碼或信用卡數(shù)據(jù)的HTTP頁面標(biāo)記為“不安全”，若用戶使用2017年10月推出的Chrome 62，帶有輸入數(shù)據(jù)的HTTP頁面和所有以無痕模式瀏覽的HTTP頁面都會(huì)被標(biāo)記為“不安全”，此外，蘋果公司強(qiáng)制所有iOS App在2017年1月1日前使用HTTPS加密。
HTTP和HTTPS發(fā)展歷史
什么是HTTP?
超文本傳輸協(xié)議，是一個(gè)基于請(qǐng)求與響應(yīng)，無狀態(tài)的，應(yīng)用層的協(xié)議，?；赥CP/IP協(xié)議傳輸數(shù)據(jù)，互聯(lián)網(wǎng)上應(yīng)用最為廣泛的一種網(wǎng)絡(luò)協(xié)議,所有的WWW文件都必須遵守這個(gè)標(biāo)準(zhǔn)。設(shè)計(jì)HTTP的初衷是為了提供一種發(fā)布和接收HTML頁面的方法。
什么是HTTPS？
《圖解HTTP》這本書中曾提過HTTPS是身披SSL外殼的HTTP。HTTPS是一種通過計(jì)算機(jī)網(wǎng)絡(luò)進(jìn)行安全通信的傳輸協(xié)議，經(jīng)由HTTP進(jìn)行通信，利用SSL/TLS建立全信道，加密數(shù)據(jù)包。HTTPS使用的主要目的是提供對(duì)網(wǎng)站服務(wù)器的身份認(rèn)證，同時(shí)保護(hù)交換數(shù)據(jù)的隱私與完整性。
PS:TLS是傳輸層加密協(xié)議，前身是SSL協(xié)議，由網(wǎng)景公司1995年發(fā)布，有時(shí)候兩者不區(qū)分。
HTTP VS HTTPS
HTTP特點(diǎn)：
1、無狀態(tài)：協(xié)議對(duì)客戶端沒有狀態(tài)存儲(chǔ)，對(duì)事物處理沒有“記憶”能力，比如訪問一個(gè)網(wǎng)站需要反復(fù)進(jìn)行登錄操作
2、無連接：HTTP/1.1之前，由于無狀態(tài)特點(diǎn)，每次請(qǐng)求需要通過TCP三次握手四次揮手，和服務(wù)器重新建立連接。比如某個(gè)客戶機(jī)在短時(shí)間多次請(qǐng)求同一個(gè)資源，服務(wù)器并不能區(qū)別是否已經(jīng)響應(yīng)過用戶的請(qǐng)求，所以每次需要重新響應(yīng)請(qǐng)求，需要耗費(fèi)不必要的時(shí)間和流量。
3、基于請(qǐng)求和響應(yīng)：基本的特性，由客戶端發(fā)起請(qǐng)求，服務(wù)端響應(yīng)
4、簡(jiǎn)單快速、靈活
5、通信使用明文、請(qǐng)求和響應(yīng)不會(huì)對(duì)通信方進(jìn)行確認(rèn)、無法保護(hù)數(shù)據(jù)的完整性
HTTPS特點(diǎn)：
基于HTTP協(xié)議，通過SSL或TLS提供加密處理數(shù)據(jù)、驗(yàn)證對(duì)方身份以及數(shù)據(jù)完整性保護(hù)
通過抓包可以看到數(shù)據(jù)不是明文傳輸，而且HTTPS有如下特點(diǎn)：
1、內(nèi)容加密：采用混合加密技術(shù)，中間者無法直接查看明文內(nèi)容
2、驗(yàn)證身份：通過證書認(rèn)證客戶端訪問的是自己的服務(wù)器
3、保護(hù)數(shù)據(jù)完整性：防止傳輸?shù)膬?nèi)容被中間人冒充或者篡改
混合加密：結(jié)合非對(duì)稱加密和對(duì)稱加密技術(shù)。客戶端使用對(duì)稱加密生成密鑰對(duì)傳輸數(shù)據(jù)進(jìn)行加密，然后使用非對(duì)稱加密的公鑰再對(duì)秘鑰進(jìn)行加密，所以網(wǎng)絡(luò)上傳輸?shù)臄?shù)據(jù)是被秘鑰加密的密文和用公鑰加密后的秘密秘鑰，因此即使被黑客截取，由于沒有私鑰，無法獲取到加密明文的秘鑰，便無法獲取到明文數(shù)據(jù)。
數(shù)字摘要：通過單向hash函數(shù)對(duì)原文進(jìn)行哈希，將需加密的明文“摘要”成一串固定長(zhǎng)度(如128bit)的密文，不同的明文摘要成的密文其結(jié)果總是不相同，同樣的明文其摘要必定一致，并且即使知道了摘要也不能反推出明文。
數(shù)字簽名技術(shù)：數(shù)字簽名建立在公鑰加密體制基礎(chǔ)上，是公鑰加密技術(shù)的另一類應(yīng)用。它把公鑰加密技術(shù)和數(shù)字摘要結(jié)合起來，形成了實(shí)用的數(shù)字簽名技術(shù)。
收方能夠證實(shí)發(fā)送方的真實(shí)身份；
發(fā)送方事后不能否認(rèn)所發(fā)送過的報(bào)文；
收方或非法者不能偽造、篡改報(bào)文。
非對(duì)稱加密過程需要用到公鑰進(jìn)行加密，那么公鑰從何而來？其實(shí)公鑰就被包含在數(shù)字證書中，數(shù)字證書通常來說是由受信任的數(shù)字證書頒發(fā)機(jī)構(gòu)CA，在驗(yàn)證服務(wù)器身份后頒發(fā)，證書中包含了一個(gè)密鑰對(duì)（公鑰和私鑰）和所有者識(shí)別信息。數(shù)字證書被放到服務(wù)端，具有服務(wù)器身份驗(yàn)證和數(shù)據(jù)傳輸加密功能。
什么是HTTPS?HTTP和HTTPS有什么區(qū)別？最先出現(xiàn)在南通力行網(wǎng)絡(luò)科技有限公司。
]]>CSS3提供了一個(gè)新的屬性集合，用這幾個(gè)屬性可以嵌入圖片形式的邊框。這樣，邊框就可以自定義了。
1.border-image-source//引入背景圖片地址
2.border-image-slice//切割引入背景圖片
3.border-image-width//邊框圖片的寬度
4.border-image-repeat//邊框背景圖片的排列方式
5.border-image-outset//邊框背景向外擴(kuò)張
6.border-image//上面五個(gè)屬性的簡(jiǎn)寫方式
首先，用Photoshop軟件分析一下這個(gè)標(biāo)準(zhǔn)九宮格的總體大小和每個(gè)格子的大小。
最終得出圖片總大小為81px正方形，四個(gè)角的大小為27px的正方形，其余五個(gè)角也是27px。那么
div {
margin-left:50px;
margin-top:50px;
width: 400px;
height: 400px;
background:green;
border-image-source: url(border.png);
border-image-width: 27px; //紅色方格的大小
border-image-slice: 27; //保證邊角只切一個(gè)方格（紅色方格）
border-image-outset: 27px; //該邊框包圍在div的外部
border-image-repeat: round; //除四角之外，中間部分的顯示方式}
四個(gè)角設(shè)定好之后，我們要設(shè)定四個(gè)變的顯示排列方式。使用border-image-repeat屬性，有四個(gè)值提供使用
stretch指定用拉伸方式填充邊框背景圖。默認(rèn)值。
repeat指定用平鋪方式來填充邊框背景圖。當(dāng)圖片碰到邊界時(shí)，如果超過則被截?cái)唷?/p>
round指定用平鋪方式來填充邊框背景圖。圖片會(huì)根據(jù)邊框的尺寸動(dòng)態(tài)調(diào)整圖片的大小，直至正好可以鋪滿整個(gè)邊框。
space指定用平鋪方式來填充邊框背景圖。圖片會(huì)根據(jù)邊框的尺寸動(dòng)態(tài)調(diào)整圖片的之間的間距，直至正好可以鋪滿整個(gè)邊框。
//拉伸方式填充，當(dāng)然，通過上右下左設(shè)置四個(gè)邊均可
border-image-repeat:stretch;
//平鋪填充，超過則被截?cái)?/p>
border-image-repeat:repeat;
//平鋪填充，動(dòng)態(tài)調(diào)整圖片大小直至鋪滿
border-image-repeat:round;
//平鋪填充，動(dòng)態(tài)調(diào)整圖片的間距直至鋪滿
border-image-repeat:space;
//另一個(gè)按鈕的小例子
div{
margin-left:50px;
margin-top:50px;
width: 200px;
height: 40px;
border-image-source: url(button.png);
border-image-width: 10px;
border-image-outset:10px;
border-image-slice: 10 fill;}
簡(jiǎn)寫和版本
//border-image簡(jiǎn)寫格式很簡(jiǎn)單，具體如下：
border-image：<‘border-image-source’>||<‘border-image-slice’>[/<‘border-image-width’>|/<‘border-image-width’>?/<‘border-image-outset’>]?||<‘border-image-repeat’>
//以上是手冊(cè)上摘錄的，轉(zhuǎn)換成實(shí)際格式如下：
margin-left:50px;
margin-top:50px;
width: 400px;
height: 400px;
background:green;
border-image: url(border.png) 27/27px/27px round;//兼容加上前綴
-webkit-border-image:url(border.png) 27/27px round;
-moz-border-image:url(border.png) 27/27px round;
-o-border-image:url(border.png)27/27px round;
border-image:url(border.png) 27/27px round
CSS邊框樣式：CSS3(border-image-*)邊框圖片效果最先出現(xiàn)在南通力行網(wǎng)絡(luò)科技有限公司。
]]>CSS border 屬性允許您指定元素邊框的樣式、寬度和顏色。
CSS邊框 border
1.設(shè)置邊框樣式：
border-style:樣式；
可選的樣式有：none 無邊框 ，dotted 虛線邊框 ，dashed 虛線邊框 ，solid 實(shí)線邊框 ，double 雙邊框 ，groove 凹槽邊框， ridge 壟狀邊框 ，inset 嵌入邊框 ，outset 外凸邊框 ，hidden 隱藏邊框
border-top-style:none; 上邊框樣式
border-bottom-style:solid; 下邊框樣式
border-left-style: dashed； 左邊框樣式
border-right-style:double; 右邊框樣式
border-style:dotted solid dashed double; （上右下左邊框）
2.設(shè)置邊框?qū)挾龋?/strong>
邊框?qū)挾炔荒軉为?dú)設(shè)置，必須在設(shè)置了邊框樣式后寬度才會(huì)生效
border-width:1px; 寬度為1像素的邊框
border-top-width:15px; 上邊框15像素
border-bottom-width:15px; 下邊框
border-left-width:15px; 左邊框
border-right-width:15px; 右邊框
CSS輪廓 outline
outline（輪廓）是繪制于元素周圍的一條線，位于邊框邊緣外圍，可以起到突出元素的作用 可以設(shè)置的屬性有 顏色 樣式 寬度
1、輪廓顏色
outline-color：red；
2.輪廓樣式
outline-style：樣式值；
樣式值參考如下：
none 默認(rèn)。定義無輪廓。
dotted 定義點(diǎn)狀的輪廓。
dashed 定義虛線輪廓。
solid 定義實(shí)線輪廓。
double 定義雙線輪廓。雙線的寬度等同于 outline-width 的值。
groove 定義 3D 凹槽輪廓。此效果取決于 outline-color 值。
ridge 定義 3D 凸槽輪廓。此效果取決于 outline-color 值。
inset 定義 3D 凹邊輪廓。此效果取決于 outline-color 值。
outset 定義 3D 凸邊輪廓。此效果取決于 outline-color 值。
3、輪廓寬度：
outline-width：寬度值；
可能出現(xiàn)的寬度值參考如下；
thin 規(guī)定細(xì)輪廓。
medium 默認(rèn)。規(guī)定中等的輪廓。
thick 規(guī)定粗的輪廓。
length 允許您規(guī)定輪廓粗細(xì)的值。
CSS外邊距 margin
1、什么是外邊距
外邊距控制塊級(jí)元素之間的距離，他們是透明不可見的，包括margin-top, margin-right, margin-bottom, margin-left
2.外邊距的寫法
（1）margin: 40px 30px 20px 10px; 上右下左
（2）margin:30px 40px 20px; 上 左右 下
（3）margin:30px 40px; 上下 左右
（4）margin:40px; 上下左右
3.可能的值
（1）length 規(guī)定具體單位記的外邊距長(zhǎng)度
（2）% 基于父元素的寬度的外邊距的長(zhǎng)度
（3）auto 瀏覽器計(jì)算外邊距
四、CSS內(nèi)邊距padding
1.什么是內(nèi)邊距
控制塊級(jí)元素內(nèi)部content和border之間的距離
2、常用寫法
（1）padding: 40px 30px 20px 10px; 上右下左
（2）padding:30px 40px 20px; 上 左右 下
（3）padding:30px 40px; 上下 左右
（4）padding:40px; 上下左右
3.可能取的值
（1）length 規(guī)定具體單位記的外邊距長(zhǎng)度
（2）% 基于父元素的寬度的外邊距的長(zhǎng)度
（3）auto 瀏覽器計(jì)算外邊距
CSS2/CSS3邊框樣式：border有哪些屬性值？最先出現(xiàn)在南通力行網(wǎng)絡(luò)科技有限公司。
]]>背景樣式主要包括背景顏色和背景圖像。
1.background-color 設(shè)置元素的背景顏色。
background-color：顏色/transparent
說明：transparent是全透明
顏色值（顏色名/RGB/十六進(jìn)制）
背景區(qū)包括內(nèi)容、內(nèi)邊距（padding）和邊框（border）、不包含外邊距（margin）
2.background-image 設(shè)置元素的背景圖片。
background-image：url(圖片地址)/none
說明：url地址可以是相對(duì)地址也可以是絕對(duì)地址
元素的背景占據(jù)了元素的全部尺寸，包括內(nèi)邊距和邊框，但不包括外邊距
默認(rèn)地，背景圖像位于元素的左上角，并在水平和垂直方向上重復(fù)。
當(dāng)即設(shè)置了背景圖片又設(shè)置了背景顏色時(shí)，背景圖片會(huì)覆蓋背景顏色
3.background-position 設(shè)置背景圖片的起始位置
A. 這個(gè)屬性只能應(yīng)用于塊元素和替換元素，替換元素包括img、input、textarea、select和object。
B. 該屬性值可以設(shè)置為關(guān)鍵字，也可以設(shè)置為兩個(gè)像素值（”20px 30px“），設(shè)置為關(guān)鍵字時(shí)表示背景圖像相對(duì)于元素的左上角的距離（分別是水平距離和垂直距離）。
C. 該屬性值可取的關(guān)鍵字為：
top left：左上（表示圖像位于元素的左上角，下面的類似）
top center：靠上居中
top right：右上
left center：靠左居中
center center：正中
right center：靠右居中
bottom left：左下
bottom center：靠下居中
bottom right：右下
4.background-attachment 背景圖像是否固定或者隨著頁面的其余部分滾動(dòng)
background-attachment：scroll/fixed
scroll： 默認(rèn)值，隨著圖片的滾動(dòng)而滾動(dòng)
fixed：當(dāng)頁面的其余部分滾動(dòng)時(shí)，背景圖片不會(huì)移動(dòng)
5.background-repeat 設(shè)置背景圖像是否重復(fù)及如何重復(fù)
該屬性可以取如下值：
??????? no-repeat：不平鋪
??????? repeat：在水平方向（x軸）和垂直方向（y軸）同時(shí)平鋪，默認(rèn)值
??????? repeat-x：在水平方向（x軸）平鋪
??????? repeat-y：在垂直方向（y軸）平鋪
6.background 簡(jiǎn)寫屬性，作用是將背景屬性設(shè)置在一個(gè)聲明中。
background：[background-color] [background-image] [background-repeat] [background-attachment] [background-position]
說明：各值之間用空格分割，不分先后順序
示例代碼
<html>
<head lang="en">
<meta charset="UTF-8">
<title>背景屬性</title>
<style>
body{
height: 1000px;
/*背景顏色 默認(rèn)為透明 transparent*/
background-color: red;
/*background-color: #ff0000;*/
/*background-color: rgb(255,0,0);*/
/*background-color: rgba(255,0,0,.5);*/
/*背景圖片 默認(rèn)水平垂直平鋪*/
/*background-image: url("images/pic2.jpeg");*/
/*背景圖片平鋪*/
/*background-repeat: no-repeat;*/
/*background-repeat: repeat-x;*/
/*background-repeat: repeat-y;*/
/*背景圖片的大小*/
/*background-size:1000px ;*/
/*background-size: 100% 100%;*/
/*背景圖片固定*/
/*background-attachment:fixed ;*/
background:red url("images/pic2.jpeg") no-repeat fixed ;
background-size: 100% 100%;
}
.box{
width: 800px;
height: 600px;
/*background-color: rgba(255,255,255,.5);
background-image: url("images/pic1.jpg");
background-repeat: no-repeat;*/
/*background-size: contain;*/
background: rgba(255,255,255,.5) url("images/pic1.jpg") no-repeat;
/*背景圖片定位*/
/*background-position: x y;*/
/*當(dāng)只有水平方向，垂直方向默認(rèn)居中*/
/*background-position: 30px 30px;*/
/*background-position: 30px;*/
/*background-position: right bottom;*/
/*background-position: center;*/
/*簡(jiǎn)寫為*/
/*background：顏色 圖片 平鋪 大小 定位 固定;*/
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
CSS背景樣式：background屬性最先出現(xiàn)在南通力行網(wǎng)絡(luò)科技有限公司。
]]>短短的幾行 CSS 代碼變灰整個(gè)頁面：
html,body{
filter:grayscale(1);
filter: gray; /* IE9 - */
}具體就是用到了 CSS3 的灰度濾鏡。此代碼不兼容 IE10，IE11（其實(shí)，現(xiàn)在基本上沒人用 IE了吧？）
還有一種寫法：
<style type=”text/css”>html {-webkit-filter: grayscale(100%);}</style>
上面的 CSS 代碼可能只對(duì)主流瀏覽器支持，如果你需要支持 QQ 瀏覽器、360 瀏覽器、IE 瀏覽器等等其他瀏覽器需要使用下面這段：
<style>
html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
_filter:none;
}
</style>
將代碼放入前即可讓對(duì)應(yīng)網(wǎng)頁變黑灰色！filter 是濾鏡的意思，filter:gray 的意思就是說給頁面加上一個(gè)灰度的濾鏡，所以 html 里面的所有內(nèi)容都會(huì)變成黑白的了。不過這個(gè)濾鏡對(duì)于 chrome 和 safari 瀏覽器是無效的，所以下面會(huì)有一行-webkit-filter: grayscale(100%);這個(gè)樣式是專屬于使用 webkit 內(nèi)核的瀏覽器的，意思和 FILTER: gray;差不多，只是寫法不同罷了。
CSS3幾句代碼實(shí)現(xiàn)網(wǎng)站變黑白色最先出現(xiàn)在南通力行網(wǎng)絡(luò)科技有限公司。
]]>
CSS思維導(dǎo)圖(基礎(chǔ)版),7張圖看懂CSS框架最先出現(xiàn)在南通力行網(wǎng)絡(luò)科技有限公司。
]]>什么是CSS？
CSS 是層疊樣式表 ( Cascading Style Sheets ) 的簡(jiǎn)稱。
CSS 是一種標(biāo)記語言，屬于瀏覽器解釋型語言，可以直接由瀏覽器執(zhí)行，不需要編譯。
CSS 是用來表現(xiàn)HTML或XML的標(biāo)記語言。
CSS 是由W3C的CSS工作組發(fā)布推薦和維護(hù)的.
CSS 是編程入門人員的必修課，運(yùn)用CSS樣式可以讓頁面變得美觀。
CSS語法由三部分構(gòu)成：選擇器、屬性和值： selector {property: value}
CSS3和CSS有什么區(qū)別
CSS3 是最新的 CSS 標(biāo)準(zhǔn)。 CSS3是CSS（層疊樣式表）技術(shù)的升級(jí)版本，于1999年開始制訂，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等模塊 。
css3比css多了一些樣式設(shè)置而已。 css3是向前兼容的，也就是說，css中有效的code在css3也有效。
一個(gè)css與css3都有效的code，如果瀏覽器不支持css3，那么只會(huì)以css的樣式顯示。最常見的就是圓弧角。
一個(gè)只在css3中有效的code，如果瀏覽器不支持css3，那么其顯示效果就不會(huì)出現(xiàn)。 css3和css，在編寫code的時(shí)候，除了對(duì)一些css3中新出現(xiàn)的屬性設(shè)置，其它完全一樣。
CSS演進(jìn)的一個(gè)主要變化就是W3C決定將CSS3分成一系列模塊。瀏覽器廠商按CSS節(jié)奏快速創(chuàng)新，因此通過采用模塊方法，CSS3規(guī)范里的元素能以不同速度向前發(fā)展，因?yàn)椴煌臑g覽器廠商只支持給定特性。但不同瀏覽器在不同時(shí)間支持不同特性，這也讓跨瀏覽器開發(fā)變得復(fù)雜 。
CSS3是CSS2的升級(jí)版本，3只是版本號(hào)，它在CSS2.1 的基礎(chǔ)上增加了很多強(qiáng)大的新功能，目前主瀏覽器 Chorme、Safari、Firefox、Opera、甚至360都已經(jīng)支持了CSS3大部分功能了，IE10以后也開始全面支持CSS3了。
在編寫CSS3樣式時(shí)，不同的瀏覽器可能需要不同的前綴。它表示該CSS屬性或規(guī)則尚未成為W3C標(biāo)準(zhǔn)的一部分。是瀏覽器的私有屬性雖然目前較新版本的瀏覽器都是不需要前綴的，但為了更好的向前兼容，前綴還是少不了的。
Chrome 和 Safari：-webkit
Firefox：-moz
IE：-ms
Opera：-o
CSS3能做什么？有哪些強(qiáng)大功能？
CSS3 把很多以前需要使用的圖片和腳本來實(shí)現(xiàn)的效果，甚至動(dòng)畫效果，現(xiàn)在只需要短短幾行代碼就能搞定。比如：圓角、圖片邊框、文字陰影和盒陰景、漸變、個(gè)性化字體、多圖片背景、變形處理（旋轉(zhuǎn)、縮放、傾斜、移動(dòng)）、過渡、動(dòng)畫、多欄布局、媒體查詢等。還有選擇器，簡(jiǎn)化了前端開發(fā)工作人中山小欖的設(shè)計(jì)過程，加快頁面載入速度。
CSS3簡(jiǎn)化了前端開發(fā)工作人員的設(shè)計(jì)過程，加快頁面載入速度。
CSS3都有哪些強(qiáng)大功能呢？各位小伙伴一起來看看吧！
CSS3最重要的模塊包括：
選擇器
框模型
背景和邊框
文本效果
2D/3D 轉(zhuǎn)換
動(dòng)畫
多列布局
用戶界面
CSS3新增屬性
box-shadow(陰影效果)
border-colors(為邊框設(shè)置多種顏色)
boder-image(圖片邊框)
text-shadow(文本陰影)
text-overflow(文本截?cái)?
border-radius(圓角邊框)
opacity(不透明度)
box-sizing(控制盒模型的組成模式):指定兩個(gè)boxes接壤
resize(元素縮放):指定一個(gè)div元素，允許用戶調(diào)整大小
outline(外邊框)
background-origin(指定背景圖片從哪里開始顯示)
background-clip(指定背景圖片從什么位置開始裁切)
background(為一個(gè)元素指定多個(gè)背景)
什么是CSS3?CSS3和CSS有什么區(qū)別最先出現(xiàn)在南通力行網(wǎng)絡(luò)科技有限公司。
]]>SVG是什么？SVG有什么用？為什么要使用SVG？本篇文章就給大家介紹一下SVG的相關(guān)知識(shí)，讓大家了解使用SVG的好處，下面我們來看具體內(nèi)容。
SVG是什么？有什么用？
SVG是一種基于XML的矢量圖形格式，用于在Web和其他環(huán)境中顯示各種圖形；它允許我們編寫可縮放的二維圖形，并可通過CSS或JavaScript進(jìn)行操作。它由萬維網(wǎng)聯(lián)盟制定，是一個(gè)開放標(biāo)準(zhǔn)。
SVG最能夠響應(yīng)當(dāng)前Web開發(fā)對(duì)可伸縮性，響應(yīng)性，交互性，可編程性，性能和可訪問性的要求。
因?yàn)镾VG是基于矢量的，所有在放大圖形時(shí)不會(huì)出現(xiàn)任何降低或丟失保真度的情況。它們只是重新繪制以適應(yīng)更大的尺寸，這使得它非常適合多語境場(chǎng)景，例如響應(yīng)式Web設(shè)計(jì)。
為什么要使用SVG？
SVG的真正價(jià)值在于它解決了現(xiàn)代Web開發(fā)中許多最棘手的問題，讓我們看看使用SVG的好處，以及它解決了哪些問題。
1、可擴(kuò)展性和響應(yīng)能力
SVG是使用形狀、數(shù)字和坐標(biāo)（而不是像素網(wǎng)格）在瀏覽器中渲染圖形，這使得它具有分辨率無關(guān)性和無限可伸縮性。如果你仔細(xì)想想就可發(fā)現(xiàn)，不管你是用鋼筆還是用寫字板，創(chuàng)建圓形的指令都是相同的，只是比例發(fā)生變化。
使用SVG，我們可以組合不同的形狀、路徑和文本元素來創(chuàng)建各種視覺效果，并確保它們?cè)谌魏纬叽绱笮∠驴雌饋矶际值那逦骺臁?/p>
相比之下，基于柵格的格式（如GIF，JPG和PNG）具有固定的尺寸，這使得它們?cè)诳s放時(shí)會(huì)像素化。盡管各種響應(yīng)性圖像技術(shù)已經(jīng)證明對(duì)像素圖形有價(jià)值，但它們永遠(yuǎn)無法真正與SVG的無限擴(kuò)展（伸縮）能力競(jìng)爭(zhēng)。
2、可編程性和交互性
SVG是完全可編輯和可腳本編寫的，我們可以通過CSS或JavaScript將各種動(dòng)畫和交互添加到繪圖中。
3、無障礙
SVG文件是基于文本的，可以進(jìn)行搜索和索引。這使得它們可以通過屏幕閱讀器、搜索引擎和其他設(shè)備被閱讀。
4、性能
影響Web性能的一個(gè)最重要方面是網(wǎng)頁上使用的文件的大小。與柵格圖形（如GIF，JPG和PNG）相比，SVG圖形通常是較小的文件。
使用SVG的常見用例
SVG有大量的實(shí)際用例。讓我們探討其中最重要的一些用例。
1、簡(jiǎn)單的插圖和圖表
任何使用鋼筆和鉛筆制作的傳統(tǒng)繪圖都可以完美地轉(zhuǎn)換為SVG格式。
2、徽標(biāo)和圖標(biāo)
徽標(biāo)和圖標(biāo)通常具有相同的清晰和銳利的需求，無論大小，例：從按鈕到廣告牌，都可以使用SVG完成；且SVG圖標(biāo)更易于訪問，更容易定位。
例：使用了一個(gè)天氣圖標(biāo)
3、動(dòng)畫
我們可以創(chuàng)建吸引人的 動(dòng)畫，甚至是特殊類型的動(dòng)畫，包括SVG線條圖。SVG還可以與CSS動(dòng)畫交互，以及它自己內(nèi)置有SMIL動(dòng)畫功能。例：
4、交互性（圖表，信息圖表，地圖）
SVG可以用來繪制數(shù)據(jù)，并根據(jù)用戶操作或某些事件動(dòng)態(tài)更新數(shù)據(jù) ，例：交互式的SVG信息圖、交互式的SVG路線圖。
5、特殊效果
使用SVG可以實(shí)現(xiàn)許多實(shí)時(shí)效果，包括形狀變形或不同的粘性效果
6、構(gòu)建接口和應(yīng)用程序
SVG使我們可以制作具有挑戰(zhàn)性的接口，并將其與HTML5，基于Web的應(yīng)用程序和Internet應(yīng)用程序（RIA）相結(jié)合。
瀏覽器支持
正如我們所看到的，SVG幾乎無處不在，可以在無數(shù)的情況下使用，且SVG的瀏覽器支持度正在變得更好。
目前，大多數(shù)現(xiàn)代Web瀏覽器都支持SVG最重要和最基本的功能。下面我們來看看瀏覽器的支持度：
總結(jié)：以上就是本篇文的全部?jī)?nèi)容，希望能對(duì)大家的學(xué)習(xí)有所幫助。
SVG圖標(biāo)是什么？為什么要使用SVG？最先出現(xiàn)在南通力行網(wǎng)絡(luò)科技有限公司。
]]>