9 tasks, 6 challenges
We are going to learn about SVG, the vector graphics format. We will analyze the basic primitives: lines, rectangles, and circles. We will learn how to position them, manage colors and sizes, and to create different kinds of drawings from them.
<!DOCTYPE html><html lang="en" class="no-js"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><script>var b=document.documentElement.classList;b.remove('no-js');if(!window.Promise||!window.sessionStorage||!!sessionStorage.getItem('muller.v2')){b.add('muller')}</script><link rel="dns-prefetch" href="https://assets.htmlacademy.org"><script async src="https://www.googletagmanager.com/gtag/js?id=G-MXPCRXM48C"></script><script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-MXPCRXM48C');
</script><script type="text/javascript">
(function(e,t){var n=e.amplitude||{_q:[],_iq:{}};var r=t.createElement("script")
;r.type="text/javascript"
;r.integrity="sha384-d/yhnowERvm+7eCU79T/bYjOiMmq4F11ElWYLmt0ktvYEVgqLDazh4+gW9CKMpYW"
;r.crossOrigin="anonymous";r.async=true
;r.src="https://cdn.amplitude.com/libs/amplitude-5.2.2-min.gz.js"
;r.onload=function(){if(!e.amplitude.runQueuedFunctions){
console.log("[Amplitude] Error: could not load SDK")}}
;var i=t.getElementsByTagName("script")[0];i.parentNode.insertBefore(r,i)
;function s(e,t){e.prototype[t]=function(){
this._q.push([t].concat(Array.prototype.slice.call(arguments,0)));return this}}
var o=function(){this._q=[];return this}
;var a=["add","append","clearAll","prepend","set","setOnce","unset"]
;for(var u=0;u<a.length;u++){s(o,a[u])}n.Identify=o;var c=function(){this._q=[]
;return this}
;var l=["setProductId","setQuantity","setPrice","setRevenueType","setEventProperties"]
;for(var p=0;p<l.length;p++){s(c,l[p])}n.Revenue=c
;var d=["init","logEvent","logRevenue","setUserId","setUserProperties","setOptOut","setVersionName","setDomain","setDeviceId","setGlobalUserProperties","identify","clearUserProperties","setGroup","logRevenueV2","regenerateDeviceId","groupIdentify","onInit","logEventWithTimestamp","logEventWithGroups","setSessionId","resetSessionId"]
;function v(e){function t(t){e[t]=function(){
e._q.push([t].concat(Array.prototype.slice.call(arguments,0)))}}
for(var n=0;n<d.length;n++){t(d[n])}}v(n);n.getInstance=function(e){
e=(!e||e.length===0?"$default_instance":e).toLowerCase()
;if(!n._iq.hasOwnProperty(e)){n._iq[e]={_q:[]};v(n._iq[e])}return n._iq[e]}
;e.amplitude=n})(window,document);
amplitude.getInstance().init("df11525b6880a3c5e2af14f9b6238408", null,{
includeUtm: true,
includeGclid: true,
includeReferrer: true,
deviceIdFromUrlParam: true
}, function (instance) {
window.amplitudeLoaded = true;
});
</script><link rel="stylesheet" href="https://assets.htmlacademy.org/css/core.v284.css"><link rel="stylesheet" href="https://assets.htmlacademy.org/css/text.v104.css"><link rel="stylesheet" href="https://assets.htmlacademy.org/css/profile.v236.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/cookies.css"><link rel="preload" as="script" href="https://assets.htmlacademy.org/js/general.v274.js"><title>Chapter «An Introduction to SVG» — Course «SVG basics» — HTML Academy</title><meta name="description" content="We are going to learn about SVG, the vector graphics format. We will analyze the basic primitives: lines, rectangles, and circles. We will learn how to position them, manage colors and sizes, and to create different kinds of drawings from them."><meta property="og:type" content="website"><meta property="og:site_name" content="HTML Academy"><meta name="twitter:url" property="og:url" content="https://htmlacademy.org"><meta name="twitter:title" property="og:title" content="Interactive online courses HTML Academy"><meta name="twitter:description" property="og:description" content="Together we’ll learn how to work with real code, solve true-to-life problems, use cutting edge technologies. Minimum of boring theory and lots of practical tasks."><meta name="twitter:image" property="og:image" content="https://htmlacademy.org/og/htmlacademy.png"><meta name="twitter:card" content="summary_large_image"><link rel="canonical" href="/courses/svg-basics/svg-intro"><meta name="theme-color" content="#2f358f"></head><body><header class="page-header"><div class="page-header__inner"><div class="page-header__top"><a class="page-header__logo" href="/"><img src="https://assets.htmlacademy.org/img/logo.v2.svg" width="104" height="36" alt="HTML Academy"></a><nav class="main-menu" aria-label="Main navigation" itemscope itemtype="http://schema.org/SiteNavigationElement"><ul class="main-menu__list main-menu__list--main main-menu__list--adaptive"><li class="main-menu__item main-menu__item--logo"><a class="main-menu__link" href="/" title="HTML Academy main page"><img src="https://assets.htmlacademy.org/img/logo.v2.svg" width="104" height="36" alt="HTML Academy"></a></li><li class="main-menu__item"><a class="main-menu__link" href="/courses" title="Courses"><span class="main-menu__icon"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#course"></use></svg></span>Courses</a></li><li class="main-menu__item"><a class="main-menu__link" href="/tutorials" title="Tutorials"><span class="main-menu__icon"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#intensive"></use></svg></span>Tutorials</a></li><li class="main-menu__item"><a class="main-menu__link" href="/blog" title="Blog"><span class="main-menu__icon"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#hat"></use></svg></span>Blog</a></li></ul><button class="main-menu__trigger" type="button" title="Main menu"><span></span></button><div class="main-menu__dropdown" id="main-menu"><div class="main-menu__dropdown-inner"><ul class="main-menu__list main-menu__list--main"><li class="main-menu__item" itemprop="name"><a class="main-menu__link" href="/courses" itemprop="url"><span class="main-menu__icon" aria-hidden="true"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#course"></use></svg></span>Courses</a></li><li class="main-menu__item" itemprop="name"><a class="main-menu__link" href="/tutorials" itemprop="url"><span class="main-menu__icon" aria-hidden="true"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#intensive"></use></svg></span>Tutorials</a></li><li class="main-menu__item" itemprop="name"><a class="main-menu__link" href="/blog" itemprop="url"><span class="main-menu__icon" aria-hidden="true"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#hat"></use></svg></span>Blog</a></li></ul><ul class="main-menu__list main-menu__list--user main-menu__list--user-guest"><li class="main-menu__item" itemprop="name"><a class="main-menu__link" href="/signup?redirect_url=%2Fcourses%2Fsvg-basics%2Fsvg-intro" title="Sign up" data-modal="open" data-value="register" itemprop="url"><span class="main-menu__icon" aria-hidden="true"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#user"></use></svg></span>Sign up</a></li><li class="main-menu__item main-menu__item--login" itemprop="name"><a class="main-menu__link" href="/login?redirect_url=%2Fcourses%2Fsvg-basics%2Fsvg-intro" title="Log in" data-modal="open" data-value="login" itemprop="url"><span class="main-menu__icon" aria-hidden="true"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#login"></use></svg></span>Log in</a></li></ul></div></div></nav></div></div></header><div class="page-content page-content--chapter"><div class="page-content__inner"><div class="page-content__left"><aside class="page-content__left-column"><div class="page-content__left-top"><div class="page-content__left-image"><img src="/assets/courses/35/icon.svg" width="100" height="100" alt=""></div><nav class="breadcrumbs breadcrumbs--chapter" itemscope itemtype="http://schema.org/SiteNavigationElement"><ul class="breadcrumbs__list"><li class="breadcrumbs__item" itemprop="name"><a href="/" itemprop="url">Home</a></li><li class="breadcrumbs__item" itemprop="name"><a href="/courses" itemprop="url">Interactive courses</a></li><li class="breadcrumbs__item" itemprop="name"><a href="/courses/svg-basics" itemprop="url">SVG basics</a></li></ul></nav></div><ol class="chapter-list"><li class="chapter-list__item chapter-list__item--current"><span
class="chapter-list__link chapter-list__link--active"><span >An Introduction to SVG</span><span
class="chapter-list__score chapter-list__score--empty">
0/15
</span></span></li><li class="chapter-list__item"><span
class="chapter-list__link"><a href="/courses/svg-basics/svg-shapes" >Designing SVG Shapes</a><span
class="chapter-list__score chapter-list__score--empty">
0/20
</span></span></li><li class="chapter-list__item"><span
class="chapter-list__link"><a href="/courses/svg-basics/svg-dimensions" >Dimensions in SVG</a><span
class="chapter-list__score chapter-list__score--empty">
0/15
</span></span></li></ol></aside></div><div class="page-content__right"><div class="chapter-description"><h1 class="chapter-description__title"><span>Chapter 1: </span>An Introduction to SVG</h1><div class="chapter-description__content chapter-description__content--theory"><div class="chapter-description__left"><span class="chapter-description__info">
9 tasks, 6 challenges
</span><p class="chapter-description__text">We are going to learn about SVG, the vector graphics format. We will analyze the basic primitives: lines, rectangles, and circles. We will learn how to position them, manage colors and sizes, and to create different kinds of drawings from them.</p><div class="chapter-description__controls text-container"><a class="button button--green button--large button--wide" href="/continue/svg-basics/svg-intro">
Start </a><br><span class="chapter-description__controls-text"></span></div></div><div class="chapter-tasks"><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/svg-basics/svg-intro/hello-svg"><span class="chapter-tasks__icon"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#chapter_arrow"></use></svg></span><span class="chapter-tasks__title">1. Hello, SVG!</span><span class="chapter-tasks__type">
Task
</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/svg-basics/svg-intro/draw-rectangle"><span class="chapter-tasks__icon"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#chapter_arrow"></use></svg></span><span class="chapter-tasks__title">2. Drawing a Rectangle</span><span class="chapter-tasks__type">
Task
</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/svg-basics/svg-intro/rectangle-coordinates"><span class="chapter-tasks__icon"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#chapter_arrow"></use></svg></span><span class="chapter-tasks__title">3. Rectangle Coordinates</span><span class="chapter-tasks__type">
Task
</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/svg-basics/svg-intro/round-corner"><span class="chapter-tasks__icon"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#chapter_arrow"></use></svg></span><span class="chapter-tasks__title">4. Corner Rounding</span><span class="chapter-tasks__type">
Task
</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/svg-basics/svg-intro/challenge-1"><span class="chapter-tasks__icon"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#chapter_shield"></use></svg></span><span class="chapter-tasks__title">5. Challenge: Fixing the TV</span><span class="chapter-tasks__type">
Challenge
</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/svg-basics/svg-intro/polygons"><span class="chapter-tasks__icon"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#chapter_arrow"></use></svg></span><span class="chapter-tasks__title">6. Polygons</span><span class="chapter-tasks__type">
Task
</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/svg-basics/svg-intro/challenge-2"><span class="chapter-tasks__icon"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#chapter_shield"></use></svg></span><span class="chapter-tasks__title">7. Challenge: Pyramids</span><span class="chapter-tasks__type">
Challenge
</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/svg-basics/svg-intro/draw-circle"><span class="chapter-tasks__icon"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#chapter_arrow"></use></svg></span><span class="chapter-tasks__title">8. Drawing a Circle</span><span class="chapter-tasks__type">
Task
</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/svg-basics/svg-intro/challenge-3"><span class="chapter-tasks__icon"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#chapter_shield"></use></svg></span><span class="chapter-tasks__title">9. Challenge: Target</span><span class="chapter-tasks__type">
Challenge
</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/svg-basics/svg-intro/draw-ellipse"><span class="chapter-tasks__icon"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#chapter_arrow"></use></svg></span><span class="chapter-tasks__title">10. Drawing an Ellipse</span><span class="chapter-tasks__type">
Task
</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/svg-basics/svg-intro/challenge-4"><span class="chapter-tasks__icon"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#chapter_shield"></use></svg></span><span class="chapter-tasks__title">11. Challenge: Surprised Smiley</span><span class="chapter-tasks__type">
Challenge
</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/svg-basics/svg-intro/draw-lines"><span class="chapter-tasks__icon"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#chapter_arrow"></use></svg></span><span class="chapter-tasks__title">12. Drawing Lines</span><span class="chapter-tasks__type">
Task
</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/svg-basics/svg-intro/challenge-5"><span class="chapter-tasks__icon"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#chapter_shield"></use></svg></span><span class="chapter-tasks__title">13. Challenge: Arithmetic Operators</span><span class="chapter-tasks__type">
Challenge
</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/svg-basics/svg-intro/draw-polylines"><span class="chapter-tasks__icon"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#chapter_arrow"></use></svg></span><span class="chapter-tasks__title">14. Drawing Polylines</span><span class="chapter-tasks__type">
Task
</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/svg-basics/svg-intro/challenge-6"><span class="chapter-tasks__icon"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#chapter_shield"></use></svg></span><span class="chapter-tasks__title">15. Challenge: Hot-Air Balloons</span><span class="chapter-tasks__type">
Challenge
</span></a></div></div></div></div></div></div></div><footer class="page-footer page-footer--tiny"><div class="page-footer__inner"><p><a href="/docs/cookies">Cookies</a> ∙
<a href="/docs/privacy">Privacy</a> ∙
<a href="/docs/agreement">License Agreement</a> ∙
<a href="/docs/about">About</a> ∙
<a href="/contacts">Contacts</a> ∙
© HTML Academy OÜ, 2019−2026
</p><div class="page-footer__financial"><img src="https://assets.htmlacademy.org/img/visa-white.svg?cs=96e54ec8c587db9d4b1d8d328ffd87c2ebfd9555" alt="VISA" title="VISA" width="35" height="35"><img src="https://assets.htmlacademy.org/img/mastercard-horizontal.v2.svg" alt="Mastercard" title="Mastercard" width="35" height="35"></div></div></footer><div class="modal"><div class="modal__inner"><div class="modal__wrapper js-login hidden"><button class="modal__close icon-close" type="button" title="Close" data-modal="close"></button><h4 class="modal__header">Log in</h4><ul class="modal__social"><li class="modal__social-link modal__social-link--fb"><a href="/login/fb?redirect_url=%2Fcourses%2Fsvg-basics%2Fsvg-intro" rel="nofollow" title="Log in via Facebook"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#facebook"></use></svg></a></li><li class="modal__social-link modal__social-link--google"><a href="/login/google?redirect_url=%2Fcourses%2Fsvg-basics%2Fsvg-intro" rel="nofollow" title="Log in via Google"><svg height="30" width="30" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M457.732 216.625c2.628 14.041 4.063 28.743 4.063 44.098C461.796 380.688 381.481 466 260.204 466c-116.023 0-210-93.977-210-210s93.977-210 210-210c56.704 0 104.077 20.867 140.44 54.73l-59.204 59.197v-.135c-22.046-21.002-50-31.762-81.236-31.762-69.297 0-125.604 58.537-125.604 127.841 0 69.29 56.306 127.968 125.604 127.968 62.87 0 105.653-35.965 114.46-85.312h-114.46v-81.902h197.528z"/></svg></a></li></ul><div class="modal__or"><span>or</span></div><form class="modal__form form" action="/login?redirect_url=%2Fcourses%2Fsvg-basics%2Fsvg-intro" autocomplete="off" method="post" data-submit="o"><input type="hidden" name="csrf_name" value="csrf69aebb9d060fa"><input type="hidden" name="csrf_value" value="c63c54d040850b9a074ad1d5ea06f21d"><div class="form__group"><label class="sr-only" for="login-email">Email</label><input class="field field--text field--full-width" type="email" name="email" placeholder="Email" value="" id="login-email"></div><div class="form__group"><label class="sr-only" for="login-password">Password</label><input class="field field--text field--full-width ym-disable-keys" type="password" name="password" placeholder="Password" id="login-password"></div><input class="button button--full-width" type="submit" data-submit-text="Logging in…" value="Log in"></form><p class="modal__forgot-password"><a href="/recover" data-modal="open" data-value="recover">Forgot your password?</a></p><a class="modal__bottom-link" href="/signup" data-modal="open" data-value="register">Sign up</a></div><div class="modal__wrapper js-register hidden"><button class="modal__close icon-close" type="button" title="Close" data-modal="close"></button><h4 class="modal__header">Sign up</h4><ul class="modal__social"><li class="modal__social-link modal__social-link--fb"><a href="/login/fb?redirect_url=%2Fcourses%2Fsvg-basics%2Fsvg-intro" rel="nofollow" title="Log in via Facebook"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#facebook"></use></svg></a></li><li class="modal__social-link modal__social-link--google"><a href="/login/google?redirect_url=%2Fcourses%2Fsvg-basics%2Fsvg-intro" rel="nofollow" title="Log in via Google"><svg height="30" width="30" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M457.732 216.625c2.628 14.041 4.063 28.743 4.063 44.098C461.796 380.688 381.481 466 260.204 466c-116.023 0-210-93.977-210-210s93.977-210 210-210c56.704 0 104.077 20.867 140.44 54.73l-59.204 59.197v-.135c-22.046-21.002-50-31.762-81.236-31.762-69.297 0-125.604 58.537-125.604 127.841 0 69.29 56.306 127.968 125.604 127.968 62.87 0 105.653-35.965 114.46-85.312h-114.46v-81.902h197.528z"/></svg></a></li></ul><div class="modal__or"><span>or</span></div><form class="modal__form form" action="/signup?redirect_url=%2Fcourses%2Fsvg-basics%2Fsvg-intro" autocomplete="off" method="post"><input type="hidden" name="csrf_name" value="csrf69aebb9d060fa"><input type="hidden" name="csrf_value" value="c63c54d040850b9a074ad1d5ea06f21d"><div class="form__group"><label class="sr-only" for="email">
Email
<span class="required"><span class="sr-only">Required field</span><span class="required__star">*</span></span></label><div class="form__group-fields"><input class="field field--text field--full-width" type="email" name="email" value="" id="email" required placeholder="Email"></div></div><div class="form__group"><label class="sr-only" for="password">
Password
<span class="required"><span class="sr-only">Required field</span><span class="required__star">*</span></span></label><div class="form__group-fields"><input class="field field--text field--full-width" type="password" name="password" value="" id="password" required placeholder="Password"></div></div><div class="form__group"><label class="checkbox"><input class="checkbox__input" type="checkbox" name="agreement" value="1" required><span class="checkbox__text"><span>By signing up, you agree to our <a href="/docs/agreement" target="_blank">License Agreement</a> and <a href="/docs/privacy" target="_blank">Privacy Policy</a>.</span></span></label></div><input class="button button--full-width" type="submit" data-submit-text="Signing up…" value="Sign up"></form><a class="modal__bottom-link" href="/login?redirect_url=%2Fcourses%2Fsvg-basics%2Fsvg-intro" data-modal="open" data-value="login">Log in</a></div><div class="modal__wrapper modal__wrapper--no-btn-bottom js-recover hidden"><button class="modal__close icon-close" type="button" title="Close" data-modal="close"></button><h4 class="modal__header">Restore access</h4><p class="modal__text-accent">Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.</p><form class="modal__form form" action="/recover" autocomplete="off" method="post" data-submit="o"><input type="hidden" name="csrf_name" value="csrf69aebb9d060fa"><input type="hidden" name="csrf_value" value="c63c54d040850b9a074ad1d5ea06f21d"><div class="form__group"><label class="sr-only" for="recovery-email">Email</label><input class="field field--text field--full-width" type="email" name="email" placeholder="Email" value="" id="recovery-email"></div><script src='https://www.google.com/recaptcha/api.js'></script><div class="form__group"><div class="g-recaptcha" data-sitekey="6LetCTEqAAAAANROWtPzfC7Rfg9iIRiRt2k2FPn7"></div></div><input class="button button--full-width" type="submit" data-submit-text="Sending…" value="Send"></form><p class="modal__text">Forgot to connect your email to the profile? Email us and we’ll help.</p></div></div></div><div class="banner-bottom" id="cookies_disclaimer_container"><div class="banner-bottom__inner"><p>We are using cookies to gather information which will help you use our website most effectively. You can read about this <a href="/docs/cookies">here</a> or disable this feature if you want. By continuing to browse the site, you agree to our use of cookies.</p><button class="button button--green" type="button" id="cookies_disclaimer_button">Agree</button></div></div><script type="text/javascript">
(function (n) {
var c = document.getElementById('cookies_disclaimer_container');
var b = document.getElementById('cookies_disclaimer_button');
b.onclick = function() {
c.remove();
var d = new Date();
d.setTime(d.getTime() + 60 * 60* 24 * 365 * 1000);
document.cookie = n + "=1; path=/; expires=" + d.toUTCString();
};
})('hidden_cookies_disclaimer');
</script><script async src="https://assets.htmlacademy.org/js/general.v274.js" data-assets="https://assets.htmlacademy.org" data-require="modal,form,nav"></script></body></html>