SVG基礎知識 Adobe Illustrator繪製SVG

時間 2019-12-01

原文原文鏈接

SVG svg在線編輯器 editor.method.ac/html

多邊形

使用的是polygon標籤該標籤能建立含有很多於三個邊的圖形。以下數組

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
		<polygon points="0,10 5,2 5,7 10,0"/>
	</svg>
複製代碼

效果以下 bash

其座標爲路徑框架

曲線

poliline 爲曲線一樣輸入的爲座標此時爲了和上一個區分，將file設置爲不填充，設置描邊爲black編輯器

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
		<polyline points="0,10 5,2 5,7 10,0" fill="none" stroke="black"/>
	</svg>
複製代碼

效果以下 svg

其中填充爲非零繞數原則字體

路徑

path相似於筆的路徑其擁有一個屬性d，該屬性d由下方的單詞的首字母組成。url

Moveto

畫筆的起點spa

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
		<path d="M10,100"/>
	</svg>
複製代碼

Lineto

該執行從畫筆的起點到位置繪製一條直線設計

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
		<path d="M0 0 L0 20 L40 0 "/>
	</svg>
複製代碼

Curveto

繪製貝塞爾曲線，由三個參數組成，考慮兩個控制點

直接選擇畫板手繪吧，實在看不懂了，貌似缺乏了橢圓的一些數學知識

總結

繪製一顆心，如下是在網上找的

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
		<path d="M1,3 A2,2 0,0,1 5,3 A2,2 0,0,1 9,3 Q9,6 5,9 Q1,6 1,3 Z "/>
	</svg>
複製代碼

沒看懂。。。

文本

text元素依舊當作圖片處理

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
		<text x="0" y="20" fill="red">Hello world</text>
	</svg>
複製代碼

stroke屬性

此爲屬性，定義任何類型的線條

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
		<text x="0" y="20" stroke="black">Hello world</text>
	</svg>
複製代碼

模糊效果

對圖片模糊先引入圖片

<image x="0" y="0" width="100%" height="300px"   xlink:href="http://127.0.0.1/111.png"/>
複製代碼

此時圖片顯示

接着定義可複用的組即defs

defs 標籤爲可複用的組標籤

使用的是file用於存放濾鏡的地方

使用file標籤

使用feGaussianBlur濾鏡即模糊濾鏡使用的in的參數爲SourceGraphic表示圖形做爲原始的輸入

此外還有背景圖，通道等

stdDeviation 表示模糊的程度完整的以下

<defs>
	<filter id="f1" x="0" y="0">
		<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
	</filter>
</defs>
複製代碼

接着再次使用濾鏡

<image filter="url(#f1)" x="0" y="0" width="100%" height="100px"   xlink:href="http://127.0.0.1/111.png"/>
複製代碼

一個模糊

效果不錯

此外還有陰影漸變，等濾鏡，等就太複雜了，設計到矩陣變換等高等數學的內容，本身有心無力。

在adobe ai中生成svg

使用adobe ai 生成svg文件

建立一個畫板

選擇字符

添加字體

轉曲

獲取svg代碼

畫出圖像

代碼以下

<!DOCTYPE html>
<html>
<head>
	<title>svg頁面</title>
</head>
<body>
	<p>這是一個svg</p>

	<!-- svg 圖形的命名空間 -->
<svg version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 1366 768" style="enable-background:new 0 0 1366 768;" xml:space="preserve">
<g>
	<path d="M722.2,346.5c17.1,128.1-27.4,231.2-133.3,309.2c-36.1,26.6-79.1,43.8-123.5,49.7c-109.2,14.4-200.7-14.2-274.5-85.9 c-62.1-60.1-93.1-133.1-93.1-218.8c0-103.3,45-188.2,135.1-254.6c36.1-26.6,78.9-44.2,123.3-50.2 c128.7-17.4,232.7,23.8,312.1,123.6C697.2,255.9,716,300.4,722.2,346.5z M709.2,403.7c1.8-83.1-27.7-154-88.5-212.8 c-58.6-56.5-128-84.7-208.1-84.7l-32.3,66.3l35.2,7.1l27.5-27.5l48.5,3.2l9.7,25.9L472,210.3v17.5l18.1,3.6l8.4-13.6l32-20l-1,13.6 l12,20.7l-14.2,14.9l9,8.7l-21.3,1.3l8.7,17.5l-46.2,22l7.1,26.2h-14.5l-6.5-25.9l-33.9-0.6l-6.1,10l-13.9-6.5L387,322.1l18.1,21.7 l-0.6,23.9l19.1,14.2l111.2,12.6l35.2,24.9l-4.2,61.7l-76.6,76.6c-5,5-9.8,18.7-14.5,41.4c-4.5,21.3-6.1,36.5-4.8,45.6l-11.6,13.3 c-9-17.9-20.8-45.4-35.2-82.4c-3.4-12.7-6.5-28.9-9-48.5c-1.9-16.2-3.9-32.4-5.8-48.8l-48.5-42.7l43-50.7l-17.8-25.5 c-27.4-5.6-45.1-10.6-53.3-15c-8.2-4.4-22.3-16.8-42.3-37l16.8,32.6l-11.3,4.8l-26.2-49.1l5.2-45.9l-8.1-32.3l-25.2-24.6l-18.4-4.5 l-16.2,11.3l-17.8,4.5c-49.6,57.3-74.1,123.3-73.4,197.9c0.8,76.3,32.7,151,87.1,204.4c58.1,57,128.4,85.4,210.9,85.4 c81.9,0,151.8-28.7,209.6-86C675.7,552.8,707.5,479.1,709.2,403.7z"/>
</g>
</svg>
</body>
</html>
複製代碼

到此，能夠發揮ai的想象啦。包括繪製圖形，使用濾鏡，畫圖圖標等等，哪怕使用圖片導入ai，繪製出矢量圖。完美的ai和html的一次結合