Começando com SVG no Front-End - Parte 1 \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 21 Horas 07 Min 25 Seg Tempo restante da oferta: 21 07 25 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Começando com SVG no Front-End - Parte 1 [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) # Começando com SVG no Front-End - Parte 1 Aprenda a começar a trabalhar com SVG para a criação de formas e efeitos no Front-End. [ Akira Hanashiro ](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) 7 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/11/12071147/intro-svg.png) Olá Web Developers! Vamos ver a importância do SVG para o desenvolvimento web e como começar a usá-lo. Esse é o primeiro post de três sobre como usar SVG. ## O que é SVG? O nome SVG vem de Scalable Vector Graphics (Gráficos Vetoriais Escaláveis). Ele é basicamente um formato de imagem vetorial suportado pelos navegadores e que pode ser animado/modificado por CSS e JavaScript. Para saber mais sobre imagens vetoriais e a diferença em relação às imagens comuns, dê uma olhadinha no nosso post sobre [O que são imagens vetoriais?](https://www.treinaweb.com.br/blog/o-que-sao-imagens-vetoriais/ "O que são imagens vetoriais?"). ## Quais as vantagens do SVG? O SVG possui várias vantagens, como: - podem ser animados por CSS e modificados por JavaScript - por serem imagens vetoriais, você pode alterar o tamanho livremente sem perda de qualidade da imagem - podem ser embutidos no HTML, diminuindo a quantidade de requisições - você não precisa de um super editor de imagens para trabalhar com SVG. Algumas coisas simples você pode editar com o seu próprio editor de código ou usar até mesmo um programa gratuito online - possui várias funcionalidades que ainda são impossíveis ou muito complexas de se fazer com HTML e CSS, nos permitindo criar formas e efeitos mais complexos para nossas páginas web - como pode ser integrado com CSS, podemos usar `Media Queries` para criar imagens responsivas ## Começando com SVG Não precisamos de editor de imagem para começar com SVG. Você pode usar o mesmo programa que usa para escrever seu HTML. Podemos criar uma imagem SVG em um arquivo `.svg` e depois chamar em nosso HTML usando a tag ``, mas também pode-se, dentro do seu próprio HTML, criar uma tag `` e começar a escrever o código dentro dele. Vamos começar a declarar um retângulo. Para isso usamos o elemento ``. ```html ``` Teremos o seguinte resultado: Vamos entender o que fizemos: - `` declara que queremos criar um retângulo - `width` e `height` servem para declararmos a largura e altura do elemento - `fill` serve para declararmos a cor do preenchimento do elemento - `x` e `y` servem para indicarmos a posição do elemento - `stroke` nos permite declarar a cor da linha de contorno do elemento - `stroke-width` declara a grossura da linha de contorno do elemento Outro elemento muito comum é o ``, que serve para criar um círculo. ```html ``` Vamos entender o que fizemos: - `` declara que queremos criar um círculo - `r` indica o raio do círculo, então é por aqui que indicamos o tamanho - ao invés de posicionarmos o círculo com `x` e `y`, são usadas as propriedades `cx` e `cy` Há outros elementos também como line, polyline, polygon, path e text. ## SVG com CSS e JavaScript Como dito anteriormente, o SVG pode facilmente ser integrado com CSS e JavaScript, permitindo que a gente o controle como quisermos. Como exemplo, vamos criar um outro círculo, mas ao invés de escrever as propriedades diretamente na tag ``, vamos adicionar uma classe CSS e escrever essas propriedades no CSS. ```html ``` ```css .meu-circulo{ r: 30; cx: 50; cy: 40; fill: lightgreen; stroke: orange; stroke-width: 5; } ``` Lembre-se que podemos fazer animações com CSS. Vamos criar uma transição simples para quando passarmos a seta do mouse por cima do círculo, mudando sua posição e cores: ```css .meu-circulo{ r: 30; cx: 50; cy: 40; fill: lightgreen; stroke: orange; stroke-width: 5; transition: all 1s ease; } .meu-circulo:hover{ cx: 70; fill: green; stroke-width: 10; } ``` Também podemos integrar com JavaScript. Vamos pegar esse `` e criar uma função que aumente o `r` dele ao clicarmos: ```js const circle = document.querySelector('.meu-circulo'); let r = 30; circle.addEventListener('click', () => { r += 10; circle.style.r = r; }) ``` Teremos o seguinte resultado: É importante saber que só podemos integrar o SVG com CSS e JavaScript se ele estiver no corpo do HTML, como fizemos. Se você chamar uma imagem SVG com a tag `` não dará certo. No próximo post veremos como começar a trabalhar com o [Inkscape](https://inkscape.org/ "Inkscape"), um software gratuito para a criação de imagens vetoriais que utiliza o SVG como formato de arquivo. - [ #HTML5 ](https://www.treinaweb.com.br/blog/tag/html5) - [ #Edição de SVG ](https://www.treinaweb.com.br/blog/tag/edicao-de-svg) - [ #SVG ](https://www.treinaweb.com.br/blog/tag/svg) - [ #Introdução ao SVG ](https://www.treinaweb.com.br/blog/tag/introducao-ao-svg) Autor ![Akira Hanashiro](//secure.gravatar.com/avatar/d107ca73135bc62770a67ebbfe4cf80d?d=mm) ## Akira Hanashiro Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/11/12071214/front-end-motion-graphics-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 7 anos atrás ## [ Começando com SVG no Front-End - Parte 3 - Animações com mo.js (Motion Graphics) ](https://www.treinaweb.com.br/blog/comecando-com-svg-no-front-end-parte-3-animacoes-com-mo-js-motion-graphics) Aprenda a criar animações incríveis e interativas de forma bem simples para a web utilizando o mo.js Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/11/12071245/intro-inkscape-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 7 anos atrás ## [ Começando com SVG no Front-End - Parte 2 - Trabalhando com Inkscape ](https://www.treinaweb.com.br/blog/comecando-com-svg-no-front-end-parte-2-trabalhando-com-inkscape) Aprenda a criar formas e imagens vetoriais em SVG para usar em suas páginas web de maneira bem simples com este tutorial de introdução ao Inkscape. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/04/24110903/O-QUE-E-REACT-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 3 anos atrás ## [ Criando aplicações React com Vite e TypeScript ](https://www.treinaweb.com.br/blog/criando-aplicacoes-react-com-vite-e-typescript) Neste artigo veremos como criar aplicações React com Vite, que permite desenvolvermos aplicações modernas com recursos como HMR, entre outros. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/05/04133905/softwares-gratis-vs-softwares-pagos-400x280.png) [ Ferramentas ](https://www.treinaweb.com.br/blog/categoria/ferramentas) 7 anos atrás ## [ Softwares Pagos: Por que grandes empresas costumam utilizá-los? ](https://www.treinaweb.com.br/blog/softwares-pagos-por-que-grandes-empresas-costumam-utiliza-los) Entenda os motivos de grandes empresas normalmente utilizarem softwares pagos ao invés de soluções gratuitas existentes no mercado. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/12/13105826/clipboard-js-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 9 anos atrás ## [ clipboard.js - Copiar e Colar com JavaScript ](https://www.treinaweb.com.br/blog/clipboard-js-copiar-e-colar-com-javascript) Aprenda a copiar textos para a área de transferência de forma simples e descomplicada com o clipboard.js. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/grid-layout-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 10 anos atrás ## [ Começando com o novo CSS Grid Layout ](https://www.treinaweb.com.br/blog/comecando-com-o-novo-css-grid-layout) Aprenda um pouco mais sobre o CSS Grid Layout, agora com suporte completo pelo Firefox e Chrome. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/08/java-csharp-ou-php-qual-linguagem-escolher-400x280.jpg) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 9 anos atrás ## [ Java, C# ou PHP: qual linguagem escolher? ](https://www.treinaweb.com.br/blog/java-csharp-ou-php-qual-linguagem-escolher) Qual linguagem escolher? Java, C# ou PHP? Quais são as vantagens de cada uma? Vamos analisar estas dúvidas que são comuns para quem está começando. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/depura--o-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 10 anos atrás ## [ Depuração de código PHP ](https://www.treinaweb.com.br/blog/depuracao-de-codigo-php) Como fazer a depuração de código PHP? Essa é uma dúvida recorrente do pessoal que está vindo de outras linguagens ou que está começando a escrever projetos um pouco mais complexos. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/adquirir-confianca-TI-400x280.png) [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 3 anos atrás ## [ Como ganhar confiança em minhas habilidades e conhecimentos na área de TI? ](https://www.treinaweb.com.br/blog/como-ganhar-confianca-em-minhas-habilidades-e-conhecimentos-na-area-de-ti) Veremos nesse artigo algumas estratégias que você pode aplicar, se tornando mais confiante para alcançar os seus objetivos profissionais. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/09/DICAS-PORTIFOLIO-400x280.jpg) [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 4 anos atrás ## [ 3 dicas para o seu portfólio ](https://www.treinaweb.com.br/blog/3-dicas-para-o-seu-portfolio) Será que você está dando a devida atenção ao seu portfólio? Veremos neste artigo 3 dicas para você deixá-lo pronto para utilizar quando precisar. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/05/como-conseguir-sua-primeira-oportunidade-de-desenvolvedor-a-junior-400x280.png) [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 5 anos atrás ## [ Como conseguir sua primeira oportunidade de desenvolvedor(a) júnior ](https://www.treinaweb.com.br/blog/como-conseguir-sua-primeira-oportunidade-de-desenvolvedora-junior) Neste artigo, separamos algumas dicas para te ajudar a se destacar no mercado, nessa caminhada até a tão sonhada primeira vaga. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/07/23215528/capa-boas-praticas-400x280.png) [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento) 7 anos atrás ## [ Boas práticas de programação para iniciantes ](https://www.treinaweb.com.br/blog/boas-praticas-de-programacao-para-iniciantes) Veja neste artigo algumas boas práticas que você deve adotar enquanto escreve seu código. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **21h 07min 25s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58