Começando com SVG no Front-End - Parte 2 - Trabalhando com Inkscape \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 23 Horas 01 Min 30 Seg Tempo restante da oferta: 23 01 30 [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 2 - Trabalhando com Inkscape [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) # Começando 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. [ Akira Hanashiro ](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) 7 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/11/12071245/intro-inkscape.png) Olá Web Developers! Vamos ver como começar a trabalhar com o [Inkscape](https://inkscape.org/ "Inkscape") para criar imagens para nossos projetos para a web. Esse é o segundo post de três sobre [como começar a usar SVG](https://www.treinaweb.com.br/blog/comecando-com-svg-no-front-end-parte-1/ "como começar a usar SVG"). ## O que é Inkscape e por que usá-lo? O `Inkscape` é um software `open-source` usado para a criação de [imagens vetoriais](https://www.treinaweb.com.br/blog/o-que-sao-imagens-vetoriais/ "imagens vetoriais"), assim como Adobe Illustrator e Corel Draw. Ele é gratuito, leve e usa o `SVG` como formato nativo de seus arquivos. Isso significa que ao salvar um trabalho feito no Inkscape, já podemos usar em nossos projetos web, sem medo nenhum de incompatibilidade. Este programa pode não ter uma interface muito bonita, mas ele tem um grande poder. Com o tempo você se acostuma. ![](https://dkrn4sk0rn31v.cloudfront.net/) ## Iniciando com Inkscape ### Formas ![](https://dkrn4sk0rn31v.cloudfront.net/) A maioria das ferramentas que você irá utilizar estão no canto esquerdo do programa. A primeira coisa a se aprender é desenhar formas. Para acelerar seu trabalho, tente decorar os atalhos: - Retângulo - R - Elipse - E - Estrela - \* Se você desenhar segurando a tecla `Ctrl`, a forma será feita mantendo proporções em suas dimensões. Isso permitirá que você utilize a ferramenta de retângulo para desenhar um quadrado ou a ferramenta de elipse para desenhar um círculo. Se segurar `Shift` a forma será desenhada a partir de seu centro. Para selecionar algum elemento, utilize a ferramenta de seleção, que pode ser acessada usando a tecla `S`. Com esta ferramenta você pode redimensionar a forma, e se clicar nela os controles serão alterados para que você possa rotacioná-la. ### Cores Ao ter algum elemento selecionado, podemos escolher a cor do contorno e do preenchimento. Utilize o atalho `Ctrl + Shift + F` e você terá a ferramenta mostrada na imagem abaixo: ![](https://dkrn4sk0rn31v.cloudfront.net/) Em `Fill` podemos escolher a cor de preenchimento do elemento, em `Stroke paint` a cor do contorno e em `Stroke style` a grossura e estilo da linha do contorno. Caso queira criar um efeito de gradiente, utilize o atalho `G`. Com isso você poderá indicar a posição e direção do gradiente, e junto à ferramenta anterior poderá escolher as cores de cada parte do gradiente. Caso queira copiar a cor de um elemento (famoso “conta-gotas”), utilize o atalho `D`. ## Desenhando ### Linhas Nem sempre vamos utilizar apenas formas prontas. Para desenhar suas próprias formas, a ferramenta mais utilizada é a de criação de curvas de Bezier. Para acessá-la você pode usar o atalho `B`. Conforme você clica e arrasta irá criar curvas. Depois você pode editar essas curvas utilizando a ferramenta de edição de nós, que pode ser acessada pelo atalho `N`. ![](https://dkrn4sk0rn31v.cloudfront.net/) ### Nós e Segmentos Um nó é cada ponto de uma forma, e um segmento é a linha entre dois nós, como você pode ver na imagem acima no desenho do matinho. Para selecionar um ou mais nós utilizamos a ferramenta de edição de nós `N`. Ainda temos algumas opções que podemos alterar nestes elementos, que se encontram marcados na imagem abaixo. Mas vamos aprender a usar os atalhos. Vou seguir aqui a mesma ordem presente na imagem abaixo. ![](https://dkrn4sk0rn31v.cloudfront.net/) 1. `Duplo clique` - ao clicar duas vezes em um segmento você criará um novo nó 2. `Delete` - apaga o nó selecionado, mantendo os outros nós ligados 3. `Shift + J` - junta dois nós 4. `Shift + B` - quebra o segmento selecionado, separando-o da forma inicial 5. `Alt + J` - junta dois nós criando um novo segmento 6. `Alt + Backspace` - apaga o segmento entre dois nós 7. `Shift + C` - deixa o nó selecionado criar cantos 8. `Shift + S` - deixa o nó selecionado criar formas mais suaves 9. `Shift + Y` - deixa o nó selecionado criar segmentos simétricos 10. `Shift + A` - deixa o nó selecionado criar formas mais suaves automaticamente ## Finalização da Imagem Um atalho muito importante é quando finalizamos uma imagem e queremos definir qual a área da imagem será visível ou exportada. Selecione os elementos e utilize o atalho `Ctrl + Shift + R`. Para exportar a imagem para outros formatos de imagem, utilize o atalho `Ctrl + Shift + E`. Caso queira utilizar em SVG mesmo, basta salvar com `Ctrl + S`. Outras coisas básicas a se saber também é o Zoom, que basta segurar a tecla `Ctrl` e rolar a rodinha do mouse. Para mover o que você enxerga basta clicar com a rodinha do mouse e arrastar. Para espelhar a forma na vertical pressione `V` e na horizontal pressione `H`. Esta foi apenas uma introdução bem breve. Ainda há muito mais no Inkscape. No próximo post veremos como animar nossos SVG’s. - [ #Inkscape ](https://www.treinaweb.com.br/blog/tag/inkscape) - [ #Introdução ao Inkscape ](https://www.treinaweb.com.br/blog/tag/introducao-ao-inkscape) - [ #Imagens Vetoriais ](https://www.treinaweb.com.br/blog/tag/imagens-vetoriais) - [ #Edição de SVG ](https://www.treinaweb.com.br/blog/tag/edicao-de-svg) - [ #Tutorial Inkscape ](https://www.treinaweb.com.br/blog/tag/tutorial-inkscape) 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/12071147/intro-svg-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 1 ](https://www.treinaweb.com.br/blog/comecando-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. Ler artigo - ![](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/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 **23h 01min 30s** - 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