ai怎么導(dǎo)出svg文件? ai導(dǎo)出svg并在html中使用的方法

AI圖標(biāo)制作完成之后,保存的svg文件包含許多AI的信息,如果要在HTML中使用,我們需要在svg文件中提取/修改信息,重新保存。
1、在AI中已經(jīng)完成圖標(biāo),要保存SVG文件,點擊“文件(File)”-“另存為(Save As)”,在彈出的對話框中保存類型選擇SVG(*.svg)。
2、svg文件保存后,用文本編輯器打開,找到<path>這一個節(jié)點,d屬性里面就是這個圖片的路徑數(shù)據(jù)【注:在保存svg圖標(biāo)的時候需要使用路徑查找器工具將圖標(biāo)制作為復(fù)合路徑,不然該svg文件中會有多個<path>節(jié)點】。
3、可以新建一個.svg文件,用文本編輯器打開,輸入以下內(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怎么混合兩種顏色? illustrator混合兩個色塊的顏色的方法
ai填充不同顏色的圖形重疊以后,想要將兩種顏色混合,該怎么混合顏色呢?下面我們就來看看詳細(xì)的教程2024-07-18ai如何自定義網(wǎng)格線間距? ai參考線間距的調(diào)節(jié)方法
ai網(wǎng)格線間距默認(rèn)的不是很喜歡,想要自己調(diào)整一下,該怎么調(diào)整呢?今天我們就來看看參考線調(diào)整技巧2024-05-28ai路徑平均效果怎么用? illustrator使用平均路徑的教程
Adobe Illustrator中有一個路徑平均功能,如何使用呢?下面小編為大家演示路徑平均功能的一種使用方法2024-05-21ai保存pdf格式出現(xiàn)多余內(nèi)容怎么解決? 去掉pdf文件多余內(nèi)容的技巧
ai保存pdf格式出現(xiàn)多余內(nèi)容怎么解決?ai中的文檔保存為pdf文件的時候,發(fā)現(xiàn)有多余內(nèi)容,該怎么操作呢?下面我們就來看看去掉pdf文件多余內(nèi)容的技巧2023-12-19- ai描邊在哪里?ai中想要設(shè)置描邊,該怎么操作呢?下面我們就來看看ai設(shè)置描邊的多種方法2023-12-19
ai原位復(fù)制怎么用? ai原位復(fù)制快捷鍵介紹
ai原位復(fù)制怎么用?復(fù)制圖形的時候,想要原位復(fù)制粘貼,該怎么操作呢?下面我們就來看看ai原位復(fù)制快捷鍵介紹2023-12-19ai怎么讓文字隨著路徑變形? illustrator區(qū)域文字不跟著變換方向問題的
ai怎么讓文字隨著路徑變形?選中文字后,發(fā)現(xiàn)文字不跟隨變換區(qū)域旋轉(zhuǎn)該怎么辦呢?下面我們就來看看illustrator區(qū)域文字不跟著變換問題的解決辦法2023-11-30ai漸變色怎么調(diào)方向? illustrator將漸變顏色反向的技巧
ai漸變色怎么調(diào)方向?ai中給圖形填漸變色,想要進行反向,該怎么操作呢?下面我們就來看看illustrator將漸變顏色反向的技巧2023-11-30Ai彩色logo怎么做反白反黑效果? ai彩色logo轉(zhuǎn)化為黑白稿的技巧
Ai彩色logo怎么做反白反黑效果?設(shè)計的彩色logo想要做黑白稿,就是反黑反白效果,下面我們就來看看ai彩色logo轉(zhuǎn)化為黑白稿的技巧2023-11-12ai怎么設(shè)計迷宮字體效果? ai做3d立體迷宮字的技巧
ai怎么設(shè)計迷宮字體效果?我們需要使用分割網(wǎng)格結(jié)合形狀生成器工具,制作迷宮字體,下面我們就來看看詳細(xì)的設(shè)計過程2023-11-02