diff options
Diffstat (limited to 'files/fa/web/svg')
| -rw-r--r-- | files/fa/web/svg/index.html | 94 | ||||
| -rw-r--r-- | files/fa/web/svg/tutorial/index.html | 38 | ||||
| -rw-r--r-- | files/fa/web/svg/tutorial/introduction/index.html | 45 |
3 files changed, 177 insertions, 0 deletions
diff --git a/files/fa/web/svg/index.html b/files/fa/web/svg/index.html new file mode 100644 index 0000000000..5230a881a5 --- /dev/null +++ b/files/fa/web/svg/index.html @@ -0,0 +1,94 @@ +--- +title: SVG +slug: Web/SVG +tags: + - 2D Graphics + - NeedsTranslation + - References + - SVG + - TopicStub +translation_of: Web/SVG +--- +<div class="callout-box"> + <strong><a href="/en-US/docs/SVG/Tutorial" title="SVG/Tutorial">Getting Started</a></strong><br> + This tutorial will help get you started using SVG.</div> +<p><strong>Scalable Vector Graphics (SVG)</strong> is an <a href="/en-US/docs/XML" title="XML">XML</a> markup language for describing two-dimensional vector graphics. SVG is essentially to graphics what XHTML is to text.</p> +<p>SVG is similar in scope to Adobe's proprietary Flash technology, but what distinguishes SVG from Flash is that it is a <a href="http://www.w3.org/Graphics/SVG/">W3C recommendation</a> (i.e., a standard) and that it is XML-based as opposed to a closed binary format. It is explicitly designed to work with other <a href="http://www.w3.org/">W3C</a> standards such as <a href="/en-US/docs/CSS" title="CSS">CSS</a>, <a href="/en-US/docs/DOM" title="DOM">DOM</a> and <a href="http://www.w3.org/AudioVideo/">SMIL</a>.</p> +<div class="cleared row topicpage-table"> + <div class="section"> + <h2 class="Documentation" id="Documentation">Documentation</h2> + <dl> + <dt> + <a href="/en-US/docs/Web/SVG/Element">SVG element reference</a></dt> + <dd> + Get details about each SVG element.</dd> + <dt> + <a href="/en-US/docs/Web/SVG/Attribute">SVG attribute reference</a></dt> + <dd> + Get details about each SVG attribute.</dd> + <dt> + <a href="/en-US/docs/DOM/DOM_Reference#SVG_interfaces">SVG DOM interface reference</a></dt> + <dd> + Get details about the whole SVG DOM API.</dd> + <dt> + Enhance HTML content</dt> + <dd> + SVG works together with HTML, CSS and JavaScript. Use SVG to enhance a regular HTML page or web application.</dd> + <dt> + SVG in Mozilla</dt> + <dd> + Notes and information on how SVG is implemented in Mozilla. + <ul> + <li><a href="/en-US/docs/SVG_in_Firefox">How much SVG is implemented in Firefox</a></li> + <li><a href="/en-US/docs/Web/SVG/Tutorial">Tutorial for how to use </a></li> + <li><a href="/en-US/docs/SVG_In_HTML_Introduction">SVG in XHTML</a></li> + </ul> + </dd> + </dl> + <p><span class="alllinks"><a href="/en-US/docs/tag/SVG">View All...</a></span></p> + <h2 class="Community" id="Community">Community</h2> + <ul> + <li>View Mozilla forums... {{DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg")}}</li> + </ul> + <h2 class="Tools" id="Tools">Tools</h2> + <ul> + <li><a href="http://www.w3.org/Graphics/SVG/Test/">SVG Test Suite</a></li> + <li><a href="http://jiggles.w3.org/svgvalidator/">SVG Validator</a> (Discontinued)</li> + <li><a href="/en-US/docs/tag/SVG:Tools" title="tag/SVG:Tools">More Tools...</a></li> + <li>Other resources: <a href="/en-US/docs/XML">XML</a>, <a href="/en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/DOM">DOM</a>, <a href="/en-US/docs/HTML/Canvas">Canvas</a></li> + </ul> + </div> + <div class="section"> + <h2 class="Related_Topics" id="Examples">Examples</h2> + <ul> + <li>Google <a href="http://maps.google.com">Maps</a> (route overlay) & <a href="http://docs.google.com">Docs</a> (spreadsheet charting)</li> + <li><a href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">SVG bubble menus</a></li> + <li><a href="http://jwatt.org/svg/authoring/">SVG authoring guidelines</a></li> + <li>An overview of the <a href="/en-US/docs/Mozilla_SVG_Project">Mozilla SVG Project</a></li> + <li><a href="/en-US/docs/SVG/FAQ" title="SVG/FAQ">Frequently asked questions</a> regarding SVG and Mozilla</li> + <li>Slides and demos from talk on <a href="http://jwatt.org/svg-open-US/docs/2009/slides.xhtml">SVG and Mozilla</a> at SVG Open 2009</li> + <li><a href="/en-US/docs/SVG/SVG_as_an_Image">SVG as an image</a></li> + <li><a href="/en-US/docs/SVG/SVG_animation_with_SMIL">SVG animation with SMIL</a></li> + <li><a href="http://plurib.us/1shot/2007/svg_gallery/">SVG art gallery</a></li> + <li>More samples (<a href="http://croczilla.com/bits_and_pieces/svg/samples">SVG Samples croczilla.com</a>, <a href="http://www.carto.net/papers/svg/samples/">carto.net</a>)</li> + </ul> + <h3 id="Animation_and_interactions">Animation and interactions</h3> + <p>Like HTML, SVG has a document model (DOM), events and is accessible from JavaScript. This allows developers to create rich animations and interactive images.</p> + <ul> + <li>Some real eye-candy SVG at <a href="http://svg-wow.org/">svg-wow.org</a></li> + <li>Firefox extension (<a href="http://schepers.cc/grafox/">Grafox</a>) to add a subset of SMIL animation support</li> + <li>Interactive <a href="http://people.mozilla.com/~vladimir/demos/photos.svg">photos</a> manipulation</li> + <li><a href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">HTML transformations</a> using SVG's <code>foreignObject</code></li> + </ul> + <h3 id="Mapping_charting_games_3D_experiments">Mapping, charting, games & 3D experiments</h3> + <p>While a little SVG can go a long way to enhanced web content, here are some examples of heavy SVG usage.</p> + <ul> + <li><a href="http://www.codedread.com/yastframe.php">Tetris</a></li> + <li><a href="https://web.archive.org/web/20131019072450/http://www.treebuilder.de/svg/connect4.svg" title="Archive link provided because source now requires authentication.">Connect 4</a></li> + <li><a href="http://www.carto.net/papers/svg/us_population/index.html">US population map</a></li> + <li><a href="http://www.treebuilder.de/default.asp?file=441875.xml">3D box</a> & <a href="http://www.treebuilder.de/default.asp?file=206524.xml">3D boxes</a></li> + <li><a href="http://jvectormap.com/">jVectorMap</a> (interactive maps for data visualization)</li> + </ul> + </div> +</div> +<p> </p> diff --git a/files/fa/web/svg/tutorial/index.html b/files/fa/web/svg/tutorial/index.html new file mode 100644 index 0000000000..7767ffd448 --- /dev/null +++ b/files/fa/web/svg/tutorial/index.html @@ -0,0 +1,38 @@ +--- +title: SVG Tutorial +slug: Web/SVG/Tutorial +translation_of: Web/SVG/Tutorial +--- +<p dir="RTL">گرافیک برداری مقیاس پذیر <span dir="LTR">SVG</span> گویشی (نسخه خاصی از) <span dir="LTR">W3C XML</span> برای نشانه گذاری گرافیک (تصاویر) می باشد.</p> +<p>Scalable Vector Graphics, <a href="/en-US/Web/SVG" title="en-US/Web/SVG">SVG</a>, is a W3C XML dialect to mark up graphics. It is partially implemented in Firefox, Opera, WebKit browsers, Internet Explorer and other browsers.</p> +<p>This tutorial aims to explain the internals of SVG and is packed with technical details. If you just want to draw beautiful images, you might find more useful resources at <a class="external" href="http://inkscape.org/doc/" title="http://inkscape.org/doc/">Inkscape's documentation page</a>. Another good introduction to SVG is provided by the W3C's <a class="external" href="http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html" title="http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html">SVG Primer</a>.</p> +<div class="note"> + The tutorial is in an early stage of development. If you're able, please help out by chipping in and writing a paragraph or two. Extra points for writing a whole page!</div> +<h5 id="Introducing_SVG_from_Scratch">Introducing SVG from Scratch</h5> +<ul> + <li><a href="/en-US/Web/SVG/Tutorial/Introduction" title="en-US/Web/SVG/Tutorial/Introduction">Introduction</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Getting_Started" title="en-US/Web/SVG/Tutorial/Getting_Started">Getting Started</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Positions" title="en-US/Web/SVG/Tutorial/Positions">Positions</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Basic_Shapes" title="en-US/Web/SVG/Tutorial/Basic_Shapes">Basic Shapes</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Paths" title="en-US/Web/SVG/Tutorial/Paths">Paths</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Fills_and_Strokes" title="en-US/Web/SVG/Tutorial/Fills_and_Strokes">Fills and Strokes</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Gradients" title="en-US/Web/SVG/Tutorial/Gradients">Gradients</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Patterns" title="en-US/Web/SVG/Tutorial/Patterns">Patterns</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Texts" title="en-US/Web/SVG/Tutorial/Texts">Texts</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Basic_Transformations" title="en-US/Web/SVG/Tutorial/Basic_Transformations">Basic Transformations</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Clipping_and_masking" title="en-US/Web/SVG/Tutorial/Clipping_and_masking">Clipping and masking</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Other_content_in_SVG" title="en-US/Web/SVG/Tutorial/Other content in SVG">Other content in SVG</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Filter_effects" title="en-US/Web/SVG/Tutorial/Filter effects">Filter effects</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/SVG_fonts" title="en-US/Web/SVG/Tutorial/SVG fonts">SVG fonts</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/SVG_Image_Tag" title="en-US/Web/SVG/Tutorial/SVG Image Tag">SVG Image tag</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Tools_for_SVG" title="en-US/Web/SVG/Tutorial/Tools_for_SVG">Tools for SVG</a></li> +</ul> +<p>The following topics are more advanced and hence should get their own tutorials.</p> +<h5 id="Scripting_SVG_with_JavaScript">Scripting SVG with JavaScript</h5> +<p>TBD</p> +<h5 id="SVG_filters_tutorial">SVG filters tutorial</h5> +<p>TBD</p> +<h5 id="Animations_with_SMIL_in_SVG">Animations with SMIL in SVG</h5> +<p>TBD</p> +<h5 id="Creating_fonts_in_SVG">Creating fonts in SVG</h5> +<p>TBD</p> diff --git a/files/fa/web/svg/tutorial/introduction/index.html b/files/fa/web/svg/tutorial/introduction/index.html new file mode 100644 index 0000000000..609d506200 --- /dev/null +++ b/files/fa/web/svg/tutorial/introduction/index.html @@ -0,0 +1,45 @@ +--- +title: معرفی SVG +slug: Web/SVG/Tutorial/Introduction +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;"></p> + +<p dir="rtl">SVG یگ زبان نشانه گذاری مبتنی بر XML و شبیه به XHTML است که برای طراحی گرافیکی استفاده میشود مانند تصاویری که سمت راست میبینید.با استفاده از آن هم می توان تصاویری متشکل از خطوط و اشکال هندسی متفاوت ساخت هم تصاویری که به اصطلاح <a href="https://fa.wikipedia.org/wiki/%DA%AF%D8%B1%D8%A7%D9%81%DB%8C%DA%A9_%D8%B4%D8%B7%D8%B1%D9%86%D8%AC%DB%8C">گرافیک شطرنجی</a> خوانده می شوند ویا حتی ترکیبی از هر دو. این نوع تصاویر و اجزایشان میتوانند تبدیل شوند یا با هم مخلوط شوند یا حتی فیلترسازی (فیلتر ها در فتوشاپ یا css) شده تا ظاهرشان به کلی تغییر کند.</p> + +<p dir="rtl">SVG حدود سال های 1999 بعد از چندین رقابت فرمت ها(زبان های دیگر مبتنی بر XML) به <a href="https://w3.org">W3C </a>ارسال شد و از تصویب رسمی و کامل باز ماند. با اینکه این وضع برای مدت کوتاهی بود باز هم پشتیبانی مرورگر ها به کندی صورت میگرفت به همین دلیل استفاده گسترده ای از SVG در فضای وب نمیشود(این آمار مربوط به سال 2009 است اکنون یعنی در سال 2016 از SVG برای ساخت وبسایت ها و وب اپلیکیشن ها استفاده فراوانی می شود).</p> + +<p>Even the implementations that are available often are not as fast as competing technologies like <a href="/en-US/HTML/Canvas" title="en-US/HTML/Canvas">HTML5 Canvas</a> or Adobe Flash as a full application interface. SVG does offer benefits over both implementations, 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="Basic_ingredients">Basic ingredients</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 graphic area.</p> + +<h3 id="Before_you_start" name="Before_you_start">Before you start</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 in 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 graphic 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> |