diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
commit | 074785cea106179cb3305637055ab0a009ca74f2 (patch) | |
tree | e6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/pt-pt/web/svg/tutorial | |
parent | da78a9e329e272dedb2400b79a3bdeebff387d47 (diff) | |
download | translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2 translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip |
initial commit
Diffstat (limited to 'files/pt-pt/web/svg/tutorial')
-rw-r--r-- | files/pt-pt/web/svg/tutorial/index.html | 32 | ||||
-rw-r--r-- | files/pt-pt/web/svg/tutorial/introducao/index.html | 52 | ||||
-rw-r--r-- | files/pt-pt/web/svg/tutorial/svg_na_introducao_html/index.html | 179 |
3 files changed, 263 insertions, 0 deletions
diff --git a/files/pt-pt/web/svg/tutorial/index.html b/files/pt-pt/web/svg/tutorial/index.html new file mode 100644 index 0000000000..9c162f0342 --- /dev/null +++ b/files/pt-pt/web/svg/tutorial/index.html @@ -0,0 +1,32 @@ +--- +title: SGV - Tutorial +slug: Web/SVG/Tutorial +translation_of: Web/SVG/Tutorial +--- +<p>Scalable Vector Graphics, <a href="/pt/SVG" title="pt/SVG">SVG</a>, é uma linguagem baseada em XML para construir gráficos. O SVG foi parcialmente implementado no Firefox, Opera, navegadores WebKit, Internet Explorer e outros navegadores.</p> + +<p>Este tutorial visa explicar como funciona um SVG internamente e tem detalhes técnicos. Se você apenas quer desenhar imagens bonitas, você pode encontrar recursos úteis na <a href="http://inkscape.org/doc/" class="external" title="http://inkscape.org/doc/">Página de documentação do Inkscape</a>. Outra boa introdução ao SVG está disponível em <a href="http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html" class="external" title="http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html">SVG Primer</a>, pela W3C.</p> + +<div class="note">O tutorial está no início de seu desenvolvimento. Se você puder, por favor ajude lapidando e escrevendo um parágrafo ou dois. Pontos extras por escrever a página inteira.</div> + +<h2 id="Introdução_ao_SVG">Introdução ao SVG</h2> + +<ul> + <li><a href="/Introducao" title="Introducao">Introdução</a></li> + <li>Iniciando</li> + <li>Posições</li> + <li>Formas Básicas</li> + <li>Caminhos</li> + <li>Preenchimentos e Linhas</li> + <li>Gradientes</li> + <li>Padrões</li> + <li>Textos</li> + <li>Transformações Básicas</li> + <li>Cortes e Máscaras</li> + <li>Outros Conteúdos em SVG</li> + <li>Efeitos de Filtro</li> + <li>Fontes em SVG</li> + <li>(muitas outras entradas aqui)</li> + <li>Ferramentas para SVG</li> + <li>Outros Tutoriais</li> +</ul> diff --git a/files/pt-pt/web/svg/tutorial/introducao/index.html b/files/pt-pt/web/svg/tutorial/introducao/index.html new file mode 100644 index 0000000000..287de67a14 --- /dev/null +++ b/files/pt-pt/web/svg/tutorial/introducao/index.html @@ -0,0 +1,52 @@ +--- +title: Introdução +slug: Web/SVG/Tutorial/Introducao +tags: + - Guía + - Precisa de Atualização + - Principiante + - SVG + - SVG - Tutorial + - Tutorial +translation_of: Web/SVG/Tutorial/Introduction +--- +<p>{{ PreviousNext("Web/SVG/Tutorial", "Web/SVG/Tutorial/Getting_Started") }}</p> + +<p><img alt="" class="internal" src="/@api/deki/files/348/=SVG_Overview.png" style="float: right;"><a href="/en-US/SVG" title="en-US/SVG">SVG</a> is an <a href="/en-US/XML" title="en-US/XML">XML</a> language, similar to <a href="/en-US/XHTML" title="en-US/XHTML">XHTML</a>, which can be used to draw vector graphics, such as the ones shown to the right. It can be used to create an image either by specifying all the lines and shapes necessary, by modifying already existing raster images, or by a combination of both. The image and its components can also be transformed, composited together, or filtered to change their appearance completely.</p> + +<p>SVG came about in 1999 after several competing formats had been submitted to the <a class="external" href="http://www.w3.org" title="en-US/W3C">W3C</a> and failed to be fully ratified. SVG is supported by all major <a href="https://caniuse.com/#search=svg">browsers</a>. A downside is loading SVG can be slow. SVG does offer benefits, some of which include having a <a href="/en-US/docs/Web/API">DOM interface</a> available for it, and not requiring third-party extensions. Whether or not to use it often depends on your specific use case.</p> + + + + + +<h3 id="Ingredientes_básicos">Ingredientes básicos</h3> + +<p><a href="/en-US/docs/Web/HTML">HTML</a> provides elements for defining headers, paragraphs, tables, and so on. In much the same way SVG provides elements for circles, rectangles, and simple and complex curves. A simple SVG document consists of nothing more than the {{ SVGElement('svg') }} root element and several basic shapes that build a graphic together. In addition there is the {{ SVGElement('g') }} element, which is used to group several basic shapes together.</p> + +<p>Starting from there, the SVG image can become arbitrarily complex. SVG supports gradients, rotations, filter effects, animations, interactivity with JavaScript, and so on. But all these extra features of the language rely on this relatively small set of elements to define the graphics area.</p> + +<h3 id="Before_you_start" name="Before_you_start">Antes de começar</h3> + +<p>There are a number of drawing applications available such as <a class="external" href="http://www.inkscape.org/">Inkscape</a> which are free and use SVG as their native file format. However, this tutorial will rely on the trusty XML or text editor (your choice). The idea is to teach the internals of SVG to those who want to understand it, and that is best done by dirtying your hands with a bit of markup. You should note your final goal though. Not all SVG viewers are equal and so there is a good chance that something written for one app will not display exactly the same in another, simply because they support different levels of the SVG specification or another specification that you are using along with SVG (that is, <a href="/en-US/JavaScript" title="en-US/JavaScript">JavaScript</a> or <a href="/en-US/CSS" title="en-US/CSS">CSS</a>).</p> + +<p>SVG is supported in all modern browsers and even a couple versions back in some cases. A fairly complete browser support table can be found on <a href="http://caniuse.com/svg">Can I use</a>. Firefox has supported some SVG content since version 1.5, and that support level has been growing with each release since. Hopefully, along with the tutorial here, MDN can help developers keep up with the differences between Gecko and some of the other major implementations.</p> + +<p>Before starting you should have a basic understanding of XML or another markup language such as <abbr title="HyperText Markup Language">HTML</abbr>. If you are not too familiar with XML, here are some guidelines to keep in mind:</p> + +<ul> + <li>SVG elements and attributes should all be entered in the case shown here since XML is case-sensitive (unlike HTML).</li> + <li>Attribute values in SVG must be placed inside quotes, even if they are numbers.</li> +</ul> + +<p>SVG is a huge specification. This tutorial attempts to cover the basics. Once you are familiar you should be able to use the <a href="/en-US/SVG/Element" title="en-US/SVG/Element">Element Reference</a> and the <a href="/en-US/docs/DOM/DOM_Reference#SVG_interfaces" title="en-US/SVG/Interface">Interface Reference</a> to find out anything else you need to know.</p> + +<h3 id="Flavors_of_SVG">Flavors of SVG</h3> + +<p>Since becoming a recommendation in 2003, the most recent "full" SVG version is 1.1. It builds on top of SVG 1.0, but adds more modularization to ease implementation. <a href="http://www.w3.org/TR/SVG/">The second edition of SVG 1.1</a> became a Recommendation in 2011. "Full" SVG 1.2 was meant to be the next major release of SVG. It was dropped for the upcoming <a href="http://www.w3.org/TR/SVG2/">SVG 2.0</a>, which is under heavy development right now and follows a similar approach to CSS 3 in that it splits components into several loosely coupled specifications.</p> + +<p>Apart from the full SVG recommendations, the working group at the W3C introduced SVG Tiny and SVG Basic in 2003. These two profiles are aimed mainly at mobile devices. The first, SVG Tiny, should yield graphics primitives for small devices with low capabilities. SVG Basic offers many features of full SVG, but doesn't include the ones which are hard to implement or heavy to render (like animations). In 2008, SVG Tiny 1.2 became a W3C Recommendation.</p> + +<p>There were plans for an SVG Print specification, which would add support for multiple pages and enhanced color management. This work was discontinued.</p> + +<p>{{ PreviousNext("Web/SVG/Tutorial", "Web/SVG/Tutorial/Getting_Started") }}</p> diff --git a/files/pt-pt/web/svg/tutorial/svg_na_introducao_html/index.html b/files/pt-pt/web/svg/tutorial/svg_na_introducao_html/index.html new file mode 100644 index 0000000000..5ca7a4c9e7 --- /dev/null +++ b/files/pt-pt/web/svg/tutorial/svg_na_introducao_html/index.html @@ -0,0 +1,179 @@ +--- +title: Introdução à SVG em HTML +slug: Web/SVG/Tutorial/SVG_na_Introducao_HTML +tags: + - Intermediário + - Precisa de Atualização + - SVG +translation_of: Web/SVG/Tutorial/SVG_In_HTML_Introduction +--- +<h2 id="Overview" name="Overview">Resumo</h2> + +<p>This article and its associated example shows how to use inline <a href="/pt-PT/docs/Web/SVG" title="SVG">SVG</a> to provide a background picture for a form. It shows how <a href="/pt-PT/docs/Web/JavaScript" title="JavaScript">JavaScript</a> and <a href="/pt-PT/docs/Web/CSS" title="CSS">CSS</a> can be used to manipulate the picture in the same way you would script regular XHTML. Note that the example will only work in browsers that support XHTML (not HTML) and SVG integration.</p> + +<h2 id="Source" name="Source">Fonte</h2> + +<p>Aqui tem a fonte para <a class="external" href="/presentations/xtech2005/svg-canvas/SVGDemo.xml" title="presentations/xtech2005/svg-canvas/SVGDemo.xml">o exemplo</a>:</p> + +<pre class="brush: html"><html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>XTech SVG Demo</title> +<style> + stop.begin { stop-color:yellow; } + stop.end { stop-color:green; } + body.invalid stop.end { stop-color:red; } + #err { display:none; } + body.invalid #err { display:inline; } +</style> +<script> + function signalError() { + document.getElementById('body').setAttribute("class", "invalid"); + } +</script> +</head> +<body id="body" + style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;"> +<form> + <fieldset> + <legend>HTML Form</legend> + <p><label>Enter something:</label> + <input type="text"/> + <span id="err">Incorrect value!</span></p> + <p><input type="button" value="Activate!" onclick="signalError();" /></p> + </fieldset> +</form> + +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" + viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" + style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;"> + <linearGradient id="gradient"> + <stop class="begin" offset="0%"/> + <stop class="end" offset="100%"/> + </linearGradient> + <rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" /> + <circle cx="50" cy="50" r="30" style="fill:url(#gradient)" /> +</svg> +</body> +</html> +</pre> + +<h2 id="Discussion" name="Discussion">Discussão</h2> + +<p>The page is mainly regular XHTML, CSS and JavaScript. The only interesting part is the <svg> element it contains. This element and its children are declared to be in the SVG namespace. The element contains a gradient and two shapes filled with the gradient. The gradient color stops have their colors set by CSS. When the user enters something incorrect into the form, the script sets the <code>invalid</code> attribute on the <body>, and a style rule changes the gradient <code>end-stop</code> color to red. (Another style rule makes an error message appear.)</p> + +<p>This approach has the following points in its favor:</p> + +<ul> + <li>We have taken a regular XHTML form that could have been part of an existing Web site, and added an attractive, interactive background</li> + <li>The approach is backwards compatible to browsers that do not support SVG; simply, no background appears in them</li> + <li>It's very simple and performs very well</li> + <li>The picture dynamically sizes itself to the required size in an intelligent way</li> + <li>We can have declarative style rules applying to both HTML and SVG</li> + <li>The same script manipulates both HTML and SVG</li> + <li>The document is entirely standards-based</li> +</ul> + +<div class="note"> +<p>To add a linked image with DOM methods to an embedded SVG element, one has to use <code>setAttributeNS</code> to set <code>href</code>. Like in the following example:</p> + +<pre class="brush: js"> var img = document.createElementNS("http://www.w3.org/2000/svg", "image"); +img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "move.png"); + + +</pre> +</div> + +<h2 id="Details" name="Details">Detalhes</h2> + +<p>The <code>viewBox</code> attribute establishes a logical coordinate system which the SVG picture's coordinates are relative to. In this case our picture is laid out in a 100 by 100 viewport.</p> + +<p>The <code>preserveAspectRatio</code> attribute specifies that the aspect ratio must be preserved by centering the picture in the available size, sizing to the maximum of the height or width and then cutting off any overflow.</p> + +<p>The <code>style</code> attribute pins the SVG element to the background of the form.</p> + +<h2 id="Related_Links" name="Related_Links">Hiperligações Relacionadas</h2> + +<ul> + <li>Another SVG in XHTML example: <a href="/en-US/docs/SVG/Namespaces_Crash_Course/Example" title="SVG/Namespaces_Crash_Course/Example">A swarm of motes</a></li> + <li><a class="external" href="/pt-PT/docs/Web/SVG/Namespaces_Crash_Course/Exemplo">Working example</a> that works in both Mozilla and in Internet Explorer with Adobe's SVG Viewer installed. (For inline SVG to work in both Firefox and Internet Explorer it is necessary to serve documents with a different Content-Type to each browser. For this reason, if you're behind a proxy server that caches the page, the example wont work in the second browser you load it in because it will receive the wrong Content-Type.)</li> +</ul> + + +<div id="SL_balloon_obj" style="display: block;"> +<div class="SL_ImTranslatorLogo" id="SL_button" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%; opacity: 0; display: none; left: -8px; top: -25px; transition: visibility 2s ease 0s, opacity 2s linear 0s;"> </div> + +<div id="SL_shadow_translation_result2" style="display: none;"> </div> + +<div id="SL_shadow_translator" style="display: none;"> +<div id="SL_planshet"> +<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> + +<div id="SL_Bproviders"> +<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div> + +<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div> + +<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div> +</div> + +<div id="SL_alert_bbl" style="display: none;"> +<div id="SLHKclose" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> + +<div id="SL_alert_cont"> </div> +</div> + +<div id="SL_TB"> +<table id="SL_tables"> + <tbody><tr> + <td class="SL_td"><input></td> + <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> + <td class="SL_td"> + <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Alternar Idiomas"> </div> + </td> + <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> + <td class="SL_td"> + <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ouça"> </div> + </td> + <td class="SL_td"> + <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Copiar"> </div> + </td> + <td class="SL_td"> + <div id="SL_bbl_font_patch"> </div> + + <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Tamanho da fonte"> </div> + </td> + <td class="SL_td"> + <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ajuda"> </div> + </td> + <td class="SL_td"> + <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Fixar a janela de pop-up"> </div> + </td> + </tr> +</tbody></table> +</div> +</div> + +<div id="SL_shadow_translation_result" style=""> </div> + +<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> + +<div id="SL_player2"> </div> + +<div id="SL_alert100">A função de fala é limitada a 200 caracteres</div> + +<div id="SL_Balloon_options" style="background: rgb(255, 255, 255) repeat scroll 0% 0%;"> +<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> + +<table id="SL_tbl_opt" style="width: 100%;"> + <tbody><tr> + <td><input></td> + <td> + <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"> </div> + </td> + <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td> + <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td> + </tr> +</tbody></table> +</div> +</div> +</div> |