Find Out How Visitors Use Your Website With Hotjar Insights

<br /> <div class="tutorialimage" style="background-color: white; border: 0px; color: #333333; float: right; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 12px; margin: 0px 0px 20px 20px; min-width: 260px; padding: 0px; width: 356.59375px;"> <a href="http://synd.co/XY56jL" style="-webkit-transition: opacity 0.2s; border: 0px; color: #64854c; margin: 0px; padding: 0px; text-decoration: none; transition: opacity 0.2s;"><img alt="hotjar" class="alignnone size-full wp-image-43835" height="477" src="http://designshack.net/wp-content/uploads/hotjar1.jpg" style="-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 2px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px; background-image: url(http://designshack.net/images/ajax-loader.gif); background-position: 50% 50%; background-repeat: no-repeat; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 3px solid rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 2px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px; box-sizing: border-box; height: auto; margin: 0px 0px 20px; max-width: 715px; outline-color: rgb(88, 86, 82); outline-width: 0px; padding: 0px; width: 356.59375px;" width="715" /></a></div> <div style="background-color: white; border: 0px; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1.5em; font-weight: bold; line-height: 1.6em; margin-bottom: 1em; padding: 0px;"> Having a website in today’s market is not enough. You also need see how your visitors are really <em style="border: 0px; margin: 0px; padding: 0px;">using</em> your website. This information can help you better plan, create content and design for the way your users interact with you. <a href="http://www.hotjar.com/10073" style="font-size: xx-large; line-height: 25.600000381469727px;" target="_blank">sign up</a></div> <div style="background-color: white; border: 0px; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1.5em; line-height: 1.6em; margin-bottom: 1em; padding: 0px;"> That’s where <a href="http://synd.co/XY56jL" style="-webkit-transition: opacity 0.2s; border: 0px; color: #64854c; margin: 0px; padding: 0px; text-decoration: none; transition: opacity 0.2s;">Hotjar Insights</a> comes in. The new service is launching later this month and will include lots of tools that really can help you understand your visitors better. The interface includes heatmaps, session playbacks, polling, surveys, chats and funnel analysis. Here’s a look at the new tool.</div> <div style="background-color: white; border: 0px; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1.3em; line-height: 1.6em; margin-bottom: 1em; padding: 0px;"> <span id="more-43818" style="border: 0px; margin: 0px; padding: 0px;"></span></div> <h2 style="background-color: white; border: 0px; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 2.6em; margin: 1em 0px; padding: 0px;"> What is Hotjar Insights?</h2> <div class="tutorialimage" style="background-color: white; border: 0px; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 12px; margin: 0px; padding: 0px;"> <img alt="hotjar" class="alignNone size-full wp-image-1611" src="http://designshack.net/wp-content/uploads/hotjar-grab.jpg" style="-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 2px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px; background-image: url(http://designshack.net/images/ajax-loader.gif); background-position: 50% 50%; background-repeat: no-repeat; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 3px solid rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 2px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px; box-sizing: border-box; height: auto; margin: 0px 0px 20px; max-width: 715px; outline-color: rgb(88, 86, 82); outline-width: 0px; padding: 0px; width: 713.1875px;" width="715" /></div> <div style="background-color: white; border: 0px; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1.3em; line-height: 1.6em; margin-bottom: 1em; padding: 0px;"> Hotjar Insights is a new way to reveal true website user behavior and experiences in one central tool — giving you the big picture of how you can improve website UX and conversion rates. The tool includes lots of data points and types so you can collect information abut users in a variety of ways.</div> <div style="background-color: white; border: 0px; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1.3em; line-height: 1.6em; margin-bottom: 1em; padding: 0px;"> And everything you find out is easily accessible at any time. Hotjar Insights stores reports and data securely stored in the cloud, and they’re accessible at lightning speed.</div> <div style="background-color: white; border: 0px; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1.3em; line-height: 1.6em; margin-bottom: 1em; padding: 0px;"> What’s different about this tool is that it includes many of the tools — heatmaps, funnel & form analysis, visitor session playback, etc. – in one place. Other similar tools require subscriptions to multiple services for access to this kind of data because they really only focus on one point of data collection. Hotjar Insights allows you to access information from a variety of methods.</div> <div style="background-color: white; border: 0px; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1.3em; line-height: 1.6em; margin-bottom: 1em; padding: 0px;"> Here are a few of the things you can do with Hotjar Insights:</div> <ul style="background-color: white; border: 0px; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 12px; line-height: 1.5em; list-style-type: none; margin: 2em 0px; padding: 0px;"> <li style="background-image: url(http://designshack.net/images/bullet.png); background-position: 0% 0.5em; background-repeat: no-repeat; border: 0px; font-size: 1.3em; line-height: 1.5em; margin: 0px 0px 1em 1em; padding: 0px 0px 0px 1.5em;">Compare taps and clicks before and after tweaks</li> <li style="background-image: url(http://designshack.net/images/bullet.png); background-position: 0% 0.5em; background-repeat: no-repeat; border: 0px; font-size: 1.3em; line-height: 1.5em; margin: 0px 0px 1em 1em; padding: 0px 0px 0px 1.5em;">Change page copy to reflect visitor objections</li> <li style="background-image: url(http://designshack.net/images/bullet.png); background-position: 0% 0.5em; background-repeat: no-repeat; border: 0px; font-size: 1.3em; line-height: 1.5em; margin: 0px 0px 1em 1em; padding: 0px 0px 0px 1.5em;">Overhaul forms to generate more leads</li> <li style="background-image: url(http://designshack.net/images/bullet.png); background-position: 0% 0.5em; background-repeat: no-repeat; border: 0px; font-size: 1.3em; line-height: 1.5em; margin: 0px 0px 1em 1em; padding: 0px 0px 0px 1.5em;">Test what content works best above “the fold”</li> <li style="background-image: url(http://designshack.net/images/bullet.png); background-position: 0% 0.5em; background-repeat: no-repeat; border: 0px; font-size: 1.3em; line-height: 1.5em; margin: 0px 0px 1em 1em; padding: 0px 0px 0px 1.5em;">Improve navigation</li> <li style="background-image: url(http://designshack.net/images/bullet.png); background-position: 0% 0.5em; background-repeat: no-repeat; border: 0px; font-size: 1.3em; line-height: 1.5em; margin: 0px 0px 1em 1em; padding: 0px 0px 0px 1.5em;">Identify what new content needs to be added to the page</li> <li style="background-image: url(http://designshack.net/images/bullet.png); background-position: 0% 0.5em; background-repeat: no-repeat; border: 0px; font-size: 1.3em; line-height: 1.5em; margin: 0px 0px 1em 1em; padding: 0px 0px 0px 1.5em;">Generate new A/B test ideas</li> <li style="background-image: url(http://designshack.net/images/bullet.png); background-position: 0% 0.5em; background-repeat: no-repeat; border: 0px; font-size: 1.3em; line-height: 1.5em; margin: 0px 0px 1em 1em; padding: 0px 0px 0px 1.5em;">Remove or rethink ignored content</li> <li style="background-image: url(http://designshack.net/images/bullet.png); background-position: 0% 0.5em; background-repeat: no-repeat; border: 0px; font-size: 1.3em; line-height: 1.5em; margin: 0px 0px 1em 1em; padding: 0px 0px 0px 1.5em;">See which type of imagery works best</li> <li style="background-image: url(http://designshack.net/images/bullet.png); background-position: 0% 0.5em; background-repeat: no-repeat; border: 0px; font-size: 1.3em; line-height: 1.5em; margin: 0px 0px 1em 1em; padding: 0px 0px 0px 1.5em;">Improve your UX on different screen resolutions</li> </ul> <h2 style="background-color: white; border: 0px; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 2.6em; margin: 1em 0px; padding: 0px;"> Get Started Free - <a href="http://www.hotjar.com/10073" style="font-size: xx-large; line-height: 25.600000381469727px;" target="_blank">sign up</a></h2> <div style="background-color: white; border: 0px; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1.3em; line-height: 1.6em; margin-bottom: 1em; padding: 0px;"> Hotjar Insights is brand new to the market and ready to offer you a chance to try it free. <a href="http://synd.co/XY56jL" style="-webkit-transition: opacity 0.2s; border: 0px; color: #64854c; margin: 0px; padding: 0px; text-decoration: none; transition: opacity 0.2s;">Sign up by Aug. 30</a> for early access beta. (Early users will also receive discounts if they sign up for service after the beta period ends.)</div> <div style="background-color: white; border: 0px; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1.3em; line-height: 1.6em; margin-bottom: 1em; padding: 0px;"> Using Hotjar Insights does not come with a bunch of strings. With one plan you can generate insights on an unlimited number of websites, and make these available to an unlimited number of users. Pageviews don’t matter either. It works regardless of website size.</div> <h2 style="background-color: white; border: 0px; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 2.6em; margin: 1em 0px; padding: 0px;"> Who Should Use Hotjar?</h2> <div style="background-color: white; border: 0px; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1.3em; line-height: 1.6em; margin-bottom: 1em; padding: 0px;"> Hotjar Insights is really for anyone who wants to see how visitors are really using websites. Plain and simple.</div> <div style="background-color: white; border: 0px; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1.3em; line-height: 1.6em; margin-bottom: 1em; padding: 0px;"> This includes designers, developers, product mangers, digital marketers, analysts and agencies and consultants. The tools are commonly accepted and won’t take a lot of lead-time to understand or decipher.</div> <h2 style="background-color: white; border: 0px; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 2.6em; margin: 1em 0px; padding: 0px;"> What Comes with Hotjar?</h2> <div class="tutorialimage" style="background-color: white; border: 0px; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 12px; margin: 0px; padding: 0px;"> <img alt="hotjar" class="alignNone size-full wp-image-1611" src="http://designshack.net/wp-content/uploads/hotjar-map.jpg" style="-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 2px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px; background-image: url(http://designshack.net/images/ajax-loader.gif); background-position: 50% 50%; background-repeat: no-repeat; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 3px solid rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 2px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px; box-sizing: border-box; height: auto; margin: 0px 0px 20px; max-width: 715px; outline-color: rgb(88, 86, 82); outline-width: 0px; padding: 0px; width: 713.1875px;" width="715" /></div> <div style="background-color: white; border: 0px; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1.3em; line-height: 1.6em; margin-bottom: 1em; padding: 0px;"> Hotjar Insights comes packed with tools in a unified platform. Here’s what you can expect to see and use.</div> <ul style="background-color: white; border: 0px; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 12px; line-height: 1.5em; list-style-type: none; margin: 2em 0px; padding: 0px;"> <li style="background-image: url(http://designshack.net/images/bullet.png); background-position: 0% 0.5em; background-repeat: no-repeat; border: 0px; font-size: 1.3em; line-height: 1.5em; margin: 0px 0px 1em 1em; padding: 0px 0px 0px 1.5em;"><strong style="border: 0px; margin: 0px; padding: 0px;">Heatmaps:</strong> Figure out what users want by looking at where they click and tap and where they scroll. This information can determine visitor motivation and help you convert more clicks.</li> <li style="background-image: url(http://designshack.net/images/bullet.png); background-position: 0% 0.5em; background-repeat: no-repeat; border: 0px; font-size: 1.3em; line-height: 1.5em; margin: 0px 0px 1em 1em; padding: 0px 0px 0px 1.5em;"><strong style="border: 0px; margin: 0px; padding: 0px;">Feedback and Exit Polls:</strong> Ask visitors as many questions as you like about their user experiences. This can help you improve the performance of your site and understand what visitors like and don’t like about the experience you provide.</li> <li style="background-image: url(http://designshack.net/images/bullet.png); background-position: 0% 0.5em; background-repeat: no-repeat; border: 0px; font-size: 1.3em; line-height: 1.5em; margin: 0px 0px 1em 1em; padding: 0px 0px 0px 1.5em;"><strong style="border: 0px; margin: 0px; padding: 0px;">Online Surveys:</strong> With a built-in survey editor, you can collect responses from users on any device in real-time. Distribute surveys with links, via email or right on your website.</li> <li style="background-image: url(http://designshack.net/images/bullet.png); background-position: 0% 0.5em; background-repeat: no-repeat; border: 0px; font-size: 1.3em; line-height: 1.5em; margin: 0px 0px 1em 1em; padding: 0px 0px 0px 1.5em;"><strong style="border: 0px; margin: 0px; padding: 0px;">Funnel and Form Analysis:</strong> Find the biggest opportunities for improvement and testing by identifying on which page and at which step most visitors are leaving your site. This tool can help you improve online form completion rates by analyzing which fields are often left blank, which items take too long to fill out and why visitors leave the form altogether.</li> <li style="background-image: url(http://designshack.net/images/bullet.png); background-position: 0% 0.5em; background-repeat: no-repeat; border: 0px; font-size: 1.3em; line-height: 1.5em; margin: 0px 0px 1em 1em; padding: 0px 0px 0px 1.5em;"><strong style="border: 0px; margin: 0px; padding: 0px;">Visitor Session Playback:</strong> Actually “record” real visitor sessions. By seeing how a visitor interacts with your site, you can identify issues and high points by watching clicks, taps and mouse movements.</li> <li style="background-image: url(http://designshack.net/images/bullet.png); background-position: 0% 0.5em; background-repeat: no-repeat; border: 0px; font-size: 1.3em; line-height: 1.5em; margin: 0px 0px 1em 1em; padding: 0px 0px 0px 1.5em;"><strong style="border: 0px; margin: 0px; padding: 0px;">Recruit User Testers:</strong> If you are looking for the right panel of testers, use this tool to recruit participants for research right from your site. You can collect profiling information, contact information and even offer a gift for participation.</li> <li style="background-image: url(http://designshack.net/images/bullet.png); background-position: 0% 0.5em; background-repeat: no-repeat; border: 0px; font-size: 1.3em; line-height: 1.5em; margin: 0px 0px 1em 1em; padding: 0px 0px 0px 1.5em;"><strong style="border: 0px; margin: 0px; padding: 0px;">Proactive Chat:</strong> Invite visitors to chat about concerns, questions and objections on both desktop and mobile devices. Use these insights to change your pages and the user experience to tackle these issues and improve conversion rates.</li> </ul> <h2 style="background-color: white; border: 0px; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 2.6em; margin: 1em 0px; padding: 0px;"> Pricing and Packages - <a href="http://www.hotjar.com/10073" style="font-size: xx-large; line-height: 25.600000381469727px;" target="_blank">sign up</a></h2> <div style="background-color: white; border: 0px; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1.3em; line-height: 1.6em; margin-bottom: 1em; padding: 0px;"> Hotjar Insights is offering free access during its beta period (starting later this month) and an additional free month for those users to really dig into the tools. The unlimited plan will be $29 per month. (But early users will be offered a discount.)</div> <div style="background-color: white; border: 0px; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1.3em; line-height: 1.6em; margin-bottom: 1em; padding: 0px;"> The service is different from some of the others out there because it offers multiple services for one price. And there are no limits on pageviews, websites or users.</div> <div style="background-color: white; border: 0px; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1.3em; line-height: 1.6em; margin-bottom: 1em; padding: 0px;"> You can also score pretty sweet freebies if you like, and share, Hotjar Insights. The top 20 referrers during the beta period will get a free lifetime account, the top 200 will get a t-shirt and everyone who refers five new users gets 6 free months of Hotjar Insights tools.</div> <h2 style="background-color: white; border: 0px; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 2.6em; margin: 1em 0px; padding: 0px;"> Conclusion - <a href="http://www.hotjar.com/10073" style="font-size: xx-large; line-height: 25.600000381469727px;" target="_blank">sign up</a></h2> <div style="background-color: white; border: 0px; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1.3em; line-height: 1.6em; margin-bottom: 1em; padding: 0px;"> Tools like Hotjar Insights are important for any designer, developer or company looking to keep track of how their website is working. What’s nice about this tool is that it includes everything in a single dashboard.</div> <div style="background-color: white; border: 0px; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 1.6em; margin-bottom: 1em; padding: 0px;"> <span style="font-size: 1.3em;">Go ahead and sign up so you can be one of the first users of this cool </span><span style="font-size: x-large;">tool (and lock in a pretty sweet price). But remember to <a href="http://www.hotjar.com/10073" target="_blank">sign up</a> before Aug. 30.</span></div> <div style="background-color: white; border: 0px; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 1.6em; margin-bottom: 1em; padding: 0px;"> <span style="font-size: x-large;"><br /></span></div> <div style="background-color: white; border: 0px; margin-bottom: 1em; padding: 0px;"> <span style="font-size: x-small;"><span style="color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 1.6em;">courtesy: </span><span style="background-color: transparent; line-height: 25.600000381469727px;"><span style="color: #333333; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;">http://designshack.net/articles/software/find-out-how-visitors-use-your-website-with-hotjar-insights</span></span></span></div>

Find Out How Visitors Use Your Website With Hotjar Insights

Having a website in today’s market is not enough. You also need see how your visitors are really  using  your website. This information ...

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> <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;"> <br /></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;"> courtesy: http://www.1stwebdesigner.com/css/svg-tutorial/</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 »