{"id":22883,"date":"2019-06-17T09:59:54","date_gmt":"2019-06-17T09:59:54","guid":{"rendered":"https:\/\/codewebbarcelona.com\/graficos-svg-ilustrar-animar-codigo\/"},"modified":"2026-04-20T23:10:17","modified_gmt":"2026-04-20T23:10:17","slug":"svg-graphics-illustrate-animate-code","status":"publish","type":"post","link":"https:\/\/codewebbarcelona.com\/en\/blog\/svg-graphics-illustrate-animate-code\/","title":{"rendered":"SVG Graphics: Illustrate and Animate with Code"},"content":{"rendered":"<p>Curious about how animated graphics are made on some websites? This course is for you\u2014SVG Graphics: Illustrate and Animate with Code is now available.<\/p>\n<p>SVG stands for Scalable Vector Graphics, a two-dimensional vector graphic format that can be static or animated. It&#8217;s one of the most widely recommended formats for web development.<\/p>\n<h2>SVG Graphics: Illustrate and Animate with Code<\/h2>\n<p>&nbsp;<\/p>\n<p>Unlock the full potential of SVG and enhance the user experience in your web designs.<\/p>\n<p><iframe title=\"vimeo-player\" src=\"https:\/\/player.vimeo.com\/video\/207619948\" width=\"980\" height=\"570\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>Cool, right?<\/p>\n<h3>What will I learn in the SVG Graphics: Illustrate and Animate with Code course?<\/h3>\n<p>In the <a href=\"https:\/\/www.domestika.org\/es\/courses\/169-graficos-vectoriales-svg-ilustrar-y-animar-con-codigo?atag=424b94&amp;utm_medium=affiliates&amp;utm_source=codebarcelona_424b94\" target=\"_blank\" rel=\"noopener\">SVG Vector Graphics: Illustrate and Animate with Code course<\/a>, you&#8217;ll learn how to work with vector illustrations on your websites, focusing on interactive animation.<\/p>\n<p>The course runs for 2 hours and 2 minutes, taking you from the basics of SVG to completing a full project.<\/p>\n<p>You\u2019ll learn to:<\/p>\n<ul>\n<li>Get started with the SVG format<\/li>\n<li>Style SVGs using attributes and CSS<\/li>\n<li>Use line, polyline, polygon, and path tags for curves, straight lines, and points<\/li>\n<li>Work with viewBox attributes for virtual viewports<\/li>\n<li>Optimize, edit, group, define, and reuse SVG elements with code<\/li>\n<li>Integrate SVG into your website<\/li>\n<li>Create SVG effects<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p>Don\u2019t miss out on this <a href=\"https:\/\/www.domestika.org\/es\/courses\/169-graficos-vectoriales-svg-ilustrar-y-animar-con-codigo?atag=424b94&amp;utm_medium=affiliates&amp;utm_source=codebarcelona_424b94\" target=\"_blank\" rel=\"noopener\">course and learn how to create SVG vector graphics to illustrate and animate your web designs and projects<\/a>.<\/p>\n<h3>How will I do it?<\/h3>\n<p>The course project involves creating an illustration using animated vector elements.<\/p>\n<p>You\u2019re free to choose your own theme and level of difficulty, so you can keep it simple or go all out\u2014putting into practice all the tools you\u2019ll learn throughout the course.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-3535\" src=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/06\/montaje-curso-de-la-semana.jpg\" alt=\"montaje-curso-de-la-semana\" width=\"1080\" height=\"916\" \/><\/p>\n<h3>What do I need to take the course?<\/h3>\n<p>All you need to successfully complete this course is a computer, a code editor, and a vector graphics editor (like Illustrator, Sketch, Inkscape, or similar).<\/p>\n<p>With those tools and a bit of enthusiasm, you\u2019ll finish the course as an SVG pro.<\/p>\n<h3>Is this course for me?<\/h3>\n<p>To get the most out of the <a href=\"https:\/\/www.domestika.org\/es\/courses\/169-graficos-vectoriales-svg-ilustrar-y-animar-con-codigo?atag=424b94&amp;utm_medium=affiliates&amp;utm_source=codebarcelona_424b94\" target=\"_blank\" rel=\"noopener\">SVG Vector Graphics: Illustrate and Animate with Code course<\/a>, you should have a basic understanding of HTML and CSS.<\/p>\n<p>This course is especially recommended for:<\/p>\n<ul>\n<li>Graphic designers<\/li>\n<li>Creatives<\/li>\n<li>Illustrators<\/li>\n<li>Developers<\/li>\n<li>Frontend coders<\/li>\n<li>Web designers<\/li>\n<\/ul>\n<h3><\/h3>\n<h3>Who is the instructor?<\/h3>\n<p>Once again, Javier Usobiaga\u2014our resident web design and development guru\u2014will be your guide throughout the course.<\/p>\n<p>Javier is a web designer with 10 years of experience and co-founder (with Marta Armada) of Swwweet, a studio specializing in responsive web design.<\/p>\n<p>He also teaches workshops at Elisava and IDEP, making him the ideal instructor for you.<\/p>\n<p>Don\u2019t hesitate and&#8230;<\/p>\n<h3><a href=\"https:\/\/www.domestika.org\/es\/courses\/169-graficos-vectoriales-svg-ilustrar-y-animar-con-codigo?atag=424b94&amp;utm_medium=affiliates&amp;utm_source=codebarcelona_424b94\" target=\"_blank\" rel=\"noopener\">Sign up now!<\/a><\/h3>\n<h3>About Domestika<\/h3>\n<p>With over 1 million creatives, Domestika is the perfect place to share and learn about all the topics that interest you.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Curious about how animated graphics are made on some websites? This course is for you\u2014SVG Graphics: Illustrate and Animate with Code is now available. SVG stands for Scalable Vector Graphics, a two-dimensional vector graphic format that can be static or animated. It&#8217;s one of the most widely recommended formats for web development. SVG Graphics: Illustrate [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":12586,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[208,134],"class_list":["post-22883","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-disseny-desenvolupament-web","category-disseny-grafic"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Gr\u00e1ficos SVG: ilustrar y animar con c\u00f3digo - Code Barcelona<\/title>\n<meta name=\"description\" content=\"Siempre a la vanguardia el curso de gr\u00e1ficos SVG para ilustrar y animar con c\u00f3digo es un curso imprescindible con la garant\u00eda Domestika para no quedarte atr\u00e1s.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codewebbarcelona.com\/en\/blog\/svg-graphics-illustrate-animate-code\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Gr\u00e1ficos SVG: ilustrar y animar con c\u00f3digo - Code Barcelona\" \/>\n<meta property=\"og:description\" content=\"Siempre a la vanguardia el curso de gr\u00e1ficos SVG para ilustrar y animar con c\u00f3digo es un curso imprescindible con la garant\u00eda Domestika para no quedarte atr\u00e1s.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codewebbarcelona.com\/en\/blog\/svg-graphics-illustrate-animate-code\/\" \/>\n<meta property=\"og:site_name\" content=\"Code Barcelona\" \/>\n<meta property=\"article:published_time\" content=\"2019-06-17T09:59:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-20T23:10:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/06\/graficos-svg-ilustrar-y-animar-con-codigo-featured.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"896\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"cd26Bc\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"cd26Bc\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/svg-graphics-illustrate-animate-code\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/svg-graphics-illustrate-animate-code\/\"},\"author\":{\"name\":\"cd26Bc\",\"@id\":\"https:\/\/codewebbarcelona.com\/en\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567\"},\"headline\":\"SVG Graphics: Illustrate and Animate with Code\",\"datePublished\":\"2019-06-17T09:59:54+00:00\",\"dateModified\":\"2026-04-20T23:10:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/svg-graphics-illustrate-animate-code\/\"},\"wordCount\":460,\"image\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/svg-graphics-illustrate-animate-code\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/06\/graficos-svg-ilustrar-y-animar-con-codigo-featured.jpg\",\"articleSection\":[\"Disseny i desenvolupament web\",\"Dise\u00f1o gr\u00e1fico\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/svg-graphics-illustrate-animate-code\/\",\"url\":\"https:\/\/codewebbarcelona.com\/en\/blog\/svg-graphics-illustrate-animate-code\/\",\"name\":\"Gr\u00e1ficos SVG: ilustrar y animar con c\u00f3digo - Code Barcelona\",\"isPartOf\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/svg-graphics-illustrate-animate-code\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/svg-graphics-illustrate-animate-code\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/06\/graficos-svg-ilustrar-y-animar-con-codigo-featured.jpg\",\"datePublished\":\"2019-06-17T09:59:54+00:00\",\"dateModified\":\"2026-04-20T23:10:17+00:00\",\"author\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567\"},\"description\":\"Siempre a la vanguardia el curso de gr\u00e1ficos SVG para ilustrar y animar con c\u00f3digo es un curso imprescindible con la garant\u00eda Domestika para no quedarte atr\u00e1s.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codewebbarcelona.com\/en\/blog\/svg-graphics-illustrate-animate-code\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/svg-graphics-illustrate-animate-code\/#primaryimage\",\"url\":\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/06\/graficos-svg-ilustrar-y-animar-con-codigo-featured.jpg\",\"contentUrl\":\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/06\/graficos-svg-ilustrar-y-animar-con-codigo-featured.jpg\",\"width\":2560,\"height\":896},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codewebbarcelona.com\/en\/#website\",\"url\":\"https:\/\/codewebbarcelona.com\/en\/\",\"name\":\"Code Barcelona\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codewebbarcelona.com\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/codewebbarcelona.com\/en\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567\",\"name\":\"cd26Bc\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g\",\"caption\":\"cd26Bc\"},\"sameAs\":[\"https:\/\/codewebbarcelona.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Gr\u00e1ficos SVG: ilustrar y animar con c\u00f3digo - Code Barcelona","description":"Siempre a la vanguardia el curso de gr\u00e1ficos SVG para ilustrar y animar con c\u00f3digo es un curso imprescindible con la garant\u00eda Domestika para no quedarte atr\u00e1s.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codewebbarcelona.com\/en\/blog\/svg-graphics-illustrate-animate-code\/","og_locale":"en_US","og_type":"article","og_title":"Gr\u00e1ficos SVG: ilustrar y animar con c\u00f3digo - Code Barcelona","og_description":"Siempre a la vanguardia el curso de gr\u00e1ficos SVG para ilustrar y animar con c\u00f3digo es un curso imprescindible con la garant\u00eda Domestika para no quedarte atr\u00e1s.","og_url":"https:\/\/codewebbarcelona.com\/en\/blog\/svg-graphics-illustrate-animate-code\/","og_site_name":"Code Barcelona","article_published_time":"2019-06-17T09:59:54+00:00","article_modified_time":"2026-04-20T23:10:17+00:00","og_image":[{"width":2560,"height":896,"url":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/06\/graficos-svg-ilustrar-y-animar-con-codigo-featured.jpg","type":"image\/jpeg"}],"author":"cd26Bc","twitter_card":"summary_large_image","twitter_misc":{"Written by":"cd26Bc","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codewebbarcelona.com\/en\/blog\/svg-graphics-illustrate-animate-code\/#article","isPartOf":{"@id":"https:\/\/codewebbarcelona.com\/en\/blog\/svg-graphics-illustrate-animate-code\/"},"author":{"name":"cd26Bc","@id":"https:\/\/codewebbarcelona.com\/en\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567"},"headline":"SVG Graphics: Illustrate and Animate with Code","datePublished":"2019-06-17T09:59:54+00:00","dateModified":"2026-04-20T23:10:17+00:00","mainEntityOfPage":{"@id":"https:\/\/codewebbarcelona.com\/en\/blog\/svg-graphics-illustrate-animate-code\/"},"wordCount":460,"image":{"@id":"https:\/\/codewebbarcelona.com\/en\/blog\/svg-graphics-illustrate-animate-code\/#primaryimage"},"thumbnailUrl":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/06\/graficos-svg-ilustrar-y-animar-con-codigo-featured.jpg","articleSection":["Disseny i desenvolupament web","Dise\u00f1o gr\u00e1fico"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/codewebbarcelona.com\/en\/blog\/svg-graphics-illustrate-animate-code\/","url":"https:\/\/codewebbarcelona.com\/en\/blog\/svg-graphics-illustrate-animate-code\/","name":"Gr\u00e1ficos SVG: ilustrar y animar con c\u00f3digo - Code Barcelona","isPartOf":{"@id":"https:\/\/codewebbarcelona.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codewebbarcelona.com\/en\/blog\/svg-graphics-illustrate-animate-code\/#primaryimage"},"image":{"@id":"https:\/\/codewebbarcelona.com\/en\/blog\/svg-graphics-illustrate-animate-code\/#primaryimage"},"thumbnailUrl":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/06\/graficos-svg-ilustrar-y-animar-con-codigo-featured.jpg","datePublished":"2019-06-17T09:59:54+00:00","dateModified":"2026-04-20T23:10:17+00:00","author":{"@id":"https:\/\/codewebbarcelona.com\/en\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567"},"description":"Siempre a la vanguardia el curso de gr\u00e1ficos SVG para ilustrar y animar con c\u00f3digo es un curso imprescindible con la garant\u00eda Domestika para no quedarte atr\u00e1s.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codewebbarcelona.com\/en\/blog\/svg-graphics-illustrate-animate-code\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codewebbarcelona.com\/en\/blog\/svg-graphics-illustrate-animate-code\/#primaryimage","url":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/06\/graficos-svg-ilustrar-y-animar-con-codigo-featured.jpg","contentUrl":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/06\/graficos-svg-ilustrar-y-animar-con-codigo-featured.jpg","width":2560,"height":896},{"@type":"WebSite","@id":"https:\/\/codewebbarcelona.com\/en\/#website","url":"https:\/\/codewebbarcelona.com\/en\/","name":"Code Barcelona","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codewebbarcelona.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/codewebbarcelona.com\/en\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567","name":"cd26Bc","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g","caption":"cd26Bc"},"sameAs":["https:\/\/codewebbarcelona.com"]}]}},"_links":{"self":[{"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/posts\/22883","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/comments?post=22883"}],"version-history":[{"count":2,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/posts\/22883\/revisions"}],"predecessor-version":[{"id":22887,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/posts\/22883\/revisions\/22887"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/media\/12586"}],"wp:attachment":[{"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/media?parent=22883"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/categories?post=22883"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}