Adobe Illustrator SVG

◄Page 8►

Create, Modify, Basic Shapes, Fills

Scaleable Vector Graphics (SVG) have many advantages for Web designers and developers. This page demonstrates creating and modifying some SVG shapes and fills, prepared with Adobe Illustrator. Easily create simple shapes and fills with text directly. However Adobe Illustrator and other SVG image applications allow designers to create much more complex fills and graphics quickly. See the SVG Markup for the graphics below.

Tap to Toggle Opacity

Steps to Simple SVG

1. Create an Artboard
2. Create Some Shapes
3. Color Some Shapes
4. Add Gradients
5. Save the SVG

With Adobe Illustrator create an artboard.

Create Some Shapes

It's easiest to create separate layers for shapes. Name the layers consistently. The layer names display in the text of your final SVG.

Select the polygon tool to create stars, circles, triangles, rectangles, ellipses and flares. Select the black arrow to arrange shapes on your artboard.

Color Shapes

Select a shape with the black arrow. Select the color menu, and a color, to fill a shape with solid color or a gradient.

Gradients

With gradients select the gradient filled shape and view the gradient tab. Click colored squares under the gradient to change their color. With linear gradients modify the angle icon in the gradient tab. The far left circle applies a linear gradient at an angle. The highlighted sphere applies a radial gradient.

Save SVG

Select File > Save As. Then select the SVG file format, from the menu.

After saving the file as an SVG, you can open the SVG in notepad to see the image elements, attributes and values, which describe vectors.

The SVG Markup

SVG's awesome because you can read the layers, shapes, styles and colors in a text file. The shapes displayed on this page, save as the following text.

Notice I declared each layer with an id such as SVGTextImpact. The layers named CircleGradientLinear and CircleGradientLayer include sets of stop tags with offset and style attribute-value pairs.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="256px"
	 height="256px" viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve">
<g id="SVGTextImpact">
	<text transform="matrix(1 0 0 1 69.0869 66.478)" fill="#0071BC" font-family="'Impact'" font-size="72">SVG</text>
</g>
<g id="CircleFlat">
	<circle fill="#0000FF" cx="126.392" cy="94.304" r="25.652"/>
</g>

<g id="CircleGradientLinear">
<linearGradient id="SVGID_1_" 
gradientUnits="userSpaceOnUse" 
x1="60.8472" y1="86.3267" x2="103.192" y2="116.2668">
<stop  offset="0.0225" style="stop-color:#EEF8E7"/>
<stop  offset="0.071" style="stop-color:#E7E6E9"/>
<stop  offset="0.2702" style="stop-color:#CBA1EF"/>
<stop  offset="0.4588" style="stop-color:#B468F5"/>
<stop  offset="0.6312" style="stop-color:#A23BF9"/>
<stop  offset="0.7844" style="stop-color:#951BFC"/>
<stop  offset="0.9125" style="stop-color:#8D07FE"/>
<stop  offset="1" style="stop-color:#8A00FF"/>
</linearGradient>
	
<circle fill="url(#SVGID_1_)" cx="72.13" cy="94.304" r="25.652"/>
</g>

<g id="CircleGradientRadial">
<radialGradient id="SVGID_2_" cx="179.6953" cy="94.3042" r="25.6521" gradientUnits="userSpaceOnUse">
<stop  offset="0" style="stop-color:#FFFFFF"/>
<stop  offset="0.0836" style="stop-color:#E8E8F0"/>
<stop  offset="0.4225" style="stop-color:#918EB5"/>
<stop  offset="0.6983" style="stop-color:#524C89"/>
<stop  offset="0.8974" style="stop-color:#2A246E"/>
<stop  offset="1" style="stop-color:#1B1464"/>
</radialGradient>
	
<circle fill="url(#SVGID_2_)" cx="179.696" cy="94.304" r="25.652"/>
</g>

<g id="Stars">
<polygon fill="#FCEE21" points="95.17,191.738 72.12,179.61 49.062,191.723 53.473,166.053 34.828,147.866 60.604,144.129 
		72.139,120.776 83.659,144.137 109.433,147.891 90.776,166.065 	"/>
		
<radialGradient id="SVGID_3_" cx="179.6953" cy="156.2578" r="36.403" gradientUnits="userSpaceOnUse">
<stop  offset="0" style="stop-color:#FFFFFF"/>
<stop  offset="0.1712" style="stop-color:#F0F488"/>
<stop  offset="0.3596" style="stop-color:#E0E700"/>
<stop  offset="0.426" style="stop-color:#E2DB01"/>
<stop  offset="0.5471" style="stop-color:#E7BA05"/>
<stop  offset="0.7095" style="stop-color:#EF850B"/>
<stop  offset="0.9046" style="stop-color:#F93C13"/>
<stop  offset="0.9981" style="stop-color:#FF1717"/>
</radialGradient>
	
<polygon fill="url(#SVGID_3_)" points="202.734,191.738 179.685,179.61 156.626,191.723 161.037,166.053 142.393,147.866 
168.169,144.129 179.703,120.776 191.223,144.137 216.998,147.891 198.34,166.065 	"/>
</g>

<g id="SVGTextGradientLinear">
<g>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="75.7222" y1="250.792" x2="75.7222" y2="197.4951">
<stop  offset="0" style="stop-color:#0700E7"/>
<stop  offset="0.2401" style="stop-color:#0537D8"/>
<stop  offset="0.4912" style="stop-color:#036ACB"/>
<stop  offset="0.7109" style="stop-color:#018FC1"/>
<stop  offset="0.8878" style="stop-color:#00A6BB"/>
<stop  offset="1" style="stop-color:#00AEB9"/>
</linearGradient>
		
<path fill="url(#SVGID_4_)" d="M55.208,233.354l6.434-0.563c0.304,2.579,1.014,4.693,2.127,6.346
c1.113,1.652,2.842,2.988,5.186,4.008c2.343,1.02,4.98,1.529,7.91,1.529c2.602,0,4.898-0.387,6.891-1.16
c1.992-0.773,3.475-1.833,4.447-3.182c0.972-1.348,1.459-2.817,1.459-4.412c0-1.617-0.469-3.028-1.406-4.236
c-0.938-1.207-2.484-2.22-4.641-3.041c-1.383-0.539-4.442-1.376-9.176-2.514c-4.734-1.137-8.051-2.209-9.949-3.217
c-2.461-1.288-4.295-2.888-5.502-4.799c-1.208-1.91-1.811-4.048-1.811-6.416c0-2.602,0.738-5.032,2.215-7.295
c1.477-2.262,3.633-3.978,6.469-5.15c2.835-1.172,5.988-1.758,9.457-1.758c3.82,0,7.189,0.615,10.107,1.846
s5.162,3.041,6.732,5.432c1.57,2.391,2.414,5.098,2.531,8.121l-6.539,0.492c-0.352-3.257-1.542-5.718-3.568-7.383
c-2.027-1.664-5.022-2.496-8.982-2.496c-4.125,0-7.131,0.756-9.018,2.268c-1.887,1.512-2.83,3.335-2.83,5.467
c0,1.852,0.668,3.375,2.004,4.57c1.313,1.195,4.74,2.421,10.283,3.674c5.542,1.254,9.346,2.351,11.408,3.287
c3,1.384,5.215,3.135,6.645,5.256c1.429,2.122,2.145,4.565,2.145,7.33c0,2.742-0.786,5.326-2.355,7.752
c-1.57,2.426-3.827,4.313-6.768,5.66c-2.941,1.348-6.252,2.021-9.932,2.021c-4.664,0-8.573-0.681-11.725-2.039
c-3.152-1.358-5.625-3.404-7.418-6.135C56.246,239.889,55.302,236.8,55.208,233.354z"/>
			
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="123.8867" y1="249.9131" x2="123.8867" y2="198.374">
<stop  offset="0" style="stop-color:#0700E7"/>
<stop  offset="0.2401" style="stop-color:#0537D8"/>
<stop  offset="0.4912" style="stop-color:#036ACB"/>
<stop  offset="0.7109" style="stop-color:#018FC1"/>
<stop  offset="0.8878" style="stop-color:#00A6BB"/>
<stop  offset="1" style="stop-color:#00AEB9"/>
</linearGradient>
		
<path fill="url(#SVGID_5_)" d="M120.283,249.913l-19.969-51.539h7.383l13.395,37.441c1.078,3.001,1.98,5.813,2.707,8.438
	c0.796-2.813,1.723-5.625,2.777-8.438l13.922-37.441h6.961l-20.18,51.539H120.283z"/>
			
<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="175.6895" y1="250.792" x2="175.6895" y2="197.4951">
<stop  offset="0" style="stop-color:#0700E7"/>
<stop  offset="0.2401" style="stop-color:#0537D8"/>
<stop  offset="0.4912" style="stop-color:#036ACB"/>
<stop  offset="0.7109" style="stop-color:#018FC1"/>
<stop  offset="0.8878" style="stop-color:#00A6BB"/>
<stop  offset="1" style="stop-color:#00AEB9"/>
</linearGradient>
		
<path fill="url(#SVGID_6_)" d="M177.693,229.698v-6.047l21.832-0.035v19.125c-3.353,2.672-6.81,4.682-10.371,6.029
c-3.563,1.348-7.22,2.021-10.969,2.021c-5.063,0-9.663-1.084-13.799-3.252c-4.138-2.167-7.26-5.303-9.369-9.404
c-2.109-4.101-3.164-8.684-3.164-13.746c0-5.015,1.049-9.697,3.146-14.045c2.097-4.347,5.115-7.576,9.053-9.686
s8.473-3.164,13.605-3.164c3.727,0,7.095,0.604,10.107,1.811c3.011,1.208,5.372,2.889,7.084,5.045
c1.71,2.157,3.011,4.97,3.902,8.438l-6.152,1.688c-0.773-2.624-1.735-4.688-2.883-6.188c-1.149-1.499-2.79-2.701-4.922-3.604
c-2.134-0.901-4.5-1.354-7.102-1.354c-3.118,0-5.813,0.475-8.086,1.424c-2.274,0.949-4.108,2.197-5.502,3.744
c-1.396,1.547-2.479,3.247-3.252,5.098c-1.313,3.188-1.969,6.645-1.969,10.371c0,4.594,0.791,8.438,2.373,11.531
s3.885,5.392,6.908,6.891c3.023,1.5,6.233,2.25,9.633,2.25c2.953,0,5.836-0.567,8.648-1.705c2.813-1.137,4.944-2.35,6.398-3.639
v-9.598H177.693z"/>
</g>
</g>
</svg>

JavaScript

The following javascript function opacity toggles on and off. See the toggleOpacity() function below, or in lib-svg.js.

function toggleOpacity(id){
let im = document.getElementById(id);

// Opacity default is 1. 
// Default assigned "".
if(im.style.opacity == "1" || im.style.opacity==""){

im.style.opacity = "0.5";

}
else{

im.style.opacity = "1";
	
}

}

Summary

Scaleable Vector Graphics (SVG) have many advantages for Web designers and developers. This page demonstrates creating and modifying some SVG shapes and fills, prepared with Adobe Illustrator. Easily create simple shapes and fills with text directly. However Adobe Illustrator and other SVG image applications allow designers to create much more complex fills and graphics quickly.

The next page demonstrates scaling the width of SVG versus PNG files.

SVG Illustration

Create a range of Scaleable Vector Graphics (SVG) with Adobe Illustrator, HTML or plain text files. The SVG format proves ideal for lightweight, clean, crisp images that never lose their luster.

SVG images export as text files allowing designers and artists to modify properties, within the file, such as fill, background color, gradients and scaling.

Apply JavaScript and CSS3 to modify properties interactively or automatically. Animate, or respond to user interaction, to change a range of properties including color, opacity, location, scale, gradation and more.

Tags