Meta tags:
description=A tag svg é um contêiner para gráficos vetoriais escaláveis. Aprenda viewBox, formas básicas, acessibilidade e SVG vs Canvas.;

Headings (most frequently used words):

svg, tag, html, de, atributos, exemplo, da, sintaxe, viewbox, sistema, coordenadas, formas, acessibilidade, diferenças, entre, canvas, prática, desenhando, uma, elipse, valores, preserveaspectratio, removidos,

Text of the page (most frequently used words):
svg (110), html (62), para (21), viewbox (21), width (21), como (18), canvas (17), height (17), 100 (16), aprender (15), #coordenadas (15), atributos (14), uma (13), formas (12), tag (11), que (11), fill (11), title (10), gráficos (9), com (9), sistema (8), atributo (8), define (8), pixels (8), não (8), elemento (8), forma (8), você (8), stroke (8), css (7), são (7), mais (7), veja (7), desenho (7), circle (7), 1c87c9 (7), círculo (7), tags (7), w3docs (6), caixa (6), tamanho (6), min (6), por (6), contêiner (5), length (5), página (5), copiar (5), elementos (5), body (5), 200 (5), head (5), introdução (5), html5 (5), formatter (5), color (5), todos (4), code (4), generator (4), prática (4), javascript (4), entre (4), dentro (4), todas (4), percentage (4), cada (4), qualquer (4), desenhar (4), aria (4), lightgray (4), 120 (4), básicas (4), 300 (4), the (4), style (4), sobre (3), json (3), encoder (3), editor (3), ferramentas (3), quizzes (3), exercícios (3), php (3), diferenças (3), acessibilidade (3), page (3), inline (3), interno (3), vetoriais (3), estão (3), mas (3), sem (3), escalar (3), até (3), proporção (3), centro (3), quando (3), ele (3), valor (3), preserveaspectratio (3), externo (3), xml (3), dom (3), tela (3), seu (3), pode (3), desc (3), img (3), texto (3), acessível (3), portanto (3), apenas (3), referência (3), path (3), polygon (3), linha (3), elipse (3), retângulo (3), exemplo (3), mesmo (3), área (3), visualização (3), doctype (3), div (3), templates (3), string (3), tools (3), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), idioma (2), beautifier (2), diff (2), password (2), python (2), java (2), git (2), livros (2), snippets (2), sintaxe (2), this (2), table (2), sup (2), xmlns (2), documento (2), png (2), jpeg (2), qualidade (2), ser (2), quais (2), afirmações (2), corretas (2), selecione (2), aplicam (2), navegadores (2), obsoletos (2), removidos (2), slice (2), padrão (2), meet (2), preencher (2), qual (2), alinhamento (2), opcionalmente (2), meetorslice (2), coordenada (2), aninhado (2), tem (2), efeito (2), sua (2), abaixo (2), largura (2), altura (2), descrição (2), está (2), desenhada (2), navegador (2), programa (2), esse (2), parte (2), desenhos (2), linguagem (2), enquanto (2), coisa (2), usando (2), das (2), tecnologias (2), assistivas (2), center (2), logodesc (2), logotitle (2), labelledby (2), role (2), diretamente (2), label (2), imagem (2), adicione (2), primeiro (2), ícones (2), cor (2), contorno (2), lista (2), points (2), dois (2), ellipse (2), rect (2), segundo (2), renderizado (2), coordinates (2), escala (2), permanece (2), necessário (2), experimente (2), document (2), desenhando (2), arquivo (2), incorporar (2), 198 (2), 180 (2), flex (2), aprenda (2), accept (2), dir (2), formulários (2), tutorial (2), imagens (2), url (2), http (2), iso (2), hash (2), 2026, direitos, reservados, feito, desenvolvedores, política, privacidade, contato, empresa, try, tutoriais, exemplos, gratuitos, web, desde, 2014, next, previous, yes, was, helpful, verificar, obrigatório, baseados, perdem, ampliados, redimensionados, eram, usados, necessários, revisão, atual, especificação, integrada, modernos, renderizam, esses, contentstyletype, contentscripttype, baseprofile, version, cubra, toda, cortando, excesso, todo, caiba, xmaxymax, xmidymax, xminymax, xmaxymid, xmidymid, xminymid, xmaxymin, xmidymin, xminymin, esticar, ignorando, none, borda, ancorar, corresponde, decide, ajustá, recebe, seguido, valores, controla, escalado, alinhado, difere, alignment, posição, viewport, baseado, significa, disponível, lembrada, objeto, esquece, imediatamente, após, ela, ter, sido, renderizada, precisar, fazer, alterações, deverá, redesenhá, zero, pintura, chegam, alterar, sobrescrevendo, outros, pinturas, orientadas, instrução, alterada, orientados, descrever, usado, dinamicamente, primeira, vista, fazem, mesma, artes, pontos, entanto, existem, eles, vamos, analisá, las, puramente, decorativo, agrega, informação, oculte, hidden, true, blue, with, light, gray, logo, referencie, use, coloque, tratem, única, longa, filho, atua, nome, exibido, tooltip, significado, logotipos, faça, seguinte, faz, leitores, podem, fornecer, decorativa, rótulo, anunciada, inútil, maioria, compartilha, apresentação, interior, espessura, completa, consulte, poderosa, codifica, linhas, curvas, arcos, quase, fechada, definida, polígono, reta, line, raios, definido, pelo, raio, posicionado, dimensionado, arredonda, cantos, cria, partir, pequeno, conjunto, inseridos, utiliza, seus, próprios, dimensionamento, separa, redimensioná, inclusive, via, escalam, proporcionalmente, isso, essencial, ilustrações, responsivos, stretched, box, same, but, grid, are, fixed, drawing, desenha, svgs, usa, vinculado, adiciona, modo, muito, maior, código, idêntico, então, mapeia, essa, interna, redimensionando, conforme, assim, desenhado, sempre, fica, independentemente, for, unidades, usuário, canto, superior, esquerdo, definem, vez, quatro, números, conceito, importante, suas, desenhadas, torna, verdadeiramente, escalável, 400, exigido, documentos, independentes, internos, nem, perigo, rule, evenodd, 190, 160, display, flow, row, wrap, vem, pares, deseja, escritas, abertura, fechamento, esta, aborda, importantíssimo, tornar, compara, scalable, vector, graphics, bidimensionais, baseada, contrário, formatos, raster, descrita, grade, fixa, nítida, perder, também, suporta, interatividade, animação, acesso, completo, meio, usada, escaláveis, charset, checked, autoplay, action, accesskey, colspan, defer, autofocus, autocomplete, draggable, download, disabled, coords, controls, contenteditable, content, async, alt, attribute, reference, forms, vídeos, youtube, multimídia, media, class, attributes, gradiente, radial, lineargradient, sombras, projetadas, efeitos, desfoque, aos, filtros, stroking, text, polyline, gradientes, xmp, wbr, video, var, track, time, thead, tfoot, textarea, template, tbody, summary, sub, strong, strike, span, spacer, source, small, select, section, script, samp, ruby, rtc, progress, pre, picture, plaintext, param, output, option, optgroup, object, noscript, noframes, nobr, nav, meter, meta, menuitem, menu, marquee, mark, map, main, link, legend, keygen, kbd, isindex, ins, input, iframe, hgroup, header, frameset, frame, form, footer, font, figure, figcaption, fieldset, embed, dialog, dfn, details, del, datalist, data, colgroup, col, cite, caption, button, blockquote, blink, big, bdo, bdi, basefont, base, audio, aside, article, area, applet, address, acronym, abbr, evento, globais, obsoletas, xhtml, tabela, tipos, mime, mensagens, status, métodos, atalhos, teclado, entidades, codificação, utf, códigos, 8859, ascii, conjuntos, caracteres, references, migração, suporte, áudio, vídeo, semânticos, layout, computercode, caminhos, estilos, scripts, blocos, tabelas, comentários, cores, listas, links, formatação, títulos, editores, basics, entrar, pesquisar, formatters, reverse, sha256, md5, calculator, colors, hsl, hex, mixer, converter, picker, general, cursos,

Text of the page (random words):
tag html svg aprenda html w3docs w3docs livros aprender html aprender css aprender javascript aprender git aprender java aprender php aprender python cursos quizzes exercícios snippets ferramentas general tools html editor password generator html encoder code diff json beautifier todos os 13 color tools color picker color converter color mixer color hex colors hsl todos os 10 string tools string length calculator md5 hash generator sha256 hash generator string reverse url encoder todos os 19 code formatters javascript formatter css formatter html formatter json formatter php formatter pesquisar na w3docs k pt english en deutsch de русский ru français fr español es português pt italiano it entrar aprender html html basics introdução ao html editores e ferramentas elementos html tags básicas do html atributos html títulos html formatação html links html listas html cores em html comentários html tabelas html blocos html scripts html estilos html css caminhos de arquivo html html computercode html templates templates de layout templates de formulários html 5 introdução ao html5 tags html5 elementos semânticos áudio vídeo suporte a navegadores html5 migração para html5 html references conjuntos de caracteres ascii iso 8859 1 códigos de idioma iso codificação utf 8 entidades html atalhos de teclado métodos http imagens html mensagens de status http tipos mime tabela de tags html xhtml html url html tags tags obsoletas atributos globais html atributos de evento tags html doctype a abbr acronym address applet area article aside audio b base basefont bdi bdo big blink blockquote body br button canvas caption center cite code col colgroup data datalist dd del details dfn dialog dir div dl dt em embed fieldset figcaption figure font footer form frame frameset h1 h6 head header hgroup hr html i iframe img input ins isindex kbd keygen label legend li link main map mark marquee menu menuitem meta meter nav nobr noframes noscript object ol optgroup option output p param plaintext picture pre progress q rb rp rt rtc ruby s samp script section select small source spacer span strike strong style sub summary sup svg table tbody td template textarea tfoot th thead time title tr track tt u ul var video wbr xmp canvas tutorial introdução ao canvas desenhando no canvas coordenadas do canvas gradientes no canvas texto no canvas imagens no canvas referência do canvas svg tutorial introdução ao svg svg no html5 retângulo svg círculo svg svg elipse linha svg svg polygon svg polyline svg path svg text svg stroking introdução aos filtros svg efeitos de desfoque svg sombras projetadas svg svg lineargradient gradiente radial svg referência svg html attributes atributos obsoletos atributo class do html atributo id do html html media html multimídia vídeos do youtube em html html forms formulários html html attribute reference alt async accept content contenteditable controls coords disabled download draggable autocomplete autofocus defer dir colspan accesskey action autoplay checked accept charset tag html svg a tag svg é um contêiner para gráficos vetoriais escaláveis aprenda viewbox formas básicas acessibilidade e svg vs canvas a tag svg é usada como contêiner para gráficos svg svg scalable vector graphics é uma linguagem para gráficos bidimensionais baseada em xml ao contrário de formatos raster como png ou jpeg uma imagem svg é descrita por formas e coordenadas e não por uma grade fixa de pixels portanto permanece nítida em qualquer tamanho e escala sem perder qualidade o svg também suporta interatividade animação e acesso completo a cada elemento por meio do dom esta página aborda como incorporar svg diretamente em html o importantíssimo sistema de coordenadas viewbox as formas de desenho básicas como tornar o svg acessível os atributos do elemento svg e como o svg se compara ao canvas sintaxe de svg a tag svg vem em pares as formas que você deseja desenhar são escritas entre as tags de abertura svg e fechamento svg exemplo da tag html svg tag html svg doctype html html head title title of the document title head body div style display flex flex flow row wrap svg width 180 height 180 rect x 20 y 20 rx 20 ry 20 width 100 height 100 style fill lightgray stroke 1c87c9 stroke width 4 svg svg width 200 height 200 circle cx 100 cy 70 r 60 stroke 1c87c9 stroke width 4 fill lightgray svg svg width 200 height 200 polygon points 100 10 40 198 190 78 10 78 160 198 style fill lightgray stroke 1c87c9 stroke width 4 fill rule evenodd svg div body html copiar experimente você mesmo perigo o atributo xmlns é exigido apenas no elemento svg externo de documentos svg independentes um arquivo svg não é necessário para elementos svg internos nem ao incorporar svg inline em um documento html exemplo da tag html svg desenhando uma elipse doctype html html head title title of the document title head body svg width 400 height 200 ellipse cx 100 cy 50 rx 100 ry 50 fill 1c87c9 svg body html copiar experimente você mesmo o viewbox e o sistema de coordenadas svg o viewbox é o conceito mais importante do svg ele define o sistema de coordenadas no qual todas as suas formas são desenhadas e é o que torna um svg verdadeiramente escalável os atributos width e height definem o tamanho da caixa svg na página em pixels css o atributo viewbox por sua vez define o sistema de coordenadas interno usando quatro números viewbox min x min y width height copiar min x min y as coordenadas do canto superior esquerdo da área de visualização width height a largura e a altura da área de visualização em unidades de usuário o navegador então mapeia essa área de visualização interna para a width height na tela redimensionando conforme necessário assim um círculo desenhado em cx 50 cy 50 com viewbox 0 0 100 100 sempre fica no centro independentemente do tamanho em que o svg for renderizado o exemplo abaixo desenha o mesmo círculo em dois svgs o primeiro usa apenas width height portanto as coordenadas são coordenadas de pixels e o círculo está vinculado a esse tamanho o segundo adiciona um viewbox de modo que o desenho escala para preencher uma caixa muito maior enquanto o código permanece idêntico no viewbox coordinates are pixels fixed 100 100 drawing svg width 100 height 100 circle cx 50 cy 50 r 40 fill 1c87c9 svg viewbox same coordinates but the 0 0 100 100 grid is stretched to fill a 300 300 box on the page svg width 300 height 300 viewbox 0 0 100 100 circle cx 50 cy 50 r 40 fill 1c87c9 svg copiar como o segundo svg separa o sistema de coordenadas viewbox do tamanho renderizado width height você pode redimensioná lo inclusive via css e todas as formas escalam proporcionalmente por isso o viewbox é essencial para ícones e ilustrações responsivos formas svg você cria desenhos svg a partir de um pequeno conjunto de elementos de formas básicas inseridos dentro de svg cada um utiliza seus próprios atributos de coordenadas e dimensionamento rect um retângulo posicionado com x y e dimensionado com width height rx ry arredonda os cantos veja retângulo svg circle um círculo definido pelo seu centro cx cy e raio r veja círculo svg ellipse como um círculo mas com dois raios rx e ry veja elipse svg line uma linha reta de x1 y1 até x2 y2 veja linha svg polygon uma forma fechada definida por uma lista de points veja polígono svg path a forma mais poderosa seu atributo d codifica linhas curvas e arcos para desenhar quase qualquer coisa veja path svg a maioria das formas compartilha os atributos de apresentação fill cor interior stroke cor do contorno e stroke width espessura do contorno para a lista completa de elementos e atributos consulte a referência svg acessibilidade o svg inline faz parte do dom da página portanto leitores de tela podem lê lo mas apenas se você fornecer texto acessível uma forma decorativa sem rótulo é anunciada de forma inútil para svg com significado ícones gráficos logotipos faça o seguinte adicione um elemento title como primeiro filho ele atua como o nome acessível e é exibido como tooltip opcionalmente adicione um elemento desc para uma descrição mais longa coloque role img no svg para que tecnologias assistivas o tratem como uma única imagem referencie o texto com aria labelledby ou use aria label diretamente svg width 120 height 120 viewbox 0 0 120 120 role img aria labelledby logotitle logodesc title id logotitle w3docs logo title desc id logodesc a blue circle with a light gray center desc circle cx 60 cy 60 r 50 fill 1c87c9 circle cx 60 cy 60 r 25 fill lightgray svg copiar se um svg é puramente decorativo e não agrega informação oculte o das tecnologias assistivas com aria hidden true diferenças entre svg e canvas à primeira vista svg e canvas fazem a mesma coisa desenhar artes vetoriais usando pontos de coordenadas no entanto existem diferenças entre eles vamos analisá las svg é uma linguagem para descrever gráficos 2d em xml enquanto canvas é usado para desenhar gráficos 2d dinamicamente com javascript svg é como um programa de desenho o desenho é uma instrução de desenho para cada forma e qualquer parte de qualquer forma pode ser alterada os desenhos são orientados a formas canvas é como um programa de pintura quando os pixels chegam à tela esse é o seu desenho você só pode alterar as formas sobrescrevendo as com outros pixels as pinturas são orientadas a pixels svg é baseado em xml o que significa que cada elemento está disponível dentro do dom do svg no svg a forma desenhada é lembrada como um objeto no canvas o navegador esquece a forma desenhada imediatamente após ela ter sido renderizada se você precisar fazer alterações no desenho deverá redesenhá lo do zero atributos atributo valor descrição height length percentage define a altura do elemento svg na página width length percentage define a largura do elemento svg na página viewbox min x min y width height define a posição e o tamanho do sistema de coordenadas interno o viewport svg preserveaspectratio alignment meetorslice veja abaixo controla como o viewbox é escalado e alinhado quando sua proporção difere da caixa svg x length percentage define a coordenada x de um contêiner svg aninhado não tem efeito no svg mais externo y length percentage define a coordenada y de um contêiner svg aninhado não tem efeito no svg mais externo valores de preserveaspectratio quando a proporção do viewbox não corresponde à caixa svg preserveaspectratio decide como ajustá lo ele recebe um valor de alinhamento opcionalmente seguido de um valor meetorslice alinhamento qual borda centro ancorar none esticar para preencher ignorando a proporção xminymin xmidymin xmaxymin xminymid xmidymid padrão xmaxymid xminymax xmidymax xmaxymax meet ou slice como escalar meet padrão escalar até que todo o viewbox caiba dentro da caixa slice escalar até que o viewbox cubra toda a caixa cortando o excesso atributos removidos os atributos version baseprofile contentscripttype e contentstyletype eram usados no svg 1 1 mas estão obsoletos removidos no svg 2 e não são mais necessários o svg 2 é a revisão atual da especificação svg mais integrada ao html e css navegadores modernos renderizam svg sem esses atributos prática prática quais afirmações sobre a tag svg estão corretas selecione todas que se aplicam quais afirmações sobre a tag svg estão corretas selecione todas que se aplicam a tag svg é um contêiner para gráficos vetoriais em html os gráficos svg não perdem qualidade ao ser ampliados ou redimensionados os gráficos svg são baseados em pixels como png ou jpeg o atributo viewbox define o sistema de coordenadas interno do svg o atributo xmlns é obrigatório para svg inline dentro de um documento html verificar was this page helpful yes no previous sup next table on this page sintaxe de svg o viewbox e o sistema de coordenadas svg formas svg acessibilidade diferenças entre svg e canvas atributos prática w3docs tutoriais exemplos exercícios snippets e quizzes gratuitos para a web desde 2014 livros aprender html aprender css aprender javascript aprender git aprender java aprender php aprender python prática exercícios quizzes editor try it ferramentas html editor password generator html encoder code diff json beautifier empresa sobre contato política de privacidade idioma english deutsch русский français español português italiano 2026 w3docs todos os direitos reservados feito para desenvolvedores