Creating Shapes with SVG : An SVG Tutorial

<div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> Have you tried using the SVG image format? Here is an SVG tutorial to help you delve deeper on how to use this image format to your full advantage.</div> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> In the past, the only image format that was supported by all browsers was the GIF, an image file developed by CompuServe. Then came the JPEG image file, which offered lousy compression without the loss of details, but the size is really small compared to the GIF file image.</div> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> After some time, the aim for advance 2-dimensional vector computer graphics on the Web came into being. With so much competing formats that were submitted to W3C, SVG was finally developed in 1999.</div> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> </div> <h2 style="clear: both; color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; margin: 0.83em 0px;"> What is SVG?</h2> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> SVG, which stands for <i>Scalable Vector Graphics</i>, is an XML-based vector image format for the Web. Unlike GIF, PNG and JPEG image file formats, SVG is scalable, which means that no matter how you scale or enlarge the image file, the quality will still look good.</div> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> As an XML file, SVG can be created, customized and integrated with other W3C standards such as DOM and XSL using any text editor. SVG images can also be created visually using drawing or vector programs like Adobe Illustrator.</div> <h2 style="clear: both; color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; margin: 0.83em 0px;"> Why Use SVG?</h2> <ul style="-webkit-transition: padding 0.3s linear; color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin: 1em 0px; padding: 0px 0px 0px 40px; transition: padding 0.3s linear;"> <li style="list-style: url(http://www.1stwebdesigner.com/wp-content/themes/wd1_v3/img/bullet.png); padding: 0.4em;">Can be created and edited with any text editor</li> <li style="list-style: url(http://www.1stwebdesigner.com/wp-content/themes/wd1_v3/img/bullet.png); padding: 0.4em;">Can be printed with high quality resolution</li> <li style="list-style: url(http://www.1stwebdesigner.com/wp-content/themes/wd1_v3/img/bullet.png); padding: 0.4em;">Can be used for animation</li> <li style="list-style: url(http://www.1stwebdesigner.com/wp-content/themes/wd1_v3/img/bullet.png); padding: 0.4em;">Is a W3C recommendation</li> <li style="list-style: url(http://www.1stwebdesigner.com/wp-content/themes/wd1_v3/img/bullet.png); padding: 0.4em;">Works with other W3C standards like DOM</li> <li style="list-style: url(http://www.1stwebdesigner.com/wp-content/themes/wd1_v3/img/bullet.png); padding: 0.4em;">Looks great for retina diplays</li> <li style="list-style: url(http://www.1stwebdesigner.com/wp-content/themes/wd1_v3/img/bullet.png); padding: 0.4em;"><span style="color: #333333;">Scales to any size without looking stretch out</span></li> </ul> <h2 style="clear: both; color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; margin: 0.83em 0px;"> SVG on HTML Pages</h2> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> SVG can be easily embedded into HTML using SVG tags. Consider the syntax below.</div> <div class="syntaxhighlighter " id="highlighter_324264" style="background-color: white; background-image: none !important; border: 1px solid rgb(224, 224, 224) !important; bottom: auto !important; color: #222222; direction: ltr !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 16px; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 1em 0px !important; outline: 0px !important; overflow: hidden; padding: 0px !important; position: relative !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 732.28125px;"> <div class="lines" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <div class="line alt1" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; width: 2.7em !important;">1</code></td><td class="content" style="background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: auto !important;"><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><</code><code class="keyword" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">svg</code> <code class="color1" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(128, 128, 128) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">width</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="string" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">" "</code>  <code class="color1" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(128, 128, 128) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">height</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="string" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">" "</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">></code></td></tr> </tbody></table> </div> <div class="line alt2" style="background-color: rgb(248, 248, 248) !important; background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; width: 2.7em !important;">2</code></td><td class="content" style="background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: auto !important;"><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">[element code here..]</code></td></tr> </tbody></table> </div> <div class="line alt1" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; width: 2.7em !important;">3</code></td><td class="content" style="background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: auto !important;"><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"></</code><code class="keyword" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">svg</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">></code></td></tr> </tbody></table> </div> </div> </div> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> As you can see, SVG has its own tags. SVG must have a width and height so as to contain its element. The following are the elements can be used to draw inside its canvas.</div> <ul style="-webkit-transition: padding 0.3s linear; color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin: 1em 0px; padding: 0px 0px 0px 40px; transition: padding 0.3s linear;"> <li style="list-style: url(http://www.1stwebdesigner.com/wp-content/themes/wd1_v3/img/bullet.png); padding: 0.4em;">Circle<b></b></li> <li style="list-style: url(http://www.1stwebdesigner.com/wp-content/themes/wd1_v3/img/bullet.png); padding: 0.4em;">Rectangle<b></b></li> <li style="list-style: url(http://www.1stwebdesigner.com/wp-content/themes/wd1_v3/img/bullet.png); padding: 0.4em;">Ellipse<b></b></li> <li style="list-style: url(http://www.1stwebdesigner.com/wp-content/themes/wd1_v3/img/bullet.png); padding: 0.4em;">Line<b></b></li> <li style="list-style: url(http://www.1stwebdesigner.com/wp-content/themes/wd1_v3/img/bullet.png); padding: 0.4em;">Polyline<b></b></li> <li style="list-style: url(http://www.1stwebdesigner.com/wp-content/themes/wd1_v3/img/bullet.png); padding: 0.4em;">Polygon<b></b></li> <li style="list-style: url(http://www.1stwebdesigner.com/wp-content/themes/wd1_v3/img/bullet.png); padding: 0.4em;">Path<b></b></li> <li style="list-style: url(http://www.1stwebdesigner.com/wp-content/themes/wd1_v3/img/bullet.png); padding: 0.4em;">Text<b></b></li> </ul> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> We will discuss all of these one by one in this article. This article will serve as an introduction to SVG. It will give you basic information how to draw SVG shapes using basic XML. If you have not used SVG before, this is a good start for you. So let’s jump in and start this awesome tutorial.</div> <h2 style="clear: both; color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; margin: 0.83em 0px;"> Creating a Circle in SVG</h2> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> Circle SVGs can be executed by using the circle tag. Here’s an example.</div> <div class="syntaxhighlighter " id="highlighter_49920" style="background-color: white; background-image: none !important; border: 1px solid rgb(224, 224, 224) !important; bottom: auto !important; color: #222222; direction: ltr !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 16px; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 1em 0px !important; outline: 0px !important; overflow: hidden; padding: 0px !important; position: relative !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 732.28125px;"> <div class="lines" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <div class="line alt1" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; width: 2.7em !important;">1</code></td><td class="content" style="background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: auto !important;"><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><</code><code class="keyword" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">svg</code> <code class="color1" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(128, 128, 128) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">height</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="string" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"300"</code> <code class="color1" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(128, 128, 128) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">width</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="string" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"300"</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">></code></td></tr> </tbody></table> </div> <div class="line alt2" style="background-color: rgb(248, 248, 248) !important; background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; width: 2.7em !important;">2</code></td><td class="content" style="background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: auto !important;"><code class="spaces" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><</code><code class="keyword" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">circle</code> <code class="color1" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(128, 128, 128) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">cx</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="string" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"60"</code> <code class="color1" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(128, 128, 128) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">cy</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="string" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"60"</code> <code class="color1" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(128, 128, 128) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">r</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="string" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"50"</code> <code class="color1" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(128, 128, 128) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">style</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="string" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"fill: blue; stroke: black; stroke-width: 2px;"</code> <code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">/></code></td></tr> </tbody></table> </div> <div class="line alt1" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; width: 2.7em !important;">3</code></td><td class="content" style="background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: auto !important;"><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"></</code><code class="keyword" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">svg</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">></code></td></tr> </tbody></table> </div> </div> </div> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> The resulting Circle SVG image will look like this:</div> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> <a class="aligncenter" href="http://www.1stwebdesigner.com/wp-content/uploads/2014/01/circle-svg.jpg" style="-webkit-transition: color 0.1s linear; background-color: #f6f6f6; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; clear: both; color: #f58220; display: block; font-weight: 900; margin: 30px auto; padding: 25px 35px; text-align: center; text-decoration: none; transition: color 0.1s linear; width: 739.6875px;"><img alt="circle-svg" class="size-full wp-image-87320" height="300" src="http://www.1stwebdesigner.com/wp-content/uploads/2014/01/circle-svg.jpg" style="border: 0px; height: auto !important; margin-bottom: 0.857142857rem; margin-top: 0.857142857rem; max-width: 100%; vertical-align: middle; width: auto;" width="300" /></a></div> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> In this example, I used the<em> circle tag</em> and then define the cx (x coordinates) and cy (y coordinates) which will determine the center of the circle. Next, I put a value of 50 on the <em>r</em> (radius), which defines the length of a line segment from its center to its perimeter. Finally, I added the styles for fill color, stroke color and stroke-width, which are pretty much self- explanatory.</div> <h2 style="clear: both; color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; margin: 0.83em 0px;"> Creating a Rectangle in SVG</h2> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> Rectangle can be executed by using rectangle tag and can draw various kinds of height and width. Check out the code below.</div> <div class="syntaxhighlighter " id="highlighter_123233" style="background-color: white; background-image: none !important; border: 1px solid rgb(224, 224, 224) !important; bottom: auto !important; color: #222222; direction: ltr !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 16px; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 1em 0px !important; outline: 0px !important; overflow: hidden; padding: 0px !important; position: relative !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 732.28125px;"> <div class="lines" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <div class="line alt1" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; width: 2.7em !important;">1</code></td><td class="content" style="background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: auto !important;"><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><</code><code class="keyword" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">svg</code> <code class="color1" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(128, 128, 128) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">height</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="string" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"300"</code> <code class="color1" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(128, 128, 128) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">width</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="string" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"300"</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">></code></td></tr> </tbody></table> </div> <div class="line alt2" style="background-color: rgb(248, 248, 248) !important; background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; width: 2.7em !important;">2</code></td><td class="content" style="background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: auto !important;"><code class="spaces" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><</code><code class="keyword" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">rect</code>  <code class="color1" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(128, 128, 128) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">width</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="string" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"250"</code> <code class="color1" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(128, 128, 128) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">height</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="string" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"100"</code> <code class="color1" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(128, 128, 128) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">rx</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="string" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"11"</code> <code class="color1" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(128, 128, 128) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">ry</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="string" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"11"</code> <code class="color1" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(128, 128, 128) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">style</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="string" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"fill: yellow; stroke: green; stroke-width: 4px;"</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">/></code></td></tr> </tbody></table> </div> <div class="line alt1" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; width: 2.7em !important;">3</code></td><td class="content" style="background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: auto !important;"><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"></</code><code class="keyword" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">svg</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">></code></td></tr> </tbody></table> </div> </div> </div> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> The resulting Rectangle SVG image will look like this:</div> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> <a class="aligncenter" href="http://www.1stwebdesigner.com/wp-content/uploads/2014/01/rectangle-svg.jpg" style="-webkit-transition: color 0.1s linear; background-color: #f6f6f6; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; clear: both; color: #f58220; display: block; font-weight: 900; margin: 30px auto; padding: 25px 35px; text-align: center; text-decoration: none; transition: color 0.1s linear; width: 739.6875px;"><img alt="rectangle-svg" class="size-full wp-image-87321" height="300" src="http://www.1stwebdesigner.com/wp-content/uploads/2014/01/rectangle-svg.jpg" style="border: 0px; height: auto !important; margin-bottom: 0.857142857rem; margin-top: 0.857142857rem; max-width: 100%; vertical-align: middle; width: auto;" width="300" /></a></div> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> Using rectangle tag, I define the width and the height of the rectangle. Then I added <em>rx</em> and <em>ry,</em> which rounds the edge of the rectangle. You can remove this two (<em>rx</em> and <em>ry</em>) if you want to have sharp edges. Next we added the styles for fill color, stroke color and stroke-width.</div> <h2 style="clear: both; color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; margin: 0.83em 0px;"> Creating an Ellipse in SVG</h2> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> Ellipse SVG can be executed by using the ellipse tag. Ellipses don’t need to have equal height and width and unlike circle SVG the radius (<em>cx</em> and <em>cy</em>) is different. Consider the code below.</div> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> Consider the code below.</div> <div class="syntaxhighlighter " id="highlighter_795354" style="background-color: white; background-image: none !important; border: 1px solid rgb(224, 224, 224) !important; bottom: auto !important; color: #222222; direction: ltr !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 16px; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 1em 0px !important; outline: 0px !important; overflow: hidden; padding: 0px !important; position: relative !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 732.28125px;"> <div class="lines" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <div class="line alt1" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; width: 2.7em !important;">1</code></td><td class="content" style="background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: auto !important;"><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><</code><code class="keyword" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">svg</code> <code class="color1" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(128, 128, 128) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">height</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="string" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"300"</code> <code class="color1" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(128, 128, 128) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">width</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="string" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"300"</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">></code></td></tr> </tbody></table> </div> <div class="line alt2" style="background-color: rgb(248, 248, 248) !important; background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; width: 2.7em !important;">2</code></td><td class="content" style="background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: auto !important;"><code class="spaces" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">   </code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><</code><code class="keyword" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">ellipse</code> <code class="color1" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(128, 128, 128) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">cx</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="string" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"190"</code> <code class="color1" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(128, 128, 128) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">cy</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="string" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"70"</code> <code class="color1" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(128, 128, 128) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">rx</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="string" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"100"</code> <code class="color1" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(128, 128, 128) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">ry</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="string" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"50"</code> <code class="color1" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(128, 128, 128) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">style</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="string" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"fill:red; stroke:green;stroke-width:2"</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">/></code></td></tr> </tbody></table> </div> <div class="line alt1" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; width: 2.7em !important;">3</code></td><td class="content" style="background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: auto !important;"><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"></</code><code class="keyword" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">svg</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">></code></td></tr> </tbody></table> </div> </div> </div> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> The resulting Ellipse SVG image will look like this:</div> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> <a class="aligncenter" href="http://www.1stwebdesigner.com/wp-content/uploads/2014/01/ellipse-svg.jpg" style="-webkit-transition: color 0.1s linear; background-color: #f6f6f6; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; clear: both; color: #f58220; display: block; font-weight: 900; margin: 30px auto; padding: 25px 35px; text-align: center; text-decoration: none; transition: color 0.1s linear; width: 739.6875px;"><img alt="ellipse-svg" class="size-full wp-image-87322" height="300" src="http://www.1stwebdesigner.com/wp-content/uploads/2014/01/ellipse-svg.jpg" style="border: 0px; height: auto !important; margin-bottom: 0.857142857rem; margin-top: 0.857142857rem; max-width: 100%; vertical-align: middle; width: auto;" width="300" /></a></div> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> The <em>cx</em> and <em>cy</em> define the center of the ellipse while the <em>rx</em> and <em>ry</em> define the radius of the ellipse. As you can see, the <em>rx</em> describes the wideness of the ellipse while the <em>ry</em> describes how tall it will be. Then we put up the styles for fill color, stroke color and stroke width.</div> <h2 style="clear: both; color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; margin: 0.83em 0px;"> Creating a Line in SVG</h2> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> Line SVG can be executed by using the line tag. From the name itself, the tag is used to draw lines. Check out the example below.</div> <div class="syntaxhighlighter " id="highlighter_448844" style="background-color: white; background-image: none !important; border: 1px solid rgb(224, 224, 224) !important; bottom: auto !important; color: #222222; direction: ltr !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 16px; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 1em 0px !important; outline: 0px !important; overflow: hidden; padding: 0px !important; position: relative !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 732.28125px;"> <div class="lines" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <div class="line alt1" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; width: 2.7em !important;">1</code></td><td class="content" style="background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: auto !important;"><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><</code><code class="keyword" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">svg</code> <code class="color1" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(128, 128, 128) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">height</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="string" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"300"</code> <code class="color1" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(128, 128, 128) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">width</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="string" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"300"</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">></code></td></tr> </tbody></table> </div> <div class="line alt2" style="background-color: rgb(248, 248, 248) !important; background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; width: 2.7em !important;">2</code></td><td class="content" style="background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: auto !important;"><code class="spaces" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><</code><code class="keyword" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">line</code> <code class="color1" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(128, 128, 128) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">x1</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="string" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"0"</code> <code class="color1" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(128, 128, 128) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">y1</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="string" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"0"</code> <code class="color1" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(128, 128, 128) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">x2</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="string" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"100"</code> <code class="color1" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(128, 128, 128) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">y2</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="string" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"150"</code> <code class="color1" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(128, 128, 128) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">style</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="string" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"stroke:#000; stroke-width:5"</code> <code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">/></code></td></tr> </tbody></table> </div> <div class="line alt1" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; width: 2.7em !important;">3</code></td><td class="content" style="background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: auto !important;"><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"></</code><code class="keyword" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">svg</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">></code></td></tr> </tbody></table> </div> </div> </div> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> The resulting Line SVG image will look like this:</div> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> <a class="aligncenter" href="http://www.1stwebdesigner.com/wp-content/uploads/2014/01/line-svg.jpg" style="-webkit-transition: color 0.1s linear; background-color: #f6f6f6; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; clear: both; color: #f58220; display: block; font-weight: 900; margin: 30px auto; padding: 25px 35px; text-align: center; text-decoration: none; transition: color 0.1s linear; width: 739.6875px;"><img alt="line-svg" class="size-full wp-image-87323" height="300" src="http://www.1stwebdesigner.com/wp-content/uploads/2014/01/line-svg.jpg" style="border: 0px; height: auto !important; margin-bottom: 0.857142857rem; margin-top: 0.857142857rem; max-width: 100%; vertical-align: middle; width: auto;" width="300" /></a></div> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> On this example, <em>x1</em> (<em>x-axis</em>) and <em>y1</em> (<em>y-axis</em>) define the starting point of the line. While <em>x2</em> (<em>x-axis</em>) and <em>y2</em> (<em>y-axis</em>) define the ending point of the line. Using the style attribute, I put a stroke color of black and a 5px stroke width.</div> <h2 style="clear: both; color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; margin: 0.83em 0px;"> Creating a Polyline in SVG</h2> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> A polyline SVG can be executed by using the polyline tag. It is used to draw shapes which are composed of straight lines. Here’s an example.</div> <div class="syntaxhighlighter " id="highlighter_825385" style="background-color: white; background-image: none !important; border: 1px solid rgb(224, 224, 224) !important; bottom: auto !important; color: #222222; direction: ltr !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 16px; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 1em 0px !important; outline: 0px !important; overflow: hidden; padding: 0px !important; position: relative !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 732.28125px;"> <div class="lines" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <div class="line alt1" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; width: 2.7em !important;">1</code></td><td class="content" style="background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: auto !important;"><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><</code><code class="keyword" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">svg</code> <code class="color1" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(128, 128, 128) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">height</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="string" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"300"</code> <code class="color1" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(128, 128, 128) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">width</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="string" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"300"</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">></code></td></tr> </tbody></table> </div> <div class="line alt2" style="background-color: rgb(248, 248, 248) !important; background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; width: 2.7em !important;">2</code></td><td class="content" style="background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: auto !important;"><code class="spaces" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">   </code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><</code><code class="keyword" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">polyline</code> <code class="color1" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(128, 128, 128) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">points</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="string" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"60,50 150,120 100,220 200,170"</code><code class="color1" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(128, 128, 128) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">style</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="string" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"fill:none;stroke:black;stroke-width:3"</code> <code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">/></code></td></tr> </tbody></table> </div> <div class="line alt1" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; width: 2.7em !important;">3</code></td><td class="content" style="background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: auto !important;"><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"></</code><code class="keyword" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">svg</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">></code></td></tr> </tbody></table> </div> </div> </div> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> The resulting Polyline SVG image will look like this:</div> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> <a class="aligncenter" href="http://www.1stwebdesigner.com/wp-content/uploads/2014/01/polyline.jpg" style="-webkit-transition: color 0.1s linear; background-color: #f6f6f6; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; clear: both; color: #f58220; display: block; font-weight: 900; margin: 30px auto; padding: 25px 35px; text-align: center; text-decoration: none; transition: color 0.1s linear; width: 739.6875px;"><img alt="polyline" class="size-full wp-image-87324" height="300" src="http://www.1stwebdesigner.com/wp-content/uploads/2014/01/polyline.jpg" style="border: 0px; height: auto !important; margin-bottom: 0.857142857rem; margin-top: 0.857142857rem; max-width: 100%; vertical-align: middle; width: auto;" width="300" /></a></div> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> Using <em>x</em> (<em>x-axis</em>) and <em>y</em> (<em>y-axis</em>), you can set the each individual points of the lines to create a specific shape you want. As you can see here I have 4 set up points joined by lines. I also added a stroke of black and a stroke-width of 3px.</div> <h2 style="clear: both; color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; margin: 0.83em 0px;"> Creating a Polygon in SVG</h2> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> Polygon SVG can be executed by using the polygon tag. This element will draw shape that has more than 3 sides. Check out the code below.</div> <div class="syntaxhighlighter " id="highlighter_264977" style="background-color: white; background-image: none !important; border: 1px solid rgb(224, 224, 224) !important; bottom: auto !important; color: #222222; direction: ltr !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 16px; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 1em 0px !important; outline: 0px !important; overflow: hidden; padding: 0px !important; position: relative !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 732.28125px;"> <div class="lines" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <div class="line alt1" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; width: 2.7em !important;">1</code></td><td class="content" style="background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: auto !important;"><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><</code><code class="keyword" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">svg</code> <code class="color1" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(128, 128, 128) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">height</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="string" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"300"</code> <code class="color1" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(128, 128, 128) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">width</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="string" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"300"</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">></code></td></tr> </tbody></table> </div> <div class="line alt2" style="background-color: rgb(248, 248, 248) !important; background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; width: 2.7em !important;">2</code></td><td class="content" style="background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: auto !important;"><code class="spaces" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><</code><code class="keyword" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">polygon</code> <code class="color1" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(128, 128, 128) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">points</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="string" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">" 60,20 100,40 100,80 60,100 20,80 20,40"</code><code class="color1" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(128, 128, 128) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">style</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="string" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"fill:cyan;stroke:red;stroke-width:1"</code> <code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">/></code></td></tr> </tbody></table> </div> <div class="line alt1" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; width: 2.7em !important;">3</code></td><td class="content" style="background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: auto !important;"><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"></</code><code class="keyword" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">svg</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">></code></td></tr> </tbody></table> </div> </div> </div> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> The resulting Polygon SVG image will look like this:</div> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> <a class="aligncenter" href="http://www.1stwebdesigner.com/wp-content/uploads/2014/01/polygon-svg.jpg" style="-webkit-transition: color 0.1s linear; background-color: #f6f6f6; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; clear: both; color: #f58220; display: block; font-weight: 900; margin: 30px auto; padding: 25px 35px; text-align: center; text-decoration: none; transition: color 0.1s linear; width: 739.6875px;"><img alt="polygon-svg" class="size-full wp-image-87325" height="300" src="http://www.1stwebdesigner.com/wp-content/uploads/2014/01/polygon-svg.jpg" style="border: 0px; height: auto !important; margin-bottom: 0.857142857rem; margin-top: 0.857142857rem; max-width: 100%; vertical-align: middle; width: auto;" width="300" /></a></div> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> In Polygon SVG, points are being defined by the <em>x</em> and <em>y</em> axis for each side of the polygon from the last point to last one. In this example, I created a hexagon with 6 sides. As you can see, there are 6 points that connects together defined by x and y axis. Then I put fill color of cyan followed by stroke color of red and stroke width of 1px.</div> <h2 style="clear: both; color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; margin: 0.83em 0px;"> Creating Paths in SVG</h2> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> Path SVG can be executed by using the path tag. This element will draw advance path and shapes which consists of curves, lines, and arcs. Among the entire SVG elements, this is one of the most functional yet hardest to learn and manipulate. Path SVG uses the following commands:</div> <ul style="-webkit-transition: padding 0.3s linear; color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin: 1em 0px; padding: 0px 0px 0px 40px; transition: padding 0.3s linear;"> <li style="list-style: url(http://www.1stwebdesigner.com/wp-content/themes/wd1_v3/img/bullet.png); padding: 0.4em;">M <i>move to</i></li> <li style="list-style: url(http://www.1stwebdesigner.com/wp-content/themes/wd1_v3/img/bullet.png); padding: 0.4em;">L <i>line to</i></li> <li style="list-style: url(http://www.1stwebdesigner.com/wp-content/themes/wd1_v3/img/bullet.png); padding: 0.4em;">V <i>vertical line to</i></li> <li style="list-style: url(http://www.1stwebdesigner.com/wp-content/themes/wd1_v3/img/bullet.png); padding: 0.4em;">H <i>horizontal line to</i></li> <li style="list-style: url(http://www.1stwebdesigner.com/wp-content/themes/wd1_v3/img/bullet.png); padding: 0.4em;">C<i> curve to</i></li> <li style="list-style: url(http://www.1stwebdesigner.com/wp-content/themes/wd1_v3/img/bullet.png); padding: 0.4em;">S<i> smooth curve to</i></li> <li style="list-style: url(http://www.1stwebdesigner.com/wp-content/themes/wd1_v3/img/bullet.png); padding: 0.4em;">T<i> quadratic Bézier curve</i></li> <li style="list-style: url(http://www.1stwebdesigner.com/wp-content/themes/wd1_v3/img/bullet.png); padding: 0.4em;">A<i> elliptical arc</i></li> <li style="list-style: url(http://www.1stwebdesigner.com/wp-content/themes/wd1_v3/img/bullet.png); padding: 0.4em;">Z<i> close path</i></li> </ul> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> Uppercase letters mean the position will absolutely position while lowercase letters mean relative positioning. See the example below.</div> <div class="syntaxhighlighter " id="highlighter_6343" style="background-color: white; background-image: none !important; border: 1px solid rgb(224, 224, 224) !important; bottom: auto !important; color: #222222; direction: ltr !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 16px; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 1em 0px !important; outline: 0px !important; overflow: hidden; padding: 0px !important; position: relative !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 732.28125px;"> <div class="lines" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <div class="line alt1" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; width: 2.7em !important;">1</code></td><td class="content" style="background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: auto !important;"><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><</code><code class="keyword" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">svg</code> <code class="color1" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(128, 128, 128) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">height</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="string" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"300"</code> <code class="color1" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(128, 128, 128) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">width</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="string" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"300"</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">></code></td></tr> </tbody></table> </div> <div class="line alt2" style="background-color: rgb(248, 248, 248) !important; background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; width: 2.7em !important;">2</code></td><td class="content" style="background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: auto !important;"><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><</code><code class="keyword" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">path</code> <code class="color1" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(128, 128, 128) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">d</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="string" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"M 30 40 C 140 -30 180 90 20 160 L 120 160"</code> <code class="color1" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(128, 128, 128) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">style</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="string" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"fill: none; stroke: black; stroke-width: 6px;"</code> <code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">/></code></td></tr> </tbody></table> </div> <div class="line alt1" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; width: 2.7em !important;">3</code></td><td class="content" style="background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: auto !important;"><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"></</code><code class="keyword" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">svg</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">></code></td></tr> </tbody></table> </div> </div> </div> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> The resulting Path SVG image will look like this:</div> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> <a class="aligncenter" href="http://www.1stwebdesigner.com/wp-content/uploads/2014/01/path-svg.jpg" style="-webkit-transition: color 0.1s linear; background-color: #f6f6f6; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; clear: both; color: #f58220; display: block; font-weight: 900; margin: 30px auto; padding: 25px 35px; text-align: center; text-decoration: none; transition: color 0.1s linear; width: 739.6875px;"><img alt="path-svg" class="size-full wp-image-87326" height="300" src="http://www.1stwebdesigner.com/wp-content/uploads/2014/01/path-svg.jpg" style="border: 0px; height: auto !important; margin-bottom: 0.857142857rem; margin-top: 0.857142857rem; max-width: 100%; vertical-align: middle; width: auto;" width="300" /></a></div> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> From the code above, you can see that I used the letter <em>d</em>. This <em>d</em> attribute will always be a move command. Next, I use M which means move to. Before you can draw anything, you must move the virtual cursor to your preferred location. So for this example, I move the x-axis to 30 white the y-axis to 40. The curve begins at 140, -30 as our tangent starting point. Next the curve points down to the right with the points 180, 90 and ends up with 20, 160. To finalize the path, I created a line with points 120 and 160.</div> <h2 style="clear: both; color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; margin: 0.83em 0px;"> Creating Text in SVG</h2> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> Text SVGs can be executed by using the tag enclosed with the text tag. This element is used to draw text in an SVG image.</div> <div class="syntaxhighlighter " id="highlighter_785786" style="background-color: white; background-image: none !important; border: 1px solid rgb(224, 224, 224) !important; bottom: auto !important; color: #222222; direction: ltr !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 16px; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 1em 0px !important; outline: 0px !important; overflow: hidden; padding: 0px !important; position: relative !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 732.28125px;"> <div class="lines" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <div class="line alt1" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; width: 2.7em !important;">1</code></td><td class="content" style="background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: auto !important;"><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><</code><code class="keyword" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">svg</code> <code class="color1" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(128, 128, 128) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">height</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="string" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"300"</code> <code class="color1" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(128, 128, 128) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">width</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="string" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"300"</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">></code></td></tr> </tbody></table> </div> <div class="line alt2" style="background-color: rgb(248, 248, 248) !important; background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; width: 2.7em !important;">2</code></td><td class="content" style="background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: auto !important;"><code class="spaces" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">  </code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><</code><code class="keyword" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">text</code> <code class="color1" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(128, 128, 128) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">x</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="string" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"20"</code> <code class="color1" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(128, 128, 128) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">y</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="string" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"30"</code> <code class="color1" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(128, 128, 128) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">fill</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="string" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"blue"</code> <code class="color1" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(128, 128, 128) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">font-size</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="string" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"20"</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">>This a great sample for Text SVG! </</code><code class="keyword" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">text</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">></code></td></tr> </tbody></table> </div> <div class="line alt1" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; width: 2.7em !important;">3</code></td><td class="content" style="background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: auto !important;"><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"></</code><code class="keyword" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">svg</code><code class="plain" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">></code></td></tr> </tbody></table> </div> </div> </div> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> The resulting Text SVG image will look like this:</div> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> <a class="aligncenter" href="http://www.1stwebdesigner.com/wp-content/uploads/2014/01/text-svg.jpg" style="-webkit-transition: color 0.1s linear; background-color: #f6f6f6; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; clear: both; color: #f58220; display: block; font-weight: 900; margin: 30px auto; padding: 25px 35px; text-align: center; text-decoration: none; transition: color 0.1s linear; width: 739.6875px;"><img alt="text-svg" class="size-full wp-image-87327" height="300" src="http://www.1stwebdesigner.com/wp-content/uploads/2014/01/text-svg.jpg" style="border: 0px; height: auto !important; margin-bottom: 0.857142857rem; margin-top: 0.857142857rem; max-width: 100%; vertical-align: middle; width: auto;" width="300" /></a></div> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> In this example, I set the x-axis position of the text to 20. This will place the text 20 px from the left while I set up the y-axis to 30, which will place the text 30 px from the top. Next, I set up a fill color of blue and set the font size to 20px. This will display the text “This a great sample for Text SVG!”</div> <h2 style="clear: both; color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; margin: 0.83em 0px;"> Creating SVG in Adobe Illustrator</h2> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> Aside from creating SVG images manually using the <em>svg</em> tag along with the element’s code or tag, you can also create SVG images using Adobe Illustrator. For this part of the tutorial, let’s create a simple star using Adobe Illustrator.</div> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> To start create a new document in Adobe Illustrator, you can name it in your own preferred document name but for this tutorial, I’ll rename it Star-SVG. For the Document Profile, select <i>Web</i>. The number of artboard will be one and the size, I’ll leave it to 800 x 600px.</div> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> <a class="aligncenter" href="http://www.1stwebdesigner.com/wp-content/uploads/2014/01/resolution-svg.png" style="-webkit-transition: color 0.1s linear; background-color: #f6f6f6; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; clear: both; color: #f58220; display: block; font-weight: 900; margin: 30px auto; padding: 25px 35px; text-align: center; text-decoration: none; transition: color 0.1s linear; width: 739.6875px;"><img alt="resolution-svg" class="size-medium wp-image-87328" height="306" src="http://www.1stwebdesigner.com/wp-content/uploads/2014/01/resolution-svg-570x306.png" style="border: 0px; height: auto !important; margin-bottom: 0.857142857rem; margin-top: 0.857142857rem; max-width: 100%; vertical-align: middle; width: auto;" width="570" /></a></div> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> <span class="GINGER_SOFTWARE_mark" id="2bfc7664-5d3c-45b4-8264-c2b3421a2bc2">Next select,</span> the find <i>Star tool</i> on the toolbar and draw a star in your preferred size.</div> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> <a class="aligncenter" href="http://www.1stwebdesigner.com/wp-content/uploads/2014/01/tools-svg.png" style="-webkit-transition: color 0.1s linear; background-color: #f6f6f6; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; clear: both; color: #f58220; display: block; font-weight: 900; margin: 30px auto; padding: 25px 35px; text-align: center; text-decoration: none; transition: color 0.1s linear; width: 739.6875px;"><img alt="tools-svg" class="size-full wp-image-87329" height="468" src="http://www.1stwebdesigner.com/wp-content/uploads/2014/01/tools-svg.png" style="border: 0px; height: auto !important; margin-bottom: 0.857142857rem; margin-top: 0.857142857rem; max-width: 100%; vertical-align: middle; width: auto;" width="229" /></a></div> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> <a class="aligncenter" href="http://www.1stwebdesigner.com/wp-content/uploads/2014/01/star-draw.jpg" style="-webkit-transition: color 0.1s linear; background-color: #f6f6f6; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; clear: both; color: #f58220; display: block; font-weight: 900; margin: 30px auto; padding: 25px 35px; text-align: center; text-decoration: none; transition: color 0.1s linear; width: 739.6875px;"><img alt="star-draw" class="size-medium wp-image-87330" height="302" src="http://www.1stwebdesigner.com/wp-content/uploads/2014/01/star-draw-570x302.jpg" style="border: 0px; height: auto !important; margin-bottom: 0.857142857rem; margin-top: 0.857142857rem; max-width: 100%; vertical-align: middle; width: auto;" width="570" /></a></div> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> To change the color of the star, <span style="color: #333333;">use</span> the color <span class="GINGER_SOFTWARE_mark" id="569eec8f-bf5c-4b3f-a434-f0aae3a2ac43">palette</span> on the top. For this tutorial, <span class="GINGER_SOFTWARE_mark" id="4d9bffe3-d997-4550-8c6b-dac11129d0a1">I</span> selected the following green color properties R=34, G=181, B=115 but feel free to choose your own color.</div> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> <a class="aligncenter" href="http://www.1stwebdesigner.com/wp-content/uploads/2014/01/color-fill.png" style="-webkit-transition: color 0.1s linear; background-color: #f6f6f6; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; clear: both; color: #f58220; display: block; font-weight: 900; margin: 30px auto; padding: 25px 35px; text-align: center; text-decoration: none; transition: color 0.1s linear; width: 739.6875px;"><img alt="color fill" class="size-full wp-image-87331" height="148" src="http://www.1stwebdesigner.com/wp-content/uploads/2014/01/color-fill.png" style="border: 0px; height: auto !important; margin-bottom: 0.857142857rem; margin-top: 0.857142857rem; max-width: 100%; vertical-align: middle; width: auto;" width="306" /></a></div> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> Next, let’s fix the <span class="GINGER_SOFTWARE_mark" id="ce36fed2-2161-48b9-a9ef-1ab0ec985243">artboard</span> size using the A<span class="GINGER_SOFTWARE_mark" id="5688e41a-d584-4906-b381-2aac08a2f7cc">rtboard</span><span class="GINGER_SOFTWARE_mark" id="5688e41a-d584-4906-b381-2aac08a2f7cc"></span><span class="GINGER_SOFTWARE_mark" id="5688e41a-d584-4906-b381-2aac08a2f7cc"></span> Tool. Go ahead and select the <i><span class="GINGER_SOFTWARE_mark" id="959543dd-e40f-4a84-b0bb-43e02f964a86"><span class="GINGER_SOFTWARE_mark" id="3bbf9d96-d279-4acf-952d-779e8ef3de4e">Artboard</span></span> </i>tool on the toolbar and then double click the star path we created. You will notice that our background <span class="GINGER_SOFTWARE_mark" id="0d919046-7947-4b11-92f9-685de0edbb62">fit</span> to the size of the star path.</div> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> <a class="aligncenter" href="http://www.1stwebdesigner.com/wp-content/uploads/2014/01/artboard.jpg" style="-webkit-transition: color 0.1s linear; background-color: #f6f6f6; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; clear: both; color: #f58220; display: block; font-weight: 900; margin: 30px auto; padding: 25px 35px; text-align: center; text-decoration: none; transition: color 0.1s linear; width: 739.6875px;"><img alt="artboard" class="size-full wp-image-87332" height="238" src="http://www.1stwebdesigner.com/wp-content/uploads/2014/01/artboard.jpg" style="border: 0px; height: auto !important; margin-bottom: 0.857142857rem; margin-top: 0.857142857rem; max-width: 100%; vertical-align: middle; width: auto;" width="165" /></a></div> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> <a class="aligncenter" href="http://www.1stwebdesigner.com/wp-content/uploads/2014/01/change.jpg" style="-webkit-transition: color 0.1s linear; background-color: #f6f6f6; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; clear: both; color: #f58220; display: block; font-weight: 900; margin: 30px auto; padding: 25px 35px; text-align: center; text-decoration: none; transition: color 0.1s linear; width: 739.6875px;"><img alt="change" class="size-full wp-image-87333" height="273" src="http://www.1stwebdesigner.com/wp-content/uploads/2014/01/change.jpg" style="border: 0px; height: auto !important; margin-bottom: 0.857142857rem; margin-top: 0.857142857rem; max-width: 100%; vertical-align: middle; width: auto;" width="282" /></a></div> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> Then, let’s save this file as an SVG file for  now. Go to File, then Save As and then on the File name, put your preferred file name but for this tutorial I will name it <i>Star-SVG</i>. For the save as <span class="GINGER_SOFTWARE_mark" id="e130804c-7c35-40c1-832b-7b342a0ec702">type, select</span> SVG.</div> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> <a class="aligncenter" href="http://www.1stwebdesigner.com/wp-content/uploads/2014/01/save-as.jpg" style="-webkit-transition: color 0.1s linear; background-color: #f6f6f6; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; clear: both; color: #f58220; display: block; font-weight: 900; margin: 30px auto; padding: 25px 35px; text-align: center; text-decoration: none; transition: color 0.1s linear; width: 739.6875px;"><img alt="save-as" class="size-medium wp-image-87334" height="494" src="http://www.1stwebdesigner.com/wp-content/uploads/2014/01/save-as-570x494.jpg" style="border: 0px; height: auto !important; margin-bottom: 0.857142857rem; margin-top: 0.857142857rem; max-width: 100%; vertical-align: middle; width: auto;" width="570" /></a></div> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> A new <span class="GINGER_SOFTWARE_mark" id="bd9dc02a-fc74-4816-84a2-8657d32b68d0">window</span> will appear. <span class="GINGER_SOFTWARE_mark" id="bc043a20-8f07-41b5-8585-bb9f57115f46">On</span> this <span class="GINGER_SOFTWARE_mark" id="05e20e9c-9085-4fef-ad10-fa924cb0035b">window, select</span> SVG 1.1 on the SVG Profiles section. To show the SVG code of the Star SVG created, just click on the <i>Show SVG Code</i> button on the bottom of the window. By default, on Windows, it will show the SVG code <span class="GINGER_SOFTWARE_mark" id="925bf491-493d-4ca3-9913-0c59acfd637e">on</span> your browser default. <span class="GINGER_SOFTWARE_mark" id="11a31a03-2eb4-4955-aeae-0c5060cdaedc">Finally, click</span> the <span class="GINGER_SOFTWARE_mark" id="7cce9432-4128-483d-bafb-55e8cf4cc0cb">OK</span> button.</div> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> <a class="aligncenter" href="http://www.1stwebdesigner.com/wp-content/uploads/2014/01/show-svg-code..png" style="-webkit-transition: color 0.1s linear; background-color: #f6f6f6; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; clear: both; color: #f58220; display: block; font-weight: 900; margin: 30px auto; padding: 25px 35px; text-align: center; text-decoration: none; transition: color 0.1s linear; width: 739.6875px;"><img alt="show-svg code." class="size-full wp-image-87335" height="414" src="http://www.1stwebdesigner.com/wp-content/uploads/2014/01/show-svg-code..png" style="border: 0px; height: auto !important; margin-bottom: 0.857142857rem; margin-top: 0.857142857rem; max-width: 100%; vertical-align: middle; width: auto;" width="516" /></a></div> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> <a class="aligncenter" href="http://www.1stwebdesigner.com/css/svg-tutorial/attachment/star/#main" rel="attachment wp-att-88743" style="-webkit-transition: color 0.1s linear; background-color: #f6f6f6; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; clear: both; color: #f58220; display: block; font-weight: 900; margin: 30px auto; padding: 25px 35px; text-align: center; text-decoration: none; transition: color 0.1s linear; width: 739.6875px;"><img alt="star" class="size-full wp-image-88743" height="199" src="http://www.1stwebdesigner.com/wp-content/uploads/2014/03/star.png" style="border: 0px; height: auto !important; margin-bottom: 0.857142857rem; margin-top: 0.857142857rem; max-width: 100%; vertical-align: middle; width: auto;" width="775" /></a></div> <h2 style="clear: both; color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; margin: 0.83em 0px;"> Wrapping Up</h2> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> Using SVG in your projects gives you a lot of advantages. <span style="color: #333333;">The continuing progress of retina and mobile application gives more and more opportunity to display high quality of images on the web. </span>JPEG, PNG and GIF files might be <span class="GINGER_SOFTWARE_mark" id="6aefc6e8-f2e9-4e97-8a8c-fdf09bf25af2">helpful but</span> as the screen <span class="GINGER_SOFTWARE_mark" id="4550912c-2224-4f34-bfa3-20e856692654">changes</span>, using vector-based images <span class="GINGER_SOFTWARE_mark" id="a1051cfa-2ff0-4761-b3e4-0d54fd9f02d0">is</span> the best way to go to a better image appearance on the web.</div> <div style="color: #222222; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', HelveticaNeue, HelveticaNeueLT, Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-top: 1em; word-break: break-word;"> So now that you understand the basics of SVG it’s a great idea to explore on your own. There are plenty of tutorials on the web teaching advance lessons about SVG that can help you dig down a little bit more regarding this topic. Hope you enjoyed this tutorial and see you next time.</div>

• 
• 
• 
• 
• 

1. 1
2. 2
3. 3
4. 4
5. 5

• Previous
• Next

Creating Shapes with SVG : An SVG Tutorial

Have you tried using the SVG image format? Here is an SVG tutorial to help you delve deeper on how to use this image format to your full advantage. In the past, the only image format that was support…

Read more »