Ultimate Flag Icons Collection

<h2 class="postTitle" style="color: #232136; font-family: 'Lucida Grande', arial, sans-serif; font-size: 24px; line-height: 24px; margin: 0px 0px 15px; padding: 0px;"> <br /></h2> <iframe allowtransparency="true" frameborder="0" no="" src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwebdesignfan.com%2Fultimate-flag-icons-collection%2F&layout=button_count&action=like&width=92&height=20&colorscheme=light%20scrolling=" style="border-style: none; color: #4a485e; font-family: 'Lucida Grande', arial, sans-serif; font-size: 12px; height: 20px; overflow: hidden; width: 92px;"></iframe><span style="color: #4a485e; font-family: 'Lucida Grande', arial, sans-serif; font-size: 12px;"></span><br /> <div class="postThumb" style="-webkit-box-shadow: rgb(230, 230, 232) -1px 0px 0px, rgb(230, 230, 232) 1px 0px 0px, rgb(180, 180, 187) 0px 1px 0px, rgb(230, 230, 232) 0px 2px 0px; border: 5px solid rgb(240, 240, 234); box-shadow: rgb(230, 230, 232) -1px 0px 0px, rgb(230, 230, 232) 1px 0px 0px, rgb(180, 180, 187) 0px 1px 0px, rgb(230, 230, 232) 0px 2px 0px; color: #4a485e; float: left; font-family: 'Lucida Grande', arial, sans-serif; font-size: 12px; height: 244px; margin: 0px 23px 10px 0px; padding: 0px; width: 244px;"> <div class="postThumbnails" style="-webkit-box-shadow: rgb(115, 115, 115) 0px 0px 10px inset; box-shadow: rgb(115, 115, 115) 0px 0px 10px inset; margin: 0px; padding: 0px;"> <a href="http://webdesignfan.com/ultimate-flag-icons-collection/" style="background-attachment: initial; background-clip: initial; background-image: url(http://webdesignfan.com/wp-content/themes/webdesignfan/timthumb.php?src=http://webdesignfan.com/wp-content/uploads/2010/10/ultimate_flag_icons_collection.jpg&w=244&h=244); background-origin: initial; background-position: initial; background-repeat: no-repeat; background-size: initial; color: #3eb7d0; display: block; font-weight: bold; height: 244px; outline: none; text-decoration: none; width: 244px;"></a></div> </div> <div class="postDetails" style="color: #4a485e; font-family: 'Lucida Grande', arial, sans-serif; font-size: 12px; margin: 15px 0px 0px; padding: 0px;"> <div class="singlePostMeta" style="background-attachment: initial; background-clip: initial; background-image: url(http://webdesignfan.com/wp-content/themes/webdesignfan/images/singlePostDetailsBG.png); background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; color: #aeaea9; float: right; font-size: 11px; font-style: italic; font-weight: bold; height: 30px; line-height: 30px; margin: 0px 12px 17px 0px; padding: 0px 3px; text-align: center; width: 303px;"> <span style="padding-right: 4px;">Written By</span><span class="authorLink" style="color: #e8725b; font-style: normal; padding-right: 4px;"><a href="http://despreneur.com/" rel="author external" style="color: #e8725b; outline: none;" title="Visit Tomas Laurinavicius’s website">Tomas Laurinavicius</a></span><span style="padding-right: 4px;">in</span><span class="categoriesList" style="color: #46b9d1; font-style: normal; padding-right: 4px;"><a href="http://webdesignfan.com/category/graphics/" rel="category tag" style="color: #46b9d1; outline: none;" title="View all posts in Graphics">Graphics</a></span></div> <div style="margin: 0px; padding: 0px;"> <a class="DiggThisButton DiggMedium" href="http://digg.com/submit?url=http%3A%2F%2Fwebdesignfan.com%2Fultimate-flag-icons-collection%2F&title=Ultimate%20Flag%20Icons%20Collection" style="color: #3eb7d0; font-weight: bold; outline: none; text-decoration: none;"></a><iframe allowtransparency="true" class="twitter-share-button twitter-tweet-button twitter-share-button twitter-count-vertical" data-twttr-rendered="true" frameborder="0" id="twitter-widget-0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.12a0910b1b8c2c2ad25af3fcd05d55c1.en.html#_=1431345624918&count=vertical&dnt=false&id=twitter-widget-0&lang=en&original_referer=http%3A%2F%2Fwebdesignfan.com%2Fultimate-flag-icons-collection%2F&size=m&text=Ultimate%20Flag%20Icons%20Collection&url=http%3A%2F%2Fwebdesignfan.com%2Fultimate-flag-icons-collection%2F&via=webdesignfan" style="height: 61px; position: static; visibility: visible; width: 56px;" title="Twitter Tweet Button"></iframe> <iframe allowtransparency="true" frameborder="0" height="60" id="iframe-stmblpn-widget-1" scrolling="no" src="http://badge.stumbleupon.com/badge/embed/5/?url=http%3A%2F%2Fwebdesignfan.com%2Fultimate-flag-icons-collection%2F" style="border-width: 0px; margin: 0px; overflow: hidden; padding: 0px;" width="50"></iframe><br /></div> <div class="postBody" style="color: #6f6f71; font-family: Myriad-Pro, Arial, sans-serif; font-size: 13px; line-height: 18px; margin: 0px; padding: 0px;"> <div style="margin-bottom: 20px; padding: 0px;"> Introducing the ultimate flag icons set with 2700+ different icons.  Within this collection, you will definitely be able to find your favourite country flag in desired format or size. Collected icons are very various, starting from glossy, wavy, rounded and finishing with minimalistic style icons. I hope you will find this collection useful for your desktop, app or web design project.</div> <h4 style="color: #38a3b9; font-size: 14px; line-height: 24px; margin: 0px; padding: 8px 0px;"> Important:</h4> <div style="margin-bottom: 20px; padding: 0px;"> You should read the license of each icon set before using them in your designs. Some of the icon sets are available only for personal use.</div> <h3 style="color: #232136; font-size: 18px; line-height: 24px; margin: 0px; padding: 8px 0px;"> 1. <a href="http://www.famfamfam.com/lab/icons/flags/" style="color: #3eb7d0; outline: none; text-decoration: none;">Flag Icons</a></h3> <div style="margin-bottom: 20px; padding: 0px;"> <a href="http://www.famfamfam.com/lab/icons/flags/" style="color: #3eb7d0; font-weight: bold; outline: none; text-decoration: none;"><img alt="ultimate flag icons collection famfamfam " class="size-full wp-image-5209 alignnone" height="158" src="http://webdesignfan.com/wp-content/uploads/2010/10/ultimate_flag_icons_collection_famfamfam.jpg" style="-webkit-box-shadow: rgb(230, 230, 232) -1px 0px 0px, rgb(230, 230, 232) 1px 0px 0px, rgb(180, 180, 187) 0px 1px 0px, rgb(230, 230, 232) 0px 2px 0px; border: 5px solid rgb(240, 240, 234); box-shadow: rgb(230, 230, 232) -1px 0px 0px, rgb(230, 230, 232) 1px 0px 0px, rgb(180, 180, 187) 0px 1px 0px, rgb(230, 230, 232) 0px 2px 0px; float: none;" title="Ultimate Flag Icons Collection" width="590" /></a></div> <div style="margin-bottom: 20px; padding: 0px;"> 247 icons in GIF and PNG formats. These flag icons are available for free use for any purpose with no requirement for attribution.</div> <h3 style="color: #232136; font-size: 18px; line-height: 24px; margin: 0px; padding: 8px 0px;"> 2. <a href="http://webtrickz.com/free-37-country-flag-icons-in-png-ico-and-icns-format/" style="color: #3eb7d0; outline: none; text-decoration: none;">Free 37 Country Flag Icons in PNG, ICO and ICNS Format</a></h3> <div style="margin-bottom: 20px; padding: 0px;"> <a href="http://webtrickz.com/free-37-country-flag-icons-in-png-ico-and-icns-format/" style="color: #3eb7d0; font-weight: bold; outline: none; text-decoration: none;"><img alt="ultimate flag icons collection free 37 country flag icons " class="alignnone size-full wp-image-5212" height="144" src="http://webdesignfan.com/wp-content/uploads/2010/10/ultimate_flag_icons_collection_free_37_country_flag_icons.jpg" style="-webkit-box-shadow: rgb(230, 230, 232) -1px 0px 0px, rgb(230, 230, 232) 1px 0px 0px, rgb(180, 180, 187) 0px 1px 0px, rgb(230, 230, 232) 0px 2px 0px; border: 5px solid rgb(240, 240, 234); box-shadow: rgb(230, 230, 232) -1px 0px 0px, rgb(230, 230, 232) 1px 0px 0px, rgb(180, 180, 187) 0px 1px 0px, rgb(230, 230, 232) 0px 2px 0px; float: none;" title="Ultimate Flag Icons Collection" width="590" /></a></div> <div style="margin-bottom: 20px; padding: 0px;"> 37 country flag icons which are rendered at 256×256, 128×128, 64×64, 48×48, 32×32, 16×16 pixels. These icons are available for free download in formats like PNG, CO and ICNS.</div> <h3 style="color: #232136; font-size: 18px; line-height: 24px; margin: 0px; padding: 8px 0px;"> 3. <a href="http://www.gosquared.com/liquidicity/archives/1493" rel="bookmark" style="color: #3eb7d0; outline: none; text-decoration: none;" title="Permanent link to 2400 Flag Icon Set">2400 Flag Icon Set</a></h3> <div style="margin-bottom: 20px; padding: 0px;"> <a href="http://www.gosquared.com/liquidicity/archives/1493" style="color: #3eb7d0; font-weight: bold; outline: none; text-decoration: none;"><img alt="ultimate flag icons collection 2400 flag icon set " class="alignnone size-full wp-image-5215" height="240" src="http://webdesignfan.com/wp-content/uploads/2010/10/ultimate_flag_icons_collection_2400_flag_icon_set.jpg" style="-webkit-box-shadow: rgb(230, 230, 232) -1px 0px 0px, rgb(230, 230, 232) 1px 0px 0px, rgb(180, 180, 187) 0px 1px 0px, rgb(230, 230, 232) 0px 2px 0px; border: 5px solid rgb(240, 240, 234); box-shadow: rgb(230, 230, 232) -1px 0px 0px, rgb(230, 230, 232) 1px 0px 0px, rgb(180, 180, 187) 0px 1px 0px, rgb(230, 230, 232) 0px 2px 0px; float: none;" title="Ultimate Flag Icons Collection" width="590" /></a></div> <div style="margin-bottom: 20px; padding: 0px;"> These icons are in several sizes so they’ll look great no matter where you’re using them – 16×16, 24×24, 32×32, 48×48 and 64×64. Icons provided in 2 variants – as flat and standard, and with a lovely glossy finish. Free for personal use.</div> <h3 style="color: #232136; font-size: 18px; line-height: 24px; margin: 0px; padding: 8px 0px;"> 4. <a href="http://www.bartelme.at/journal/archive/flag_button_devkit/" style="color: #3eb7d0; outline: none; text-decoration: none;">Flag Button Devkit</a></h3> <div style="margin-bottom: 20px; padding: 0px;"> <a href="http://www.bartelme.at/journal/archive/flag_button_devkit/" style="color: #3eb7d0; font-weight: bold; outline: none; text-decoration: none;"><img alt="ultimate flag icons collection flag button devkit " class="alignnone size-full wp-image-5218" height="240" src="http://webdesignfan.com/wp-content/uploads/2010/10/ultimate_flag_icons_collection_flag_button_devkit.jpg" style="-webkit-box-shadow: rgb(230, 230, 232) -1px 0px 0px, rgb(230, 230, 232) 1px 0px 0px, rgb(180, 180, 187) 0px 1px 0px, rgb(230, 230, 232) 0px 2px 0px; border: 5px solid rgb(240, 240, 234); box-shadow: rgb(230, 230, 232) -1px 0px 0px, rgb(230, 230, 232) 1px 0px 0px, rgb(180, 180, 187) 0px 1px 0px, rgb(230, 230, 232) 0px 2px 0px; float: none;" title="Ultimate Flag Icons Collection" width="590" /></a></div> <div style="margin-bottom: 20px; padding: 0px;"> Great tool for creating your own icons. To create a new button, just duplicate a layer group and paste the new flag into the respective layer. It’s as simple as that.</div> <h3 style="color: #232136; font-size: 18px; line-height: 24px; margin: 0px; padding: 8px 0px;"> 5. <a href="http://www.chethstudios.net/2010/10/country-flags-national-flag-icons.html" style="color: #3eb7d0; outline: none; text-decoration: none;">200+ Country Flags – Massive Freebie Icon Pack</a></h3> <div style="margin-bottom: 20px; padding: 0px;"> <a href="http://www.chethstudios.net/2010/10/country-flags-national-flag-icons.html" style="color: #3eb7d0; font-weight: bold; outline: none; text-decoration: none;"><img alt="ultimate flag icons collection 200 country flags " class="alignnone size-full wp-image-5221" height="192" src="http://webdesignfan.com/wp-content/uploads/2010/10/ultimate_flag_icons_collection_200_country_flags.jpg" style="-webkit-box-shadow: rgb(230, 230, 232) -1px 0px 0px, rgb(230, 230, 232) 1px 0px 0px, rgb(180, 180, 187) 0px 1px 0px, rgb(230, 230, 232) 0px 2px 0px; border: 5px solid rgb(240, 240, 234); box-shadow: rgb(230, 230, 232) -1px 0px 0px, rgb(230, 230, 232) 1px 0px 0px, rgb(180, 180, 187) 0px 1px 0px, rgb(230, 230, 232) 0px 2px 0px; float: none;" title="Ultimate Flag Icons Collection" width="590" /></a></div> <div style="margin-bottom: 20px; padding: 0px;"> Icon pack includes PNG and PSD files for all kinds of projects. Released as a freebie, author would love to get a link to <a href="http://www.chethstudios.net/" style="color: #3eb7d0; font-weight: bold; outline: none; text-decoration: none;" target="_blank">chethstudios</a> if you use it anywhere.</div> <h3 style="color: #232136; font-size: 18px; line-height: 24px; margin: 0px; padding: 8px 0px;"> 6. <a href="http://www.printableworldflags.com/flag-icon" style="color: #3eb7d0; outline: none; text-decoration: none;">243 Free World Flag Icons</a></h3> <div style="margin-bottom: 20px; padding: 0px;"> <a href="http://www.printableworldflags.com/flag-icon" style="color: #3eb7d0; font-weight: bold; outline: none; text-decoration: none;"><img alt="ultimate flag icons collection 243 flag icons " class="alignnone size-full wp-image-5224" height="192" src="http://webdesignfan.com/wp-content/uploads/2010/10/ultimate_flag_icons_collection_243_flag_icons.jpg" style="-webkit-box-shadow: rgb(230, 230, 232) -1px 0px 0px, rgb(230, 230, 232) 1px 0px 0px, rgb(180, 180, 187) 0px 1px 0px, rgb(230, 230, 232) 0px 2px 0px; border: 5px solid rgb(240, 240, 234); box-shadow: rgb(230, 230, 232) -1px 0px 0px, rgb(230, 230, 232) 1px 0px 0px, rgb(180, 180, 187) 0px 1px 0px, rgb(230, 230, 232) 0px 2px 0px; float: none;" title="Ultimate Flag Icons Collection" width="590" /></a></div> <div style="margin-bottom: 20px; padding: 0px;"> All 243 PNG icon flags in 3 sizes linked from this page are made free by <a href="http://www.icondrawer.com/" style="color: #3eb7d0; font-weight: bold; outline: none; text-decoration: none;">Icon Drawer</a>.</div> <h3 style="color: #232136; font-size: 18px; line-height: 24px; margin: 0px; padding: 8px 0px;"> 7. <a href="http://www.nordicfactory.com/creative/illustrations/download-free-flag-set-in-png/" rel="bookmark" style="color: #3eb7d0; outline: none; text-decoration: none;" title="Permanent Link: Download Free Flag Set in PNG">Download Free Flag Set in PNG</a></h3> <div style="margin-bottom: 20px; padding: 0px;"> <a href="http://www.nordicfactory.com/creative/illustrations/download-free-flag-set-in-png/" style="color: #3eb7d0; font-weight: bold; outline: none; text-decoration: none;"><img alt="ultimate flag icons collection free flag set in png " class="alignnone size-full wp-image-5227" height="250" src="http://webdesignfan.com/wp-content/uploads/2010/10/ultimate_flag_icons_collection_free_flag_set_in_png.jpg" style="-webkit-box-shadow: rgb(230, 230, 232) -1px 0px 0px, rgb(230, 230, 232) 1px 0px 0px, rgb(180, 180, 187) 0px 1px 0px, rgb(230, 230, 232) 0px 2px 0px; border: 5px solid rgb(240, 240, 234); box-shadow: rgb(230, 230, 232) -1px 0px 0px, rgb(230, 230, 232) 1px 0px 0px, rgb(180, 180, 187) 0px 1px 0px, rgb(230, 230, 232) 0px 2px 0px; float: none;" title="Ultimate Flag Icons Collection" width="590" /></a></div> <div style="margin-bottom: 20px; padding: 0px;"> Neat, glossy flag set, covering all major countries and states in the world, for a prior project. All of them are saved in PNG-24 format with semi-transparency. Please include a link to nordicfactory.com on your page when using the flags.</div> <h3 style="color: #232136; font-size: 18px; line-height: 24px; margin: 0px; padding: 8px 0px;"> 8. <a href="http://www.dooffy.com/cs/ikony-ke-stazeni-vlajky-evropske-unie-eu-free-icons-download.html" style="color: #3eb7d0; outline: none; text-decoration: none;">European Union Flags</a></h3> <div style="margin-bottom: 20px; padding: 0px;"> <a href="http://www.dooffy.com/cs/ikony-ke-stazeni-vlajky-evropske-unie-eu-free-icons-download.html" style="color: #3eb7d0; font-weight: bold; outline: none; text-decoration: none;"><img alt="ultimate flag icons collection european union flags " class="alignnone size-full wp-image-5230" height="250" src="http://webdesignfan.com/wp-content/uploads/2010/10/ultimate_flag_icons_collection_european_union_flags.jpg" style="-webkit-box-shadow: rgb(230, 230, 232) -1px 0px 0px, rgb(230, 230, 232) 1px 0px 0px, rgb(180, 180, 187) 0px 1px 0px, rgb(230, 230, 232) 0px 2px 0px; border: 5px solid rgb(240, 240, 234); box-shadow: rgb(230, 230, 232) -1px 0px 0px, rgb(230, 230, 232) 1px 0px 0px, rgb(180, 180, 187) 0px 1px 0px, rgb(230, 230, 232) 0px 2px 0px; float: none;" title="Ultimate Flag Icons Collection" width="590" /></a></div> <div style="margin-bottom: 20px; padding: 0px;"> Free icons created by Doofy Design. Includes 512×512, 256×256, 128×128, 64×64 and 32×32 px sizes and JPG, PNG, PNG (no background) formats. Free for personal and commercial use.</div> <h3 style="color: #232136; font-size: 18px; line-height: 24px; margin: 0px; padding: 8px 0px;"> 9. <a href="http://www.customicondesign.com/free-icon/country-flag-icon-set-for-iphone-map/" style="color: #3eb7d0; outline: none; text-decoration: none;">Country flag icon set for iphone map</a></h3> <div style="margin-bottom: 20px; padding: 0px;"> <a href="http://www.customicondesign.com/free-icon/country-flag-icon-set-for-iphone-map/" style="color: #3eb7d0; font-weight: bold; outline: none; text-decoration: none;"><img alt="ultimate flag icons collection country flag icon set for iphone map " class="alignnone size-full wp-image-5233" height="185" src="http://webdesignfan.com/wp-content/uploads/2010/10/ultimate_flag_icons_collection_country_flag_icon_set_for_iphone_map.jpg" style="-webkit-box-shadow: rgb(230, 230, 232) -1px 0px 0px, rgb(230, 230, 232) 1px 0px 0px, rgb(180, 180, 187) 0px 1px 0px, rgb(230, 230, 232) 0px 2px 0px; border: 5px solid rgb(240, 240, 234); box-shadow: rgb(230, 230, 232) -1px 0px 0px, rgb(230, 230, 232) 1px 0px 0px, rgb(180, 180, 187) 0px 1px 0px, rgb(230, 230, 232) 0px 2px 0px; float: none;" title="Ultimate Flag Icons Collection" width="590" /></a></div> <div style="margin-bottom: 20px; padding: 0px;"> The Country Flag Icons for the iPhone come in PNG, ICO and ICNS formats. Available sizes include: 256×256 px, 128×128 px, 64×64 px, 48×48 px, 32×32 px and 16×16 px. There are 230 country icons in the set. Free for non-commercial use.</div> <h3 style="color: #232136; font-size: 18px; line-height: 24px; margin: 0px; padding: 8px 0px;"> 10. <a href="http://www.icondrawer.com/free.php" style="color: #3eb7d0; outline: none; text-decoration: none;">Flag Icons</a></h3> <div style="margin-bottom: 20px; padding: 0px;"> <a href="http://www.icondrawer.com/free.php" style="color: #3eb7d0; font-weight: bold; outline: none; text-decoration: none;"><img alt="ultimate flag icons collection flag icons " class="alignnone size-full wp-image-5235" height="250" src="http://webdesignfan.com/wp-content/uploads/2010/10/ultimate_flag_icons_collection_flag_icons.jpg" style="-webkit-box-shadow: rgb(230, 230, 232) -1px 0px 0px, rgb(230, 230, 232) 1px 0px 0px, rgb(180, 180, 187) 0px 1px 0px, rgb(230, 230, 232) 0px 2px 0px; border: 5px solid rgb(240, 240, 234); box-shadow: rgb(230, 230, 232) -1px 0px 0px, rgb(230, 230, 232) 1px 0px 0px, rgb(180, 180, 187) 0px 1px 0px, rgb(230, 230, 232) 0px 2px 0px; float: none;" title="Ultimate Flag Icons Collection" width="590" /></a></div> <div style="margin-bottom: 20px; padding: 0px;"> One of the largest free collections. 278 free flag icons representing countries and unions all over the world. PNG format. Also with ISO 3166-1 alpha-2 codes. Sizes : 16×16, 24×24, 32×32, 48×48. If you wish to use them on website, please place link to www.icondrawer.com on your site.</div> <h3 style="color: #232136; font-size: 18px; line-height: 24px; margin: 0px; padding: 8px 0px;"> 11. <a href="http://www.smashingmagazine.com/2010/04/15/the-ultimate-free-web-designer-s-icon-set-750-icons-incl-psd-sources/" style="color: #3eb7d0; outline: none; text-decoration: none;">Ultimate Free Web Designer’s Icon Set (Including Flag Icons)</a></h3> <div style="margin-bottom: 20px; padding: 0px;"> <a href="http://www.smashingmagazine.com/2010/04/15/the-ultimate-free-web-designer-s-icon-set-750-icons-incl-psd-sources/" style="color: #3eb7d0; font-weight: bold; outline: none; text-decoration: none;"><img alt="ultimate flag icons collection the ultimate free web designers icon set " class="alignnone size-full wp-image-5238" height="146" src="http://webdesignfan.com/wp-content/uploads/2010/10/ultimate_flag_icons_collection_the_ultimate_free_web_designers_icon_set.jpg" style="-webkit-box-shadow: rgb(230, 230, 232) -1px 0px 0px, rgb(230, 230, 232) 1px 0px 0px, rgb(180, 180, 187) 0px 1px 0px, rgb(230, 230, 232) 0px 2px 0px; border: 5px solid rgb(240, 240, 234); box-shadow: rgb(230, 230, 232) -1px 0px 0px, rgb(230, 230, 232) 1px 0px 0px, rgb(180, 180, 187) 0px 1px 0px, rgb(230, 230, 232) 0px 2px 0px; float: none;" title="Ultimate Flag Icons Collection" width="590" /></a></div> <div style="margin-bottom: 20px; padding: 0px;"> This icon set is a huge collection of icons that focus on web design but also includes national flags icons. There are a total of 94 flag icons in the set. You can freely use it for both your private and commercial projects, including software, online services, templates and themes.</div> <h3 style="color: #232136; font-size: 18px; line-height: 24px; margin: 0px; padding: 8px 0px;"> 12.<span style="font-weight: normal;"> </span><span style="font-weight: normal;"></span><a href="http://www.senojflags.com/" style="color: #3eb7d0; outline: none; text-decoration: none;">National Flag Icons</a></h3> <div style="margin-bottom: 20px; padding: 0px;"> <a href="http://www.senojflags.com/" style="color: #3eb7d0; font-weight: bold; outline: none; text-decoration: none;"><img alt="ultimate flag icons collection national flag icons " class="alignnone size-full wp-image-5241" height="146" src="http://webdesignfan.com/wp-content/uploads/2010/10/ultimate_flag_icons_collection_national_flag_icons.jpg" style="-webkit-box-shadow: rgb(230, 230, 232) -1px 0px 0px, rgb(230, 230, 232) 1px 0px 0px, rgb(180, 180, 187) 0px 1px 0px, rgb(230, 230, 232) 0px 2px 0px; border: 5px solid rgb(240, 240, 234); box-shadow: rgb(230, 230, 232) -1px 0px 0px, rgb(230, 230, 232) 1px 0px 0px, rgb(180, 180, 187) 0px 1px 0px, rgb(230, 230, 232) 0px 2px 0px; float: none;" title="Ultimate Flag Icons Collection" width="590" /></a></div> <div style="margin-bottom: 20px; padding: 0px;"> The National Flag Icons are a collection of 250 individual icons, in PNG format and sized at 48×48 px, 32×32 px and 16×16 px.</div> <h3 style="color: #232136; font-size: 18px; line-height: 24px; margin: 0px; padding: 8px 0px;"> 13. <a href="http://www.clickfire.com/content/graphics/favicons/flags_icons.php" style="color: #3eb7d0; outline: none; text-decoration: none;">Flag Favicons</a></h3> <div style="margin-bottom: 20px; padding: 0px;"> <a href="http://www.clickfire.com/content/graphics/favicons/flags_icons.php" style="color: #3eb7d0; font-weight: bold; outline: none; text-decoration: none;"><img alt="ultimate flag icons collection flag favicons1 " class="alignnone size-full wp-image-5245" height="146" src="http://webdesignfan.com/wp-content/uploads/2010/10/ultimate_flag_icons_collection_flag_favicons1.jpg" style="-webkit-box-shadow: rgb(230, 230, 232) -1px 0px 0px, rgb(230, 230, 232) 1px 0px 0px, rgb(180, 180, 187) 0px 1px 0px, rgb(230, 230, 232) 0px 2px 0px; border: 5px solid rgb(240, 240, 234); box-shadow: rgb(230, 230, 232) -1px 0px 0px, rgb(230, 230, 232) 1px 0px 0px, rgb(180, 180, 187) 0px 1px 0px, rgb(230, 230, 232) 0px 2px 0px; float: none;" title="Ultimate Flag Icons Collection" width="590" /></a></div> <div style="margin-bottom: 20px; padding: 0px;"> These basic (and slightly old-fashioned) world flag icons were created many years ago when the standard color and size formats recommended were 16 colors and 16X16 respectively. They come in ICO format and are sized at 16×16 px. These are free to download, use and modify in any way you like.</div> <h3 style="color: #232136; font-size: 18px; line-height: 24px; margin: 0px; padding: 8px 0px;"> 14. <a href="http://asgardstudios.deviantart.com/art/50-Flag-Buttons-119400125" style="color: #3eb7d0; outline: none; text-decoration: none;">50 Flag Buttons</a></h3> <div style="margin-bottom: 20px; padding: 0px;"> <a href="http://asgardstudios.deviantart.com/#/d1z35q5" style="color: #3eb7d0; font-weight: bold; outline: none; text-decoration: none;"><img alt="ultimate flag icons collection 50 flag buttons " class="alignnone size-full wp-image-5248" height="250" src="http://webdesignfan.com/wp-content/uploads/2010/10/ultimate_flag_icons_collection_50_flag_buttons.jpg" style="-webkit-box-shadow: rgb(230, 230, 232) -1px 0px 0px, rgb(230, 230, 232) 1px 0px 0px, rgb(180, 180, 187) 0px 1px 0px, rgb(230, 230, 232) 0px 2px 0px; border: 5px solid rgb(240, 240, 234); box-shadow: rgb(230, 230, 232) -1px 0px 0px, rgb(230, 230, 232) 1px 0px 0px, rgb(180, 180, 187) 0px 1px 0px, rgb(230, 230, 232) 0px 2px 0px; float: none;" title="Ultimate Flag Icons Collection" width="590" /></a></div> <div style="margin-bottom: 20px; padding: 0px;"> This set includes 50 flags created into iPhone style buttons for the Mac (ICNS format). Free for non-commercial use.</div> <h3 style="color: #232136; font-size: 18px; line-height: 24px; margin: 0px; padding: 8px 0px;"> 15. <a href="http://artbees.deviantart.com/art/Flag-Creator-168929334" style="color: #3eb7d0; outline: none; text-decoration: none;">Flag Creator</a></h3> <div style="margin-bottom: 20px; padding: 0px;"> <a href="http://artbees.deviantart.com/art/Flag-Creator-168929334?q=boost%3Apopular+world+flag&qo=2" style="color: #3eb7d0; font-weight: bold; outline: none; text-decoration: none;"><img alt="ultimate flag icons collection flag creator " class="alignnone size-full wp-image-5251" height="250" src="http://webdesignfan.com/wp-content/uploads/2010/10/ultimate_flag_icons_collection_flag_creator.jpg" style="-webkit-box-shadow: rgb(230, 230, 232) -1px 0px 0px, rgb(230, 230, 232) 1px 0px 0px, rgb(180, 180, 187) 0px 1px 0px, rgb(230, 230, 232) 0px 2px 0px; border: 5px solid rgb(240, 240, 234); box-shadow: rgb(230, 230, 232) -1px 0px 0px, rgb(230, 230, 232) 1px 0px 0px, rgb(180, 180, 187) 0px 1px 0px, rgb(230, 230, 232) 0px 2px 0px; float: none;" title="Ultimate Flag Icons Collection" width="590" /></a></div> <div style="margin-bottom: 20px; padding: 0px;"> Another useful tool for creating your own stylish flags. This is an automatic waver. Simply gets your arts and waves them like a flag with click of a mouse.</div> <h3 style="color: #232136; font-size: 18px; line-height: 24px; margin: 0px; padding: 8px 0px;"> 16. <a href="http://www.crazythemes.com/105-country-flag-icons-png-ico/3319" rel="bookmark" style="color: #3eb7d0; outline: none; text-decoration: none;" title="105 Country Flag Icons (PNG & ICO)">105 Country Flag Icons (PNG & ICO)</a></h3> <div style="margin-bottom: 20px; padding: 0px;"> <a href="http://www.crazythemes.com/105-country-flag-icons-png-ico/3319" style="color: #3eb7d0; font-weight: bold; outline: none; text-decoration: none;"><img alt="ultimate flag icons collection 105 country flag icons " class="alignnone size-full wp-image-5255" height="250" src="http://webdesignfan.com/wp-content/uploads/2010/10/ultimate_flag_icons_collection_105_country_flag_icons.jpg" style="-webkit-box-shadow: rgb(230, 230, 232) -1px 0px 0px, rgb(230, 230, 232) 1px 0px 0px, rgb(180, 180, 187) 0px 1px 0px, rgb(230, 230, 232) 0px 2px 0px; border: 5px solid rgb(240, 240, 234); box-shadow: rgb(230, 230, 232) -1px 0px 0px, rgb(230, 230, 232) 1px 0px 0px, rgb(180, 180, 187) 0px 1px 0px, rgb(230, 230, 232) 0px 2px 0px; float: none;" title="Ultimate Flag Icons Collection" width="590" /></a></div> <div style="margin-bottom: 20px; padding: 0px;"> 105 Country Flag Icons in Web 2.0 style.Icon formats: PNG, ICO, ICNS and sized at 288×288 px.</div> <h3 style="color: #232136; font-size: 18px; line-height: 24px; margin: 0px; padding: 8px 0px;"> 17. <a href="http://www.veryicon.com/icons/flag/not-patriot/" style="color: #3eb7d0; outline: none; text-decoration: none;">Not a Patriot</a></h3> <div style="margin-bottom: 20px; padding: 0px;"> <a href="http://www.veryicon.com/icons/flag/not-patriot/" style="color: #3eb7d0; font-weight: bold; outline: none; text-decoration: none;"><img alt="ultimate flag icons collection not a patriot " class="alignnone size-full wp-image-5258" height="250" src="http://webdesignfan.com/wp-content/uploads/2010/10/ultimate_flag_icons_collection_not_a_patriot.jpg" style="-webkit-box-shadow: rgb(230, 230, 232) -1px 0px 0px, rgb(230, 230, 232) 1px 0px 0px, rgb(180, 180, 187) 0px 1px 0px, rgb(230, 230, 232) 0px 2px 0px; border: 5px solid rgb(240, 240, 234); box-shadow: rgb(230, 230, 232) -1px 0px 0px, rgb(230, 230, 232) 1px 0px 0px, rgb(180, 180, 187) 0px 1px 0px, rgb(230, 230, 232) 0px 2px 0px; float: none;" title="Ultimate Flag Icons Collection" width="590" /></a></div> <div style="margin-bottom: 20px; padding: 0px;"> Free icon set called Not a Patriot. Set includes ICO, PNG and ICNS formats. Free for personal use only.</div> <h3 style="color: #232136; font-size: 18px; line-height: 24px; margin: 0px; padding: 8px 0px;"> 18. <a href="http://www.veryicon.com/icons/flag/rounded-world-flags/" style="color: #3eb7d0; outline: none; text-decoration: none;">Rounded World Flags</a></h3> <div style="margin-bottom: 20px; padding: 0px;"> <a href="http://www.veryicon.com/icons/flag/rounded-world-flags/" style="color: #3eb7d0; font-weight: bold; outline: none; text-decoration: none;"><img alt="ultimate flag icons collection rounded world flags " class="alignnone size-full wp-image-5261" height="250" src="http://webdesignfan.com/wp-content/uploads/2010/10/ultimate_flag_icons_collection_rounded_world_flags.jpg" style="-webkit-box-shadow: rgb(230, 230, 232) -1px 0px 0px, rgb(230, 230, 232) 1px 0px 0px, rgb(180, 180, 187) 0px 1px 0px, rgb(230, 230, 232) 0px 2px 0px; border: 5px solid rgb(240, 240, 234); box-shadow: rgb(230, 230, 232) -1px 0px 0px, rgb(230, 230, 232) 1px 0px 0px, rgb(180, 180, 187) 0px 1px 0px, rgb(230, 230, 232) 0px 2px 0px; float: none;" title="Ultimate Flag Icons Collection" width="590" /></a></div> <div style="margin-bottom: 20px; padding: 0px;"> Rounded world flags set includes ICO, PNG and ICNS formats. Licence: Creative Commons Attribution-Noncommercial-No Derivative Works 3.0.</div> <h3 style="color: #232136; font-size: 18px; line-height: 24px; margin: 0px; padding: 8px 0px;"> 19. <a href="http://www.veryicon.com/icons/flag/europe/" style="color: #3eb7d0; outline: none; text-decoration: none;">Europe Icons</a></h3> <div style="margin-bottom: 20px; padding: 0px;"> <a href="http://www.veryicon.com/icons/flag/europe/" style="color: #3eb7d0; font-weight: bold; outline: none; text-decoration: none;"><img alt="ultimate flag icons collection europe icons " class="alignnone size-full wp-image-5262" height="250" src="http://webdesignfan.com/wp-content/uploads/2010/10/ultimate_flag_icons_collection_europe_icons.jpg" style="-webkit-box-shadow: rgb(230, 230, 232) -1px 0px 0px, rgb(230, 230, 232) 1px 0px 0px, rgb(180, 180, 187) 0px 1px 0px, rgb(230, 230, 232) 0px 2px 0px; border: 5px solid rgb(240, 240, 234); box-shadow: rgb(230, 230, 232) -1px 0px 0px, rgb(230, 230, 232) 1px 0px 0px, rgb(180, 180, 187) 0px 1px 0px, rgb(230, 230, 232) 0px 2px 0px; float: none;" title="Ultimate Flag Icons Collection" width="590" /></a></div> <div style="margin-bottom: 20px; padding: 0px;"> Europe countries flags. Free for personal non-commercial use. Include a link back to author site.</div> <h3 style="color: #232136; font-size: 18px; line-height: 24px; margin: 0px; padding: 8px 0px;"> 20. <a href="http://www.veryicon.com/icons/flag/africa/" style="color: #3eb7d0; outline: none; text-decoration: none;">Africa Icons</a></h3> <div style="margin-bottom: 20px; padding: 0px;"> <a href="http://www.veryicon.com/icons/flag/africa/" style="color: #3eb7d0; font-weight: bold; outline: none; text-decoration: none;"><img alt="ultimate flag icons collection africa icons " class="alignnone size-full wp-image-5263" height="250" src="http://webdesignfan.com/wp-content/uploads/2010/10/ultimate_flag_icons_collection_africa_icons.jpg" style="-webkit-box-shadow: rgb(230, 230, 232) -1px 0px 0px, rgb(230, 230, 232) 1px 0px 0px, rgb(180, 180, 187) 0px 1px 0px, rgb(230, 230, 232) 0px 2px 0px; border: 5px solid rgb(240, 240, 234); box-shadow: rgb(230, 230, 232) -1px 0px 0px, rgb(230, 230, 232) 1px 0px 0px, rgb(180, 180, 187) 0px 1px 0px, rgb(230, 230, 232) 0px 2px 0px; float: none;" title="Ultimate Flag Icons Collection" width="590" /></a></div> <div style="margin-bottom: 20px; padding: 0px;"> African flags icons. Free icons available in ICO, ICNS and PNG formats. Free for personal non-commercial use. Include a link back to author site.</div> </div> </div>

Ultimate Flag Icons Collection

Written By Tomas Laurinavicius in Graphics   Introducing the ultimate flag icons set with 2700+ different icons.  Within this ...

Read more »

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>

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 ad...

Read more »