ai怎么導(dǎo)出svg文件? ai導(dǎo)出svg并在html中使用的方法
我要評(píng)論AI圖標(biāo)制作完成之后，保存的svg文件包含許多AI的信息，如果要在HTML中使用，我們需要在svg文件中提取/修改信息，重新保存。
1、在AI中已經(jīng)完成圖標(biāo)，要保存SVG文件，點(diǎn)擊“文件(File)”-“另存為(Save As)”，在彈出的對(duì)話框中保存類型選擇SVG(*.svg)。
2、svg文件保存后，用文本編輯器打開(kāi)，找到<path>這一個(gè)節(jié)點(diǎn)，d屬性里面就是這個(gè)圖片的路徑數(shù)據(jù)【注：在保存svg圖標(biāo)的時(shí)候需要使用路徑查找器工具將圖標(biāo)制作為復(fù)合路徑，不然該svg文件中會(huì)有多個(gè)<path>節(jié)點(diǎn)】。
3、可以新建一個(gè).svg文件，用文本編輯器打開(kāi)，輸入以下內(nèi)容
- <?xml version="1.0" encoding="utf-8"?>
- <svg
- version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="左偏移量(px)" y="上偏移量(px)"
- width="寬度" height="高度" viewBox="0 0 寬度 高度" enable-background="new 0 0 寬度 高度"
- xml:space="preserve">
- <g>
- <path stroke="描邊顏色" fill="填充顏色" d="圖標(biāo)路徑數(shù)據(jù)"/>
- </g>
- </svg>
viewBox 和enable-background 的寬高不要修改，使用從ai保存的svg中的數(shù)據(jù)。
4、將從ai保存的svg中復(fù)制路徑數(shù)據(jù)到上面新建的svg圖標(biāo)路徑數(shù)據(jù)屬性中，設(shè)置好顏色大小的信息，保存后就可以在html中正常使用了。
相關(guān)文章
ai如何創(chuàng)建可編輯偏移文本? ai文字偏移路徑的使用教程
偏移文本或偏移路徑意味著偏離了原來(lái)的位置，雖然聽(tīng)起來(lái)可能不太理想或雜亂無(wú)章，但在Illustrator中使用偏移技術(shù)處理文本可以給您帶來(lái)一些很酷的效果，詳細(xì)請(qǐng)看下文介紹2026-03-03ai怎么混合兩種顏色? illustrator混合兩個(gè)色塊的顏色的方法
ai填充不同顏色的圖形重疊以后，想要將兩種顏色混合，該怎么混合顏色呢？下面我們就來(lái)看看詳細(xì)的教程2024-07-18
ai如何自定義網(wǎng)格線間距? ai參考線間距的調(diào)節(jié)方法
ai網(wǎng)格線間距默認(rèn)的不是很喜歡，想要自己調(diào)整一下，該怎么調(diào)整呢？今天我們就來(lái)看看參考線調(diào)整技巧2024-05-28
ai路徑平均效果怎么用? illustrator使用平均路徑的教程
Adobe Illustrator中有一個(gè)路徑平均功能，如何使用呢？下面小編為大家演示路徑平均功能的一種使用方法2024-05-21ai保存pdf格式出現(xiàn)多余內(nèi)容怎么解決? 去掉pdf文件多余內(nèi)容的技巧
ai保存pdf格式出現(xiàn)多余內(nèi)容怎么解決？ai中的文檔保存為pdf文件的時(shí)候，發(fā)現(xiàn)有多余內(nèi)容，該怎么操作呢？下面我們就來(lái)看看去掉pdf文件多余內(nèi)容的技巧2023-12-19- ai描邊在哪里？ai中想要設(shè)置描邊，該怎么操作呢？下面我們就來(lái)看看ai設(shè)置描邊的多種方法2023-12-19
ai原位復(fù)制怎么用? ai原位復(fù)制快捷鍵介紹
ai原位復(fù)制怎么用？復(fù)制圖形的時(shí)候，想要原位復(fù)制粘貼，該怎么操作呢？下面我們就來(lái)看看ai原位復(fù)制快捷鍵介紹2023-12-19ai怎么讓文字隨著路徑變形? illustrator區(qū)域文字不跟著變換方向問(wèn)題的
ai怎么讓文字隨著路徑變形？選中文字后，發(fā)現(xiàn)文字不跟隨變換區(qū)域旋轉(zhuǎn)該怎么辦呢？下面我們就來(lái)看看illustrator區(qū)域文字不跟著變換問(wèn)題的解決辦法2023-11-30ai漸變色怎么調(diào)方向? illustrator將漸變顏色反向的技巧
ai漸變色怎么調(diào)方向？ai中給圖形填漸變色，想要進(jìn)行反向，該怎么操作呢？下面我們就來(lái)看看illustrator將漸變顏色反向的技巧2023-11-30
Ai彩色logo怎么做反白反黑效果? ai彩色logo轉(zhuǎn)化為黑白稿的技巧
Ai彩色logo怎么做反白反黑效果？設(shè)計(jì)的彩色logo想要做黑白稿，就是反黑反白效果，下面我們就來(lái)看看ai彩色logo轉(zhuǎn)化為黑白稿的技巧2023-11-12
