README.md

Svg Lines

Panic Nova extension including a set of svg clips, enabling you to play with Scalable Vector Graphics.

               

---

     

Content

#		Folders	Description	## clips
1		STRUCTURE	Svg header for file or inline html, structural elements.	16 clips
2		SHAPES	Primitives shapes, text, images.	12 clips
3		STYLING	Coloring, stroking, dashing, dotting.	12 clips
4		TRANSFORM	Translation, rotation, scale, skew.	5 clips
5		ADVANCED	Deeper styling with gradient, pattern, mask.	23 clips
6		ANIMATE	Animate attribute, transformation, or motion.	14 clips
7		EXAMPLES	Samples ans starting lines.	7 clips
→		7 folders	40 elements, 42 attributes, 7 examples.	89 clips

             

---

     

Details

#		Clip name	Description	Trigger
1		STRUCTURE
1.1	→	svg file 1	Svg file with prepositioned elements (style + defs)	vg-file1  ⇥
1.2	→	svg file 2	Svg file with required attributes	vg-file2  ⇥
1.3	→	svg file 3	Svg file with grid (inline use)	vg-file3  ⇥
1.4	→	svg 512x512		vg-512    ⇥
1.5	→	svg 128x128		vg-128    ⇥
1.6	→	svg 64x64		vg-64     ⇥
1.7	→	svg 32x32		vg-32     ⇥
1.8	→	svg 24x24		vg-24     ⇥
1.9	→	view		vg-view   ⇥
1.10	→	defs		vg-defs   ⇥
1.11	→	group	Group element with transform attribute	vg-grou   ⇥
1.12	→	symbol		vg-symb   ⇥
1.13	→	use symbol		vg-ussy   ⇥
1.14	→	use element		vg-usel   ⇥
1.15	→	description	+ Accessibility	vg-desc   ⇥
1.16	→	title	+ Accessibility	vg-titl   ⇥
2		SHAPES
2.1	→	circle		vg-circ   ⇥
2.2	→	ellipse		vg-elli   ⇥
2.3	→	rect		vg-rect   ⇥
2.4	→	round rect		vg-recr   ⇥
2.5	→	polygon		vg-poly   ⇥
2.6	→	line		vg-line   ⇥
2.7	→	polyline		vg-poli   ⇥
2.8	→	path		vg-path   ⇥
2.9	→	text		vg-text   ⇥
2.10	→	text path		vg-txtp   ⇥
2.11	→	tspan		vg-tspn   ⇥
2.12	→	image		vg-imag   ⇥
3		STYLING
3.1	→	fill		vg-fill   ⇥
3.2	→	fill-rule		vg-filr   ⇥
3.3	→	fill-opacity		vg-fopa   ⇥
3.4	→	stroke		vg-strk   ⇥
3.5	→	stroke-width		vg-swid   ⇥
3.6	→	stroke-opacity		vg-sopa   ⇥
3.7	→	stroke-linecap		vg-slic   ⇥
3.8	→	stroke-linejoin		vg-slij   ⇥
3.9	→	stroke-miterlimit		vg-mitl   ⇥
3.10	→	stroke-dasharray		vg-sdar   ⇥
3.11	→	stroke-dashoffset		vg-sdof   ⇥
3.12	→	pathLength		vg-plng   ⇥
4		TRANSFORM
4.1	→	translate		vg-tran   ⇥
4.2	→	rotate		vg-trot   ⇥
4.3	→	scale		vg-tsca   ⇥
4.4	→	skewX		vg-tskx   ⇥
4.5	→	skewY		vg-tsky   ⇥
5		ADVANCED
5.1	→	linear gradient	Gradient	vg-ling   ⇥
5.2	→	radial gradient	Gradient	vg-radg   ⇥
5.3	→	stop	Gradient	vg-stop   ⇥
5.4	→	gradient units	Gradient	vg-guni   ⇥
5.5	→	gradient transform	Gradient	vg-gtra   ⇥
5.6	→	fill with gradient	Gradient	vg-fgra   ⇥
5.7	→	stroke with gradient	Gradient	vg-sgra   ⇥
5.8	→	pattern	Pattern	vg-patt   ⇥
5.9	→	patternUnits	Pattern	vg-puni   ⇥
5.10	→	patternContentUnits	Pattern	vg-pcon   ⇥
5.11	→	patternTransform	Pattern	vg-ptra   ⇥
5.12	→	fill with pattern	Pattern	vg-fpat   ⇥
5.13	→	stroke with pattern	Pattern	vg-spat   ⇥
5.14	→	mask definition	Mask	vg-mask   ⇥
5.15	→	mask a shape	Mask	vg-fmsk   ⇥
5.16	→	clip	Clip	vg-clip   ⇥
5.17	→	clip-path a shape	Clip	vg-fcli   ⇥
5.18	→	clip-rule	Clip	vg-crul   ⇥
5.19	→	clipPathUnits	Clip	vg-cpun   ⇥
5.20	→	marker	Marker	vg-mark   ⇥
5.21	→	marker-start	Marker	vg-mstt   ⇥
5.22	→	marker-mid	Marker	vg-mmid   ⇥
5.23	→	marker-end	Marker	vg-mend   ⇥
6		ANIMATE
6.1	→	animate attribute		vg-aatr   ⇥
6.2	→	animate transform		vg-atra   ⇥
6.3	→	animate motion		vg-amot   ⇥
6.4	→	motion path		vg-amop   ⇥
6.5	→	set		vg-aset   ⇥
6.6	→	from / to - svg anim	2 attributes for 2 stepped animation	vg-afto   ⇥
6.7	→	values - svg anim		vg-aval   ⇥
6.8	→	begin - svg anim		vg-abeg   ⇥
6.9	→	keyPoints - svg anim		vg-akpo   ⇥
6.10	→	keyTimes - svg anim		vg-akti   ⇥
6.11	→	keySplines - svg anim		vg-aksp   ⇥
6.12	→	calcMode - svg anim		vg-acal   ⇥
6.13	→	accumulate - svg anim		vg-acum   ⇥
6.14	→	additive - svg anim		vg-adit   ⇥
7		EXAMPLES
7.1	→	example 0 - Grids	_	vg-x0     ⇥
7.2	→	example 1 - Shapes		vg-x1     ⇥
7.3	→	example 2 - Paths		vg-x2     ⇥
7.4	→	example 3 - Styling		vg-x3     ⇥
7.5	→	example 4 - Advanced		vg-x4     ⇥
7.6	→	example 5 - Transform		vg-x5     ⇥
7.7	→	example 6 - Animate		vg-x6     ⇥

               

---

     

About

The search for svg in nova extensions yielded no results, so I organized my svg clips somewhat after learning about the possibility of making my own extensions.

The organization of the folders corresponds to the structure of the course I share with my students.                

---

     

Future ?

→  Missing elements & attributes. 

→  Svg filters. 

→  Improving what's needed…

---