{"id":1072,"date":"2019-11-23T15:58:32","date_gmt":"2019-11-23T15:58:32","guid":{"rendered":"http:\/\/www.andrefelizardo.com.br\/blog\/?p=1072"},"modified":"2019-11-23T15:58:37","modified_gmt":"2019-11-23T15:58:37","slug":"svg-guia-definitivo","status":"publish","type":"post","link":"https:\/\/www.andrefelizardo.com.br\/blog\/svg-guia-definitivo\/","title":{"rendered":"SVG &#8211; Guia definitivo"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">O que \u00e9<\/h2>\n\n\n\n<p>SVG \u00e9 a sigla para <em>Scalable Vecto<\/em>r <em>Graphics<\/em> que traduzindo seria gr\u00e1ficos vetoriais escal\u00e1veis. SVG \u00e9 uma linguagem XML para fazer desenhos, gr\u00e1ficos 2D de maneiras est\u00e1ticas ou din\u00e2micas a partir de vetores.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>A grande vantagem dos gr\u00e1ficos vetoriais \u00e9 que n\u00e3o se perde a qualidade quando esses gr\u00e1ficos s\u00e3o ampliados (agora lembrei das minhas aulas de <a rel=\"noreferrer noopener\" aria-label=\"CorelDraw (opens in a new tab)\" href=\"https:\/\/www.coreldraw.com\/br\/\" target=\"_blank\">CorelDraw<\/a>).<\/p>\n\n\n\n<p>Outro fato interessante sobre o SVG \u00e9 que ele \u00e9 <em>open source<\/em> e foi criado pela <a href=\"https:\/\/www.w3c.br\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"W3C (opens in a new tab)\">W3C<\/a>, que tamb\u00e9m definiu o HTML e o XHTML.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"#quando-usar\">Quando usar<\/a><\/li><li><a href=\"#como-usar\">Como usar<\/a><\/li><li><a href=\"#principais-elementos\">Principais elementos<\/a><ul><li><em><a href=\"#rect\">rect<\/a><\/em><\/li><li><em><a href=\"#circle\">circle<\/a><\/em><\/li><li><em><a href=\"#ellipse\">ellipse<\/a><\/em><\/li><li><em><a href=\"#line\">line<\/a><\/em><\/li><li><em><a href=\"#polyline\">polyline<\/a><\/em><\/li><li><em><a href=\"#polygon\">polygon<\/a><\/em><\/li><li><em><a href=\"#path\">path<\/a><\/em><\/li><\/ul><\/li><li><a href=\"#casos-reais\">Casos reais<\/a><ul><li><a href=\"#grafico\">Gr\u00e1fico com anima\u00e7\u00e3o em CSS<\/a><\/li><li><a href=\"#loading\">Loading com anima\u00e7\u00e3o no pr\u00f3prio SVG<\/a><\/li><\/ul><\/li><li><a href=\"#canvas\">E o Canvas?<\/a><\/li><\/ul>\n\n\n\n<a name=\"quando-usar\"><\/a><h2>Quando usar<\/h2>\n\n\n\n<p>Para desenhar gr\u00e1ficos 2D, formas simples e complexas, \u00edcones, animar formas entre outras coisas. \u00c9 interessante perceber inclusive, que o SVG \u00e9 capaz de realizar tantas coisas, que atualmente o <em>canvas <\/em>\u00e9 usado em contextos muito espec\u00edficos.<\/p>\n\n\n\n<p>Um caso real onde utilizei recentemente SVG e um projeto, foi uma tela onde um gr\u00e1fico com anima\u00e7\u00e3o estava travando no Android (projeto desenvolvido com <a href=\"http:\/\/www.andrefelizardo.com.br\/blog\/comecando-com-ionic-3\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Ionic (opens in a new tab)\">Ionic<\/a>) principalmente. O gr\u00e1fico foi incialmente desenvolvido com <em>canvas<\/em>. Eu refiz o gr\u00e1fico e a anima\u00e7\u00e3o com SVG e CSS e ficou lindo &lt;3<\/p>\n\n\n\n<a name=\"como-usar\"><\/a><h2>Como usar<\/h2>\n\n\n\n<p>Existem v\u00e1rias formas de criar um SVG, uma \u00e9 atrav\u00e9s de c\u00f3digo <em>xml.<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"137\" data-src=\"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2019\/11\/svg_guia-definitivo_01-1024x137.png\" alt=\"Exemplo de SVG b\u00e1sico\" class=\"wp-image-1074 lazyload\" data-srcset=\"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2019\/11\/svg_guia-definitivo_01-1024x137.png 1024w, https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2019\/11\/svg_guia-definitivo_01-300x40.png 300w, https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2019\/11\/svg_guia-definitivo_01-768x103.png 768w, https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2019\/11\/svg_guia-definitivo_01-1536x206.png 1536w, https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2019\/11\/svg_guia-definitivo_01.png 1568w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/137;\" \/><figcaption>Exemplo de SVG<\/figcaption><\/figure>\n\n\n\n<p>Outra forma de escrever SVG \u00e9 atrav\u00e9s de softwares capazes de criar, editar e exportar gr\u00e1ficos SVG. V\u00e1rios s\u00e3o os softwares capazes, os mais conhecidos s\u00e3o: <em>Gimp, Inkscape, Adobe Illustrator e Corel Draw.<\/em><\/p>\n\n\n\n<a name=\"principais-elementos\"><\/a><h2>Principais elementos<\/h2>\n\n\n\n<a name=\"rect\"><\/a><h3>rect<\/h3>\n\n\n\n<p>Forma b\u00e1sica do SVG, <em>rect <\/em>\u00e9 utilizado para criar ret\u00e2ngulos a partir da posi\u00e7\u00e3o de uma borda adicionando sua largura e altura e possibilitando tamb\u00e9m criar ret\u00e2ngulos com bordas arredondadas.<\/p>\n\n\n\n<p>[codepen_embed height=&#8221;265&#8243; theme_id=&#8221;default&#8221; slug_hash=&#8221;zYYXLKX&#8221; default_tab=&#8221;html,result&#8221; user=&#8221;andrefelizardo&#8221;]See the Pen <a href=\"https:\/\/codepen.io\/andrefelizardo\/pen\/zYYXLKX\">svg_guia-definitivo_01<\/a> by Andre Felizardo (<a href=\"https:\/\/codepen.io\/andrefelizardo\">@andrefelizardo<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.[\/codepen_embed]<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><em>x<\/em>: posi\u00e7\u00e3o do elemento no eixo horizontal (em rela\u00e7\u00e3o ao espa\u00e7o do SVG). Propriedade opcional.<\/li><li><em>y<\/em>: posi\u00e7\u00e3o do elemento no eixo vertical (tamb\u00e9m em rela\u00e7\u00e3o ao espa\u00e7o do SVG). Propriedade opcional.<\/li><li><em>width<\/em>: largura<\/li><li><em>height<\/em>: altura<\/li><li><em>fill<\/em>: cor do preenchimento. Opcional.<\/li><li><em>rx<\/em>: Define o raio das bordas na horizontal. Utilizado para fazer bordas arredondadas.<\/li><li><em>ry<\/em>: Define o raio das bordas na vertical.<\/li><\/ul>\n\n\n\n<a name=\"circle\"><\/a><h3>circle<\/h3>\n\n\n\n<p>Mais uma forma b\u00e1sica do SVG, usada para criar c\u00edrculos a partir de um ponto central e um raio.<\/p>\n\n\n\n<p>[codepen_embed height=&#8221;265&#8243; theme_id=&#8221;default&#8221; slug_hash=&#8221;ZEEZMVB&#8221; default_tab=&#8221;html,result&#8221; user=&#8221;andrefelizardo&#8221;]See the Pen <a href=\"https:\/\/codepen.io\/andrefelizardo\/pen\/ZEEZMVB\">svg_guia-definitivo_02<\/a> by Andre Felizardo (<a href=\"https:\/\/codepen.io\/andrefelizardo\">@andrefelizardo<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.[\/codepen_embed]<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><em>cx<\/em>: posi\u00e7\u00e3o do centro do c\u00edrculo no eixo horizontal.<\/li><li><em>cy<\/em>: posi\u00e7\u00e3o do centro do c\u00edrculo no eixo vertical.<\/li><li><em>r<\/em>: define o raio do c\u00edrculo.<\/li><li><em>fill<\/em>: cor do preenchimento. Opcional<\/li><\/ul>\n\n\n\n<a name=\"ellipse\"><\/a><h3>ellipse<\/h3>\n\n\n\n<p>Outra forma b\u00e1sica do SVG, usada para criar elipses a partir de uma coordenada central, tanto no eixo horizontal quanto no eixo vertical.<\/p>\n\n\n\n<p>[codepen_embed height=&#8221;265&#8243; theme_id=&#8221;default&#8221; slug_hash=&#8221;ZEEZZrQ&#8221; default_tab=&#8221;html,result&#8221; user=&#8221;andrefelizardo&#8221;]See the Pen <a href=\"https:\/\/codepen.io\/andrefelizardo\/pen\/ZEEZZrQ\">svg_guia-definitivo_03<\/a> by Andre Felizardo (<a href=\"https:\/\/codepen.io\/andrefelizardo\">@andrefelizardo<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.[\/codepen_embed]<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><em>cx<\/em>: posi\u00e7\u00e3o do centro da elipse no eixo horizontal.<\/li><li><em>cy<\/em>: posi\u00e7\u00e3o do centro da elipse no eixo vertical.<\/li><li><em>rx<\/em>: raio da elipse no eixo horizontal.<\/li><li><em>ry<\/em>: raio da elipse no eixo vertical.<\/li><li><em>fill<\/em>: <s>voc\u00ea j\u00e1 t\u00e1 cansado de ler a mesma coisa<\/s> cor do preenchimento. Opcional.<\/li><\/ul>\n\n\n\n<a name=\"line\"><\/a><h3>line<\/h3>\n\n\n\n<p>O elemento <em>line <\/em>\u00e9 uma forma b\u00e1sica do SVG para criar uma linha conectando dois pontos.<\/p>\n\n\n\n<p>[codepen_embed height=&#8221;265&#8243; theme_id=&#8221;default&#8221; slug_hash=&#8221;jOORRvE&#8221; default_tab=&#8221;html,result&#8221; user=&#8221;andrefelizardo&#8221;]See the Pen <a href=\"https:\/\/codepen.io\/andrefelizardo\/pen\/jOORRvE\">svg_guia-definitivo_04<\/a> by Andre Felizardo (<a href=\"https:\/\/codepen.io\/andrefelizardo\">@andrefelizardo<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.[\/codepen_embed]<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><em>x1<\/em>: posi\u00e7\u00e3o no eixo horizontal do primeiro ponto da linha.<\/li><li><em>y1<\/em>: posi\u00e7\u00e3o no eixo vertical do primeiro ponto da linha.<\/li><li><em>x2<\/em>: posi\u00e7\u00e3o no eixo horizontal do segundo ponto da linha.<\/li><li><em>y2<\/em>: posi\u00e7\u00e3o no eixo vertical do segundo ponto da linha.<\/li><li><em>stroke<\/em>: cor do contorno da linha, cor da linha em si. Opcional.<\/li><li><em>stroke-width<\/em>: largura da linha. Opcional.<\/li><\/ul>\n\n\n\n<a name=\"polyline\"><\/a><h3 class=\"wp-block-heading\">polyline<\/h3>\n\n\n\n<p>O elemento <em>polyline <\/em>ainda \u00e9 uma forma b\u00e1sica do SVG, por\u00e9m podemos dizer que j\u00e1 tem um pouco mais de complexidade ao desenhar. Ele \u00e9 utilizado para desenhar v\u00e1rias linhas retas conectando v\u00e1rios pontos. Normalmente \u00e9 utilizado para criar formas abertas.<\/p>\n\n\n\n<p>[codepen_embed height=&#8221;265&#8243; theme_id=&#8221;default&#8221; slug_hash=&#8221;ZEEZZVp&#8221; default_tab=&#8221;html,result&#8221; user=&#8221;andrefelizardo&#8221;]See the Pen <a href=\"https:\/\/codepen.io\/andrefelizardo\/pen\/ZEEZZVp\">svg_guia-definitivo_05<\/a> by Andre Felizardo (<a href=\"https:\/\/codepen.io\/andrefelizardo\">@andrefelizardo<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.[\/codepen_embed]<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><em>points<\/em>: posi\u00e7\u00e3o em pares ordenados (x, y) para cada ponto do elemento.<\/li><li><em>stroke<\/em>: cor do contorno do elemento. Opcional.<\/li><li><em>stroke-width<\/em>: largura do contorno do elemento. Opcional.<\/li><li><em>fill<\/em>: cor de preenchimento interno do elemento (no exemplo acima eu n\u00e3o queria cor de preenchimento, e por isso passei <em>none<\/em>). Opcional.<\/li><\/ul>\n\n\n\n<a name=\"polygon\"><\/a><h3>polygon<\/h3>\n\n\n\n<p>\u00c9 o \u00faltimo elemento b\u00e1sico, eu prometo. Ele desenha uma forma fechada atrav\u00e9s de um conjunto de segmentos de linha reta ligados.<\/p>\n\n\n\n<p>[codepen_embed height=&#8221;265&#8243; theme_id=&#8221;default&#8221; slug_hash=&#8221;pooBBBy&#8221; default_tab=&#8221;html,result&#8221; user=&#8221;andrefelizardo&#8221;]See the Pen <a href=\"https:\/\/codepen.io\/andrefelizardo\/pen\/pooBBBy\">svg_guia-definitivo_06<\/a> by Andre Felizardo (<a href=\"https:\/\/codepen.io\/andrefelizardo\">@andrefelizardo<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.[\/codepen_embed]<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><em>points<\/em>: posi\u00e7\u00e3o em pares ordenados (x, y) para cada ponto do elemento.<\/li><li><em>fill<\/em>: preenchimento interno do elemento. Opcional.<\/li><li><em>stroke<\/em>: cor do contorno do elemento. Opcional.<\/li><li><em>stroke-widtht<\/em>: lagura do contorno do elemento. Opcional.<\/li><\/ul>\n\n\n\n<a name=\"path\"><\/a><h3>path<\/h3>\n\n\n\n<p>Elemento gen\u00e9rico para definir uma forma. Toda as formas b\u00e1sicas poder\u00e3o ser criadas com path tamb\u00e9m. Isso o torna um elemento bem completo, e as vezes complexo.<\/p>\n\n\n\n<p>[codepen_embed height=&#8221;265&#8243; theme_id=&#8221;default&#8221; slug_hash=&#8221;Pooggvg&#8221; default_tab=&#8221;html,result&#8221; user=&#8221;andrefelizardo&#8221;]See the Pen <a href=\"https:\/\/codepen.io\/andrefelizardo\/pen\/Pooggvg\">svg_guia-definitivo_07<\/a> by Andre Felizardo (<a href=\"https:\/\/codepen.io\/andrefelizardo\">@andrefelizardo<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.[\/codepen_embed]<\/p>\n\n\n\n<p>O SVG define 6 tipos de comandos para o elemento <em>path<\/em>, para um total de 20 comandos. Cada comando \u00e9 composto por uma letra e n\u00fameros que representam os par\u00e2metros de cada comando. Se voc\u00ea n\u00e3o entender tudo de primeira, n\u00e3o se preocupe, pratique. Mantive os termos em ingl\u00eas pois as letras usadas s\u00e3o abrevia\u00e7\u00f5es.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><em>MoveTo<\/em>: M, m<\/li><li><em>LineTo<\/em>: L, l, H, h, V, v<\/li><li><em>Cubic B\u00e9zier Curve: C, c, S, s<\/em><\/li><li><em>Quadratic B\u00e9zier Curve<\/em>: Q, q, T, t<\/li><li><em>Elliptical Arc Curve<\/em>: A, a<\/li><li><em>ClosePath<\/em>: Z, z<\/li><\/ul>\n\n\n\n<p>Os comandos diferenciam mai\u00fasculas de min\u00fasculas, a diferen\u00e7a \u00e9 que as letras mai\u00fasculas definem seus valores como posi\u00e7\u00f5es absolutas e as min\u00fasculas definem pontos em rela\u00e7\u00e3o a posi\u00e7\u00e3o atual.<\/p>\n\n\n\n<a name=\"casos-reais\"><\/a><h2>Casos reais<\/h2>\n\n\n\n<a name=\"grafico\"><\/a><h3>Gr\u00e1fico com anima\u00e7\u00e3o em CSS<\/h3>\n\n\n\n<p>[codepen_embed height=&#8221;265&#8243; theme_id=&#8221;default&#8221; slug_hash=&#8221;ZEEZNWK&#8221; default_tab=&#8221;html,result&#8221; user=&#8221;andrefelizardo&#8221;]See the Pen <a href=\"https:\/\/codepen.io\/andrefelizardo\/pen\/ZEEZNWK\">svg_guia-definitivo_grafico<\/a> by Andre Felizardo (<a href=\"https:\/\/codepen.io\/andrefelizardo\">@andrefelizardo<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.[\/codepen_embed]<\/p>\n\n\n\n<a name=\"loading\"><\/a><h3>Loading com anima\u00e7\u00e3o no pr\u00f3prio SVG<\/h3>\n\n\n\n<p>[codepen_embed height=&#8221;265&#8243; theme_id=&#8221;default&#8221; slug_hash=&#8221;RwwOmgz&#8221; default_tab=&#8221;html,result&#8221; user=&#8221;andrefelizardo&#8221;]See the Pen <a href=\"https:\/\/codepen.io\/andrefelizardo\/pen\/RwwOmgz\">svg_guia-definitivo_loading<\/a> by Andre Felizardo (<a href=\"https:\/\/codepen.io\/andrefelizardo\">@andrefelizardo<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.[\/codepen_embed]<\/p>\n\n\n\n<a name=\"canvas\"><\/a><h2>E o Canvas?<\/h2>\n\n\n\n<p>Apesar de algumas formas simples o elemento <em>canvas <\/em>e o elemento <em>svg<\/em> proporcionarem experi\u00eancias visuais parecidas, eles n\u00e3o s\u00e3o a mesma coisa.<\/p>\n\n\n\n<p><em>Canvas<\/em> foi feito para desenhar de forma program\u00e1tica, ou seja programando atrav\u00e9s de Javascript. <em>Canvas<\/em> \u00e9 desenhado com base em pixel, j\u00e1 o SVG \u00e9 desenhado com base na forma. SVG pode ser alterado por Javascript e CSS, <em>canvas<\/em> apenas por Javascript.<\/p>\n\n\n\n<p>Resumo do resumo, <em>canvas<\/em> deveria ser utilizado principalmente para manipula\u00e7\u00e3o de pixels (como colocar bordas em imagens .png), e SVG para desenhar formas gr\u00e1ficas de alta fidelidade, como \u00edcones entre outros. <em>Canvas<\/em> funciona melhor em uma tela pequena com mais de 10.000 objetos desenhados. Caso contr\u00e1rio SVG vai ter uma performance melhor.<\/p>\n\n\n\n<p>E a\u00ed? O que achou do SVG? Voc\u00ea j\u00e1 utiliza? Qualquer d\u00favida deixa a\u00ed nos coment\u00e1rios. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>O que \u00e9 SVG \u00e9 a sigla para Scalable Vector Graphics que traduzindo seria gr\u00e1ficos vetoriais escal\u00e1veis. SVG \u00e9 uma linguagem XML para fazer desenhos, gr\u00e1ficos 2D de maneiras est\u00e1ticas ou din\u00e2micas a partir de vetores.<\/p>\n","protected":false},"author":1,"featured_media":1090,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[117,4,5],"tags":[53,60,143],"class_list":["post-1072","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev","category-geral","category-tecnologia","tag-html","tag-html5","tag-svg"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>SVG - Guia definitivo - Blog do Andr\u00e9 Felizardo<\/title>\n<meta name=\"description\" content=\"SVG - Guia definitivo \u00e9 um guia para voc\u00ea saber o que \u00e9 SVG, quando e como us\u00e1-lo atrav\u00e9s de exemplos pr\u00e1ticos do dia-a-dia do desenvolvedor frontend.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/www.andrefelizardo.com.br\/blog\/svg-guia-definitivo\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"SVG - Guia definitivo - Blog do Andr\u00e9 Felizardo\" \/>\n<meta property=\"og:description\" content=\"SVG - Guia definitivo \u00e9 um guia para voc\u00ea saber o que \u00e9 SVG, quando e como us\u00e1-lo atrav\u00e9s de exemplos pr\u00e1ticos do dia-a-dia do desenvolvedor frontend.\" \/>\n<meta property=\"og:url\" content=\"http:\/\/www.andrefelizardo.com.br\/blog\/svg-guia-definitivo\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog do Andr\u00e9 Felizardo\" \/>\n<meta property=\"article:published_time\" content=\"2019-11-23T15:58:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-11-23T15:58:37+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2019\/11\/capa-blog-svg.png\" \/>\n\t<meta property=\"og:image:width\" content=\"750\" \/>\n\t<meta property=\"og:image:height\" content=\"393\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Andr\u00e9 Felizardo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Andr\u00e9 Felizardo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/svg-guia-definitivo\\\/#article\",\"isPartOf\":{\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/svg-guia-definitivo\\\/\"},\"author\":{\"name\":\"Andr\u00e9 Felizardo\",\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/7ffba68b251851fb519600e2e387a02b\"},\"headline\":\"SVG &#8211; Guia definitivo\",\"datePublished\":\"2019-11-23T15:58:32+00:00\",\"dateModified\":\"2019-11-23T15:58:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/svg-guia-definitivo\\\/\"},\"wordCount\":1313,\"commentCount\":0,\"image\":{\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/svg-guia-definitivo\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/capa-blog-svg.png\",\"keywords\":[\"html\",\"html5\",\"svg\"],\"articleSection\":[\"Dev\",\"Geral\",\"Tecnologia\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/svg-guia-definitivo\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/svg-guia-definitivo\\\/\",\"url\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/svg-guia-definitivo\\\/\",\"name\":\"SVG - Guia definitivo - Blog do Andr\u00e9 Felizardo\",\"isPartOf\":{\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/svg-guia-definitivo\\\/#primaryimage\"},\"image\":{\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/svg-guia-definitivo\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/capa-blog-svg.png\",\"datePublished\":\"2019-11-23T15:58:32+00:00\",\"dateModified\":\"2019-11-23T15:58:37+00:00\",\"author\":{\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/7ffba68b251851fb519600e2e387a02b\"},\"description\":\"SVG - Guia definitivo \u00e9 um guia para voc\u00ea saber o que \u00e9 SVG, quando e como us\u00e1-lo atrav\u00e9s de exemplos pr\u00e1ticos do dia-a-dia do desenvolvedor frontend.\",\"breadcrumb\":{\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/svg-guia-definitivo\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/svg-guia-definitivo\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/svg-guia-definitivo\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/capa-blog-svg.png\",\"contentUrl\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/capa-blog-svg.png\",\"width\":750,\"height\":393},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/svg-guia-definitivo\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"SVG &#8211; Guia definitivo\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/#website\",\"url\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/\",\"name\":\"Blog do Andr\u00e9 Felizardo\",\"description\":\"Programa\u00e7\u00e3o de dev para dev\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/7ffba68b251851fb519600e2e387a02b\",\"name\":\"Andr\u00e9 Felizardo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/wphb-cache\\\/gravatar\\\/9f9\\\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg\",\"url\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/wphb-cache\\\/gravatar\\\/9f9\\\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg\",\"contentUrl\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/wphb-cache\\\/gravatar\\\/9f9\\\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg\",\"caption\":\"Andr\u00e9 Felizardo\"},\"sameAs\":[\"http:\\\/\\\/www.andrefelizardo.com.br\"],\"url\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/author\\\/andrefelizardo\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"SVG - Guia definitivo - Blog do Andr\u00e9 Felizardo","description":"SVG - Guia definitivo \u00e9 um guia para voc\u00ea saber o que \u00e9 SVG, quando e como us\u00e1-lo atrav\u00e9s de exemplos pr\u00e1ticos do dia-a-dia do desenvolvedor frontend.","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":"http:\/\/www.andrefelizardo.com.br\/blog\/svg-guia-definitivo\/","og_locale":"pt_BR","og_type":"article","og_title":"SVG - Guia definitivo - Blog do Andr\u00e9 Felizardo","og_description":"SVG - Guia definitivo \u00e9 um guia para voc\u00ea saber o que \u00e9 SVG, quando e como us\u00e1-lo atrav\u00e9s de exemplos pr\u00e1ticos do dia-a-dia do desenvolvedor frontend.","og_url":"http:\/\/www.andrefelizardo.com.br\/blog\/svg-guia-definitivo\/","og_site_name":"Blog do Andr\u00e9 Felizardo","article_published_time":"2019-11-23T15:58:32+00:00","article_modified_time":"2019-11-23T15:58:37+00:00","og_image":[{"width":750,"height":393,"url":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2019\/11\/capa-blog-svg.png","type":"image\/png"}],"author":"Andr\u00e9 Felizardo","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Andr\u00e9 Felizardo","Est. tempo de leitura":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/www.andrefelizardo.com.br\/blog\/svg-guia-definitivo\/#article","isPartOf":{"@id":"http:\/\/www.andrefelizardo.com.br\/blog\/svg-guia-definitivo\/"},"author":{"name":"Andr\u00e9 Felizardo","@id":"http:\/\/www.andrefelizardo.com.br\/blog\/#\/schema\/person\/7ffba68b251851fb519600e2e387a02b"},"headline":"SVG &#8211; Guia definitivo","datePublished":"2019-11-23T15:58:32+00:00","dateModified":"2019-11-23T15:58:37+00:00","mainEntityOfPage":{"@id":"http:\/\/www.andrefelizardo.com.br\/blog\/svg-guia-definitivo\/"},"wordCount":1313,"commentCount":0,"image":{"@id":"http:\/\/www.andrefelizardo.com.br\/blog\/svg-guia-definitivo\/#primaryimage"},"thumbnailUrl":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2019\/11\/capa-blog-svg.png","keywords":["html","html5","svg"],"articleSection":["Dev","Geral","Tecnologia"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["http:\/\/www.andrefelizardo.com.br\/blog\/svg-guia-definitivo\/#respond"]}]},{"@type":"WebPage","@id":"http:\/\/www.andrefelizardo.com.br\/blog\/svg-guia-definitivo\/","url":"http:\/\/www.andrefelizardo.com.br\/blog\/svg-guia-definitivo\/","name":"SVG - Guia definitivo - Blog do Andr\u00e9 Felizardo","isPartOf":{"@id":"http:\/\/www.andrefelizardo.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"http:\/\/www.andrefelizardo.com.br\/blog\/svg-guia-definitivo\/#primaryimage"},"image":{"@id":"http:\/\/www.andrefelizardo.com.br\/blog\/svg-guia-definitivo\/#primaryimage"},"thumbnailUrl":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2019\/11\/capa-blog-svg.png","datePublished":"2019-11-23T15:58:32+00:00","dateModified":"2019-11-23T15:58:37+00:00","author":{"@id":"http:\/\/www.andrefelizardo.com.br\/blog\/#\/schema\/person\/7ffba68b251851fb519600e2e387a02b"},"description":"SVG - Guia definitivo \u00e9 um guia para voc\u00ea saber o que \u00e9 SVG, quando e como us\u00e1-lo atrav\u00e9s de exemplos pr\u00e1ticos do dia-a-dia do desenvolvedor frontend.","breadcrumb":{"@id":"http:\/\/www.andrefelizardo.com.br\/blog\/svg-guia-definitivo\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["http:\/\/www.andrefelizardo.com.br\/blog\/svg-guia-definitivo\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"http:\/\/www.andrefelizardo.com.br\/blog\/svg-guia-definitivo\/#primaryimage","url":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2019\/11\/capa-blog-svg.png","contentUrl":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2019\/11\/capa-blog-svg.png","width":750,"height":393},{"@type":"BreadcrumbList","@id":"http:\/\/www.andrefelizardo.com.br\/blog\/svg-guia-definitivo\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"http:\/\/www.andrefelizardo.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"SVG &#8211; Guia definitivo"}]},{"@type":"WebSite","@id":"http:\/\/www.andrefelizardo.com.br\/blog\/#website","url":"http:\/\/www.andrefelizardo.com.br\/blog\/","name":"Blog do Andr\u00e9 Felizardo","description":"Programa\u00e7\u00e3o de dev para dev","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/www.andrefelizardo.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"http:\/\/www.andrefelizardo.com.br\/blog\/#\/schema\/person\/7ffba68b251851fb519600e2e387a02b","name":"Andr\u00e9 Felizardo","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/wphb-cache\/gravatar\/9f9\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg","url":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/wphb-cache\/gravatar\/9f9\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg","contentUrl":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/wphb-cache\/gravatar\/9f9\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg","caption":"Andr\u00e9 Felizardo"},"sameAs":["http:\/\/www.andrefelizardo.com.br"],"url":"https:\/\/www.andrefelizardo.com.br\/blog\/author\/andrefelizardo\/"}]}},"jetpack_featured_media_url":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2019\/11\/capa-blog-svg.png","jetpack_shortlink":"https:\/\/wp.me\/p6EP66-hi","jetpack-related-posts":[{"id":1100,"url":"https:\/\/www.andrefelizardo.com.br\/blog\/tipos-de-frontend\/","url_meta":{"origin":1072,"position":0},"title":"Tipos de Frontend","author":"Andr\u00e9 Felizardo","date":"4 de mar\u00e7o de 2020","format":false,"excerpt":"A alguns anos atr\u00e1s escrevi um texto sobre o que \u00e9 o frontend, tamb\u00e9m palestrei sobre o que \u00e9 frontend, a carreira do frontend e os tipos de frontend que existem. Como minha vis\u00e3o sobre o assunto mudou bastante, resolvi revisitar esses materiais e escrever um parecer atualizado sobre os\u2026","rel":"","context":"Em &quot;Dev&quot;","block_context":{"text":"Dev","link":"https:\/\/www.andrefelizardo.com.br\/blog\/category\/dev\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/andre-felizardo_tipos-de-frontend-1-1.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/andre-felizardo_tipos-de-frontend-1-1.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/andre-felizardo_tipos-de-frontend-1-1.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/andre-felizardo_tipos-de-frontend-1-1.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/andre-felizardo_tipos-de-frontend-1-1.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/andre-felizardo_tipos-de-frontend-1-1.png?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":3010,"url":"https:\/\/www.andrefelizardo.com.br\/blog\/comparando-strings-em-javascript-e-porque-parece-errado\/","url_meta":{"origin":1072,"position":1},"title":"Comparando strings em Javascript e porque parece errado","author":"Andr\u00e9 Felizardo","date":"28 de abril de 2025","format":false,"excerpt":"Muitas vezes Javascript \u00e9 motivo de piadas\/memes de algu\u00e9m dizendo que o funcionamento do Javascript \u00e9 estranho quando compara algumas coisas. Mas em geral, isso \u00e9 s\u00f3 falta de conhecimento de como a linguagem funciona por baixo dos panos. E uma desses tipos de compara\u00e7\u00f5es que parecem erradas \u00e9 a\u2026","rel":"","context":"Em &quot;Tecnologia&quot;","block_context":{"text":"Tecnologia","link":"https:\/\/www.andrefelizardo.com.br\/blog\/category\/tecnologia\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2025\/04\/Comparando-strings-Javascript.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2025\/04\/Comparando-strings-Javascript.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2025\/04\/Comparando-strings-Javascript.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2025\/04\/Comparando-strings-Javascript.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2025\/04\/Comparando-strings-Javascript.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2025\/04\/Comparando-strings-Javascript.png?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":72,"url":"https:\/\/www.andrefelizardo.com.br\/blog\/acessibilidade-web-parte-i\/","url_meta":{"origin":1072,"position":2},"title":"Acessibilidade Web &#8211; Parte I","author":"Andr\u00e9 Felizardo","date":"9 de mar\u00e7o de 2015","format":false,"excerpt":"Acessibilidade Web quer dizer que todos os conte\u00fados ou servi\u00e7os devem estar acess\u00edveis, com f\u00e1cil acesso, da forma mais intuitiva e com o menor esfor\u00e7o, para o maior n\u00famero poss\u00edvel de usu\u00e1rios, independente de sistemas ou dispositivos utilizados, mas sem esquecer que tamb\u00e9m deve ser independente a suas culturas, experi\u00eancias\u2026","rel":"","context":"Em &quot;Tecnologia&quot;","block_context":{"text":"Tecnologia","link":"https:\/\/www.andrefelizardo.com.br\/blog\/category\/tecnologia\/"},"img":{"alt_text":"Acessibilidade Web","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/03\/acessibilidade_web.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/03\/acessibilidade_web.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/03\/acessibilidade_web.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":943,"url":"https:\/\/www.andrefelizardo.com.br\/blog\/javascript-comecando-do-jeito-certo\/","url_meta":{"origin":1072,"position":3},"title":"JavaScript &#8211; Come\u00e7ando do jeito certo","author":"Andr\u00e9 Felizardo","date":"30 de novembro de 2017","format":false,"excerpt":"O que \u00e9 JavaScript? JavaScript \u00e9 uma linguagem de programa\u00e7\u00e3o, que foi criada originalmente para rodar em navegadores. Na tr\u00edade do Front-end, a linguagem \u00e9 respons\u00e1vel por interagir com o usu\u00e1rio (como mensagens de erro e outros), sem a necessidade das informa\u00e7\u00f5es irem at\u00e9 o servidor. O que \u00e9 JavaScript?\u2026","rel":"","context":"Em &quot;Dev&quot;","block_context":{"text":"Dev","link":"https:\/\/www.andrefelizardo.com.br\/blog\/category\/dev\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/11\/javascript-comecando_jeito_certo.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/11\/javascript-comecando_jeito_certo.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/11\/javascript-comecando_jeito_certo.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/11\/javascript-comecando_jeito_certo.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":1152,"url":"https:\/\/www.andrefelizardo.com.br\/blog\/web-components-guia-geral\/","url_meta":{"origin":1072,"position":4},"title":"Web Components \u2013 Guia Geral","author":"Andr\u00e9 Felizardo","date":"20 de mar\u00e7o de 2020","format":false,"excerpt":"Neste guia veremos o que s\u00e3o web components, quando usar, sua estrutura e tamb\u00e9m um crash course criando um web component do zero que \u00e9 um card Pok\u00e9mon, com v\u00e1rios recursos interessantes. O que s\u00e3o web components Web Components s\u00e3o elementos customizados reutiliz\u00e1veis constru\u00eddos com diferentes tecnologias para serem utilizados\u2026","rel":"","context":"Em &quot;Dev&quot;","block_context":{"text":"Dev","link":"https:\/\/www.andrefelizardo.com.br\/blog\/category\/dev\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/capa-web-components-1.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/capa-web-components-1.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/capa-web-components-1.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/capa-web-components-1.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/capa-web-components-1.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/capa-web-components-1.png?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":683,"url":"https:\/\/www.andrefelizardo.com.br\/blog\/criando-pagina-com-rolagem-por-secao-html-css-jquery\/","url_meta":{"origin":1072,"position":5},"title":"Criando p\u00e1gina com rolagem por se\u00e7\u00e3o &#8211; HTML, CSS, jQuery","author":"Andr\u00e9 Felizardo","date":"2 de outubro de 2016","format":false,"excerpt":"Continuando a ajuda a meus brothers, depois de manipular os elementos com JavaScript, o meu mesmo amigo queria fazer um site com se\u00e7\u00f5es, onde toda vez que clicasse em algum bot\u00e3o, ele rolaria para a pr\u00f3xima se\u00e7\u00e3o. A ideia inicial dele era fazer com \u00e2ncoras, e sem JavaScript ou jQuery,\u2026","rel":"","context":"Em &quot;Curiosidades&quot;","block_context":{"text":"Curiosidades","link":"https:\/\/www.andrefelizardo.com.br\/blog\/category\/curiosidades\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/10\/html-css-jquery.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/posts\/1072","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/comments?post=1072"}],"version-history":[{"count":0,"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/posts\/1072\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/media\/1090"}],"wp:attachment":[{"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/media?parent=1072"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/categories?post=1072"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/tags?post=1072"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}