SVG: Syntax Sprites Animation презентация

Содержание

Слайд 2

SVG (scalable vector graphics) - scalable vector graphics markup language.

An SVG image file

has the extension .svg or .svgz and is described according to all XML syntax rules.
SVG consists of:
title (XML declaration) and a DOCTYPE (optional)

declaration of the root element.
elements (tags) that describe the image



Слайд 3

SVG elements (tags)

<br><desc><br><path><br><rect><br><circle><br><ellipse><br><line><br><polyline><br><polygon><br><text><br><g><br><image><br><linearGradient><br><p>describes the title of a document<br>document description<br>describes complex geometric shapes as</div></h3></h3><!----><!----><div class="slides-content">a compact string<br>draws rectangle<br>draws a circle<br>draws an ellipse<br>draws a line<br>draws open shapes by drawing a line at given points<br>it is analogous to <polyline>, however the final figure will automatically close<br>inserts text data in a picture<br>inserts a bitmap from a separate file into a vector SVG drawing<br>you can group SVG elements into one container with the <g> tag.<br>defines linear gradients for filling or changing graphic elements<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide4" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/93701/slide-3.jpg" target="_blank" rel="noopener">Слайд 4</a><h3 class="slides-content text-center font-bold"><div><p>Single and pair tags<br><p><path /><br><rect /><br><circle /><br><ellipse /><br><line /><br><polyline /><br><polygon /><br><linearGradient><br><p><animate /><br><animateTransform /><br><animateMotion</div></h3></h3><!----><!----><div class="slides-content">/><br><animateColor /><br><set /><br><p><a> … </a><br><defs> … </defs><br><glyph> … </glyph><br><g> … </g><br><marker> … </marker><br><mask> … </mask><br><missing-glyph> … </missing-glyph><br><pattern> … </pattern><br><svg> … </svg><br><switch> … </switch><br><symbol> … </symbol><br><p>universal tags<br><p>single tags<br><p>pair tags<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide5" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/93701/slide-4.jpg" target="_blank" rel="noopener">Слайд 5</a><h3 class="slides-content text-center font-bold"><div><p>Symbolic SVG sprite<br><p>A symbolic svg sprite is one svg root element, inside of</div></h3></h3><!----><!----><div class="slides-content">which <symbol> areas are created, inside which svg-icon code is contained. Each <symbol> element is assigned a unique id, by which it can later be accessed in the document.<br><Symbol> creates a template from any svg objects, which can later be reused with the <use> tag. Content located inside the <symbol> is not displayed on the page.<br><svg xmlns="http://www.w3.org/2000/svg" version="1.1"><br> <symbol id="path" viewBox="0 0 1000 600"><br> <path d="M 10 100 L 240 35 L 200 300 L 450 25 L 24 360 H 250 z" stroke="green"/><br> </symbol><br> <symbol id="rect" viewBox="0 0 1000 600"><br> <rect x="400" y="100" width="400" height="200" fill="white" stroke="black" stroke-width="15"/><br> </symbol><br></svg><br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide6" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/93701/slide-5.jpg" target="_blank" rel="noopener">Слайд 6</a><h3 class="slides-content text-center font-bold"><div><p>How to use Symbolic SVG sprite<br><p>In order to combine them into a sprite,</div></h3></h3><!----><!----><div class="slides-content">it is enough to wrap the code of each of them in the <symbol> element, add the viewbox attribute to it and specify a unique id.<br>To be able to use icons from a symbolic svg sprite, first of all, you need to add this sprite to the page. Take the sprite we received in the previous section and paste it on the page.<br>After the sprite is on the page, you can display the desired icon using the <use> tag:<br><svg xmlns="http://www.w3.org/2000/svg" version="1.1"><br> <use xlink:href="#someID"></use><br></svg><br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide7" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/93701/slide-6.jpg" target="_blank" rel="noopener">Слайд 7</a><h3 class="slides-content text-center font-bold"><div><p>SVG animation<br><p>SMIL - is the markup language recommended by the W3C for describing</div></h3></h3><!----><!----><div class="slides-content">multimedia presentations.<br>In SVG, each individual geometric figure can be assigned its own animated instructions, made to move.<br>CSS - has better browser support; SMIL - has great functionality.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide8" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/93701/slide-7.jpg" target="_blank" rel="noopener">Слайд 8</a><h3 class="slides-content text-center font-bold"><div><p>When can we use SMIL<br><p>Do what CSS could not do (animate an unsupported</div></h3></h3><!----><!----><div class="slides-content">attribute, etc.)<br>Need to have more precise control over the animation.<br>Make path morphing (animation of attribute d at <path> tag)<br>Sync animations<br>Make interactive animations<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide9" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/93701/slide-8.jpg" target="_blank" rel="noopener">Слайд 9</a><h3 class="slides-content text-center font-bold"><div><p>Browser support<br></div></h3></h3><!----><!----><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide10" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/93701/slide-9.jpg" target="_blank" rel="noopener">Слайд 10</a><h3 class="slides-content text-center font-bold"><div><p>SMIL tags<br><p><animate /> used to animate any attribute and is the main tool<br><set</div></h3></h3><!----><!----><div class="slides-content">/> used to instantly change the attribute for a specific period of time<br><animateTransform /> used to apply various transformations to an element<br><animateMotion /> needed to animate the movement of an element along a path<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide11" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/93701/slide-10.jpg" target="_blank" rel="noopener">Слайд 11</a><h3 class="slides-content text-center font-bold"><div><p>How to use<br><p>There are 2 ways of usage SMIL animation in svg<br>put <animate></div></h3></h3><!----><!----><div class="slides-content">tag inside figure (it allows you to encapsulate the animation inside the object)<br> <rect x="400" y="100" width="400" height="200" fill="white" stroke="black" stroke-width="15"><br> <animate .../><br> </rect><br>Pass the link to the item (useful if you want all the animations to be collected in one place)<br> <rect id="rect" x="400" y="100" width="400" height="200" stroke="black" stroke-width="15"><br> <animate xlink:href="#rect"/><br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide12" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/93701/slide-11.jpg" target="_blank" rel="noopener">Слайд 12</a><h3 class="slides-content text-center font-bold"><div><p>Animate attributes<br><p>attributeName - defines figure attribute where we apply animation<br>attributeType (useless) - CSS/XML/auto</div></h3></h3><!----><!----><div class="slides-content">- defines what type of attribute we are using<br>from - defines the start point of animation<br>to - defines end point of animation<br>by - defines “jump” of animation<br>values - defines multiply points for animation<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide13" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/93701/slide-12.jpg" target="_blank" rel="noopener">Слайд 13</a><h3 class="slides-content text-center font-bold"><div><p>Examples<br><p><rect id="rect" x="400" y="100" width="400" height="200" stroke="black" stroke-width="15"><br><animate <br> attributeName="width"<br> from="400"<br> to="100"<br> /><br><animate</div></h3></h3><!----><!----><div class="slides-content"><br> attributeName="height"<br> values="50;330"<br> /><br> </rect><br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide14" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/93701/slide-13.jpg" target="_blank" rel="noopener">Слайд 14</a><h3 class="slides-content text-center font-bold"><div><p>Timing attributes<br><p>dur - defines duration of animation<br>fill (remove/freeze) - defines element’s behavior after</div></h3></h3><!----><!----><div class="slides-content">animation end<br>repeatCount (number/indefinite) - defines iteration count<br>begin (time/click) - defines end point of animation start<br>restart (always/whenNotActive/never) - restarts animation on condition<br>repeatDur - stops animation after setted time<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide15" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/93701/slide-14.jpg" target="_blank" rel="noopener">Слайд 15</a><h3 class="slides-content text-center font-bold"><div><p>Examples<br><p><rect id="rect" x="400" y="100" width="400" height="200" stroke="black" stroke-width="15"><br> <animate <br> attributeName="width"<br> values="250; 500;</div></h3></h3><!----><!----><div class="slides-content">400"<br> dur="2s"<br> repeatCount="indefinite"<br> repeatDur="30s"<br> begin="click"<br> /><br> </rect><br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide16" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/93701/slide-15.jpg" target="_blank" rel="noopener">Слайд 16</a><h3 class="slides-content text-center font-bold"><div><p>Synchronize<br><p>In addition to standard events, by the type of click, there are events</div></h3></h3><!----><!----><div class="slides-content">of the beginning, end, and repetition of the animation. In order to bind an event, you must specify the id of the animation and through the point begin, end, repeat, respectively<br>You can also specify a delay relative to the event, or start the animation a second before the end of another<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide17" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/93701/slide-16.jpg" target="_blank" rel="noopener">Слайд 17</a><h3 class="slides-content text-center font-bold"><div><p>Examples<br><p><animate id="startedAnimation" begin="click" .../><br> <animate begin="startedAnimation.begin" .../><br> <animate id="nextAnimation" begin="startedAnimation.end" repeatCount="12".../><br> <animate end="nextAnimation.begin</div></h3></h3><!----><!----><div class="slides-content">+ 3s" .../><br> <animate begin="nextAnimation.end - 2s" .../><br> <animate begin="nextAnimation.repeat(5)" .../><br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide18" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/93701/slide-17.jpg" target="_blank" rel="noopener">Слайд 18</a><h3 class="slides-content text-center font-bold"><div><p>Path morphing<br><p>Path morphing is an animation of the d attribute of the path</div></h3></h3><!----><!----><div class="slides-content">tag, which allows you to create the effect of smoothly changing the shape of the figure. Currently, with built-in tools, this can only be done using SMIL. Values ​​indicates the list of values ​​for the d attribute through which the element passes. You can also use from-to.<br>For morphing to work, the number of commands must match, and they must be of the same type.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide19" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/93701/slide-18.jpg" target="_blank" rel="noopener">Слайд 19</a><h3 class="slides-content text-center font-bold"><div><p>Examples<br><p> <path d="M 200 200 L 300 200 L 400 200 L 400</div></h3></h3><!----><!----><div class="slides-content">300 L 400 400 L 300 400 L 200 400 L 200 300 z" stroke="purple" stroke-width="12" fill="none"><br> <animate <br> attributeName="d"<br> values="M 200 200 L 300 200 L 400 200 L 400 300 L 400 400 L 300 400 L 200 400 L 200 300 z;<br> M 250 200 L 300 100 L 350 200 L 450 350 L 350 400 L 250 500 L 200 400 L 100 300 z;<br> M 300 200 L 150 200 L 600 200 L 250 300 L 200 200 L 300 400 L 200 150 L 200 300 z;<br> M 200 200 L 300 200 L 400 200 L 400 300 L 400 400 L 300 400 L 200 400 L 200 300 z"<br> dur="5s"<br> repeatCount="indefinite"<br> /><br> </path><br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide20" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/93701/slide-19.jpg" target="_blank" rel="noopener">Слайд 20</a><h3 class="slides-content text-center font-bold"><div><p>Transformation <animateTransform><br><p>Used to apply various transformations to an element. All types of transformations</div></h3></h3><!----><!----><div class="slides-content">are identical to CSS transformations. With the simultaneous use of CSS and SMIL transformations, they will override each other, so it is better to use one thing, or watch so that they do not overlap.<br>The animated attribute is transform. The transformation mode is indicated in the type attribute and accepts 4 types of values ​​- translate, rotate, scale, skewX/Y.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><!----></div><!--]--></div><div class="section"><div></div></div><form id="download" action="/api/" method="post" class="download"><!----><div class="download-description"> Имя файла: SVG:-Syntax-Sprites-Animation.pptx <br> Количество просмотров: 49 <br> Количество скачиваний: 0</div><button class="download-btn" type="submit">Скачать</button><!----></form><div class="navigation"><div class="navigation-item"><div>- Предыдущая</div><a href="/informatika/travel4friends-welcome" class="navigation-link">Travel4friends. Welcome</a></div><div class="navigation-item"><div>Следующая -</div><a href="/geografiya/geodeziya-2" class="navigation-link">Геодезия</a></div></div></div></div><div class="item-layoutRelated"><div class="section"><div></div></div></div></div><div class="item-layout"><div class="related"><h2 class="related-header">Похожие презентации</h2><div class="related-wrapper"><!--[--><div class="related-item"><a href="/informatika/elektronno-metodicheskie-materialy-na-temu-kompyuternye" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/562387/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/562387/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/562387/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/562387/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/562387/slide-0.jpg 1440w" class="slides-image related-itemImage"> Электронно-методические материалы на тему Компьютерные сети</a></div><div class="related-item"><a href="/informatika/c-dlya-ege" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/282218/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/282218/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/282218/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/282218/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/282218/slide-0.jpg 1440w" class="slides-image related-itemImage"> C++ для ЕГЭ</a></div><div class="related-item"><a href="/informatika/proektnaya-deyatelnost-na-urokah-informatiki-2" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/470051/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/470051/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/470051/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/470051/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/470051/slide-0.jpg 1440w" class="slides-image related-itemImage"> Проектная деятельность на уроках информатики</a></div><div class="related-item"><a href="/informatika/osnovnye-yazyki-dlya-razrabotki-mobilnyh-prilozheniy" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/144245/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/144245/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/144245/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/144245/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/144245/slide-0.jpg 1440w" class="slides-image related-itemImage">  Основные языки для разработки мобильных приложений</a></div><div class="related-item"><a href="/informatika/predmet-informatiki-informatsiya-izmerenie-edinitsy-izmereniya" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/593738/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/593738/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/593738/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/593738/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/593738/slide-0.jpg 1440w" class="slides-image related-itemImage"> Предмет информатики. Информация, измерение, единицы измерения</a></div><div class="related-item"><a href="/informatika/prezentatsiya-po-teme-sistemy-schisleniya-arifmeticheskie" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/446289/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/446289/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/446289/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/446289/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/446289/slide-0.jpg 1440w" class="slides-image related-itemImage"> Презентация по теме Системы счисления. Арифметические операции в позиционных системах счисления для 9, 10 кл.</a></div><div class="related-item"><a href="/informatika/introduction-to-it" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/608874/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/608874/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/608874/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/608874/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/608874/slide-0.jpg 1440w" class="slides-image related-itemImage"> Introduction to IT</a></div><div class="related-item"><a href="/informatika/sportivnaya-robototehnika" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/387570/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/387570/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/387570/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/387570/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/387570/slide-0.jpg 1440w" class="slides-image related-itemImage"> Спортивная робототехника</a></div><div class="related-item"><a href="/informatika/syomnye-nositeli-informatsii-5-klass" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/310436/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/310436/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/310436/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/310436/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/310436/slide-0.jpg 1440w" class="slides-image related-itemImage"> Съёмные носители информации. 5 класс</a></div><div class="related-item"><a href="/informatika/suniy-intellekt" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/7409/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/7409/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/7409/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/7409/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/7409/slide-0.jpg 1440w" class="slides-image related-itemImage"> Sun’iy intellekt</a></div><div class="related-item"><a href="/informatika/ponyatie-ob-algoritmah-blokshemy-algoritmov" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/257325/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/257325/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/257325/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/257325/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/257325/slide-0.jpg 1440w" class="slides-image related-itemImage"> Понятие об алгоритмах. Блоксхемы алгоритмов</a></div><div class="related-item"><a href="/informatika/lektsiya-1-platforma-net-i-ee" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/202665/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/202665/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/202665/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/202665/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/202665/slide-0.jpg 1440w" class="slides-image related-itemImage"> Лекция 1 - Платформа .NET и ее особенности</a></div><div class="related-item"><a href="/informatika/zapusk-v-ekspluatatsiyu-sistemy-aria-soho-3" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/385923/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/385923/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/385923/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/385923/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/385923/slide-0.jpg 1440w" class="slides-image related-itemImage"> Запуск в эксплуатацию системы ARIA SOHO</a></div><div class="related-item"><a href="/informatika/biblioteka-stl-tip-vector" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/582170/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/582170/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/582170/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/582170/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/582170/slide-0.jpg 1440w" class="slides-image related-itemImage"> Библиотека STL. Тип vector</a></div><div class="related-item"><a href="/informatika/admin-1951" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/368080/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/368080/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/368080/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/368080/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/368080/slide-0.jpg 1440w" class="slides-image related-itemImage"> Admin</a></div><div class="related-item"><a href="/informatika/ikt-2015" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/528012/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/528012/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/528012/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/528012/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/528012/slide-0.jpg 1440w" class="slides-image related-itemImage"> ИКТ</a></div><div class="related-item"><a href="/informatika/setevoy-etiket-i-mery-bezopasnosti-v" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/603005/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/603005/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/603005/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/603005/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/603005/slide-0.jpg 1440w" class="slides-image related-itemImage"> Сетевой этикет и меры безопасности в сети Интернет</a></div><div class="related-item"><a href="/informatika/programmirovanie-na-java-massivy-v-java" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/12591/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/12591/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/12591/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/12591/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/12591/slide-0.jpg 1440w" class="slides-image related-itemImage"> Программирование на Java. Массивы в Java. (Лекция 3.2)</a></div><div class="related-item"><a href="/informatika/registr-5" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/90013/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/90013/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/90013/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/90013/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/90013/slide-0.jpg 1440w" class="slides-image related-itemImage"> Регистр</a></div><div class="related-item"><a href="/informatika/zhiznennyy-tsikl-programmnogo-obespecheniya-1" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/212002/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/212002/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/212002/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/212002/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/212002/slide-0.jpg 1440w" class="slides-image related-itemImage"> Жизненный цикл программного обеспечения</a></div><div class="related-item"><a href="/informatika/razrabotka-informatsionnoy-sistemy-po-uchetu-bolnyh" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/357031/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/357031/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/357031/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/357031/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/357031/slide-0.jpg 1440w" class="slides-image related-itemImage"> Разработка информационной системы по учету больных сахарным диабетом</a></div><div class="related-item"><a href="/informatika/logika-predmet-logiki" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/128573/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/128573/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/128573/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/128573/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/128573/slide-0.jpg 1440w" class="slides-image related-itemImage"> Логика. Предмет логики</a></div><div class="related-item"><a href="/informatika/yazyk-programmirovaniya-c-8" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/579727/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/579727/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/579727/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/579727/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/579727/slide-0.jpg 1440w" class="slides-image related-itemImage"> Язык программирования C#</a></div><div class="related-item"><a href="/informatika/pamyatka-regionam-po-vedeniyu-sotssetey" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/304884/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/304884/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/304884/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/304884/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/304884/slide-0.jpg 1440w" class="slides-image related-itemImage"> Памятка регионам по ведению соцсетей</a></div><div class="related-item"><a href="/informatika/model-studencheskogo-media-tsentra" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/192693/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/192693/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/192693/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/192693/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/192693/slide-0.jpg 1440w" class="slides-image related-itemImage"> Модель студенческого Медиа-центра</a></div><div class="related-item"><a href="/informatika/uroven-prilozheniy-2" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/332925/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/332925/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/332925/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/332925/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/332925/slide-0.jpg 1440w" class="slides-image related-itemImage"> Уровень приложений</a></div><div class="related-item"><a href="/informatika/kompyuternye-seti-vsemirnaya-pautina" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/435419/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/435419/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/435419/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/435419/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/435419/slide-0.jpg 1440w" class="slides-image related-itemImage"> Компьютерные сети. Всемирная паутина</a></div><div class="related-item"><a href="/informatika/tsifrovoe-video-spasyom-zhizn-vmeste" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/302511/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/302511/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/302511/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/302511/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/302511/slide-0.jpg 1440w" class="slides-image related-itemImage"> Цифровое видео: Спасём жизнь вместе!</a></div><!--]--></div></div></div></div><!--]--><!--]--><!--]--></div></div></main><footer class="footer"><div class="layout"><!----><div class="footer-contacts"><svg class="footer-contactsIcon" viewBox="0 0 27 26" xmlns="http://www.w3.org/2000/svg"><use xlink:href="/images/icons.svg#contacts"></use></svg> Обратная связь</div><!----><div class="footer-contactsEmail"> Email: <span class="footer-contactsShow">Нажмите что бы посмотреть</span></div></div></footer></div><!--]--></div><script>window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R){return {data:{meta:{result:{meta:{h1:l,main_text:a,main_title:m,main_description:n,main_keywords:o,main_image:a},app:{logo_image:p,logo_image_width:q,logo_image_height:r,logo_text:a,image_width_full:s,image_width_min:t,recaptcha_key:u,yandex_search:v,ya_context:c,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:w,footer_before:a,footer:a,dark_theme:c,strategy:{image_alt_words:h,item_slide_header:x,item_images:y,item_images_tag:z,item_words_h3:c,item_words_tag:A,item_words_1:h,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:e,item_show_contents:e,item_show_filename:e},colors:{header_text:j,header_bg:i,accent:i}},social:F}},item:{result:{id:93701,name:k,category:G,count:H,jpg:"jpg\u002F93701",hits:49,download:b,h1:"SVG: Syntax Sprites Animation презентация",meta:{h1:k,title:k,description:"SVG: Syntax Sprites Animation презентация на тему, доклад, Информатика",keywords:"SVG: Syntax Sprites Animation, презентация, доклад, проект, скачать, на тему, PowerPoint, урок, класс, школа, Информатика",download_link:a},text:"Вы можете изучить и скачать доклад-презентацию на тему Презентация на тему SVG: Syntax Sprites Animation из раздела Информатика. Презентация на заданную тему содержит 21 слайдов. Для просмотра воспользуйтесь проигрывателем, если материал оказался полезным для Вас - поделитесь им с друзьями с помощью социальных кнопок и добавьте наш сайт презентаций в закладки!",seo_text:"\u003Cp\u003ESVG (scalable vector graphics) - scalable vector graphics markup language.\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003EAn SVG image file has the extension .svg or .svgz and is described according to all XML syntax rules.\u003Cbr\u003E\u003Cbr\u003ESVG consists of:\u003Cbr\u003Etitle (XML declaration) and a DOCTYPE ",file:"SVG:-Syntax-Sprites-Animation.pptx",texts:["\u003Cp\u003E\u003CSVG\u003E: Syntax Sprites\u003Cbr\u003EAnimation\u003Cbr\u003E","\u003Cp\u003ESVG (scalable vector graphics) - scalable vector graphics markup language.\u003Cbr\u003E\u003Cp\u003EAn SVG image file has the extension .svg or .svgz and is described according to all XML syntax rules.\u003Cbr\u003ESVG consists of:\u003Cbr\u003Etitle (XML declaration) and a DOCTYPE (optional) \r\n \u003C?xml version=\"1.0\" encoding=\"UTF-8\"?\u003E\u003Cbr\u003E\u003C!DOCTYPE svg PUBLIC \"-\u002F\u002FW3C\u002F\u002FDTD SVG 1.1\u002F\u002FEN\" \"http:\u002F\u002Fwww.w3.org\u002FGraphics\u002FSVG\u002F1.1\u002FDTD\u002Fsvg11.dtd\"\u003E\u003Cbr\u003Edeclaration of the root element.\r\n\u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" version=\"1.1\" height = \"400px\" width = \"400px\"\u003E\u003C\u002Fsvg\u003E\u003Cbr\u003Eelements (tags) that describe the image\u003Cbr\u003E\t\u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" version=\"1.1\" height = \"400px\" width = \"400px\"\u003E\u003Cbr\u003E\u003Ccircle cx=\"200px\" cy=\"200px\" r=\"100px\" fill=\"green\" \u002F\u003E\u003Cbr\u003E\u003C\u002Fsvg\u003E\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003ESVG elements (tags)\u003Cbr\u003E\u003Cp\u003E\u003Ctitle\u003E\u003Cbr\u003E\u003Cdesc\u003E\u003Cbr\u003E\u003Cpath\u003E\u003Cbr\u003E\u003Crect\u003E\u003Cbr\u003E\u003Ccircle\u003E\u003Cbr\u003E\u003Cellipse\u003E\u003Cbr\u003E\u003Cline\u003E\u003Cbr\u003E\u003Cpolyline\u003E\u003Cbr\u003E\u003Cpolygon\u003E\u003Cbr\u003E\u003Ctext\u003E\u003Cbr\u003E\u003Cg\u003E\u003Cbr\u003E\u003Cimage\u003E\u003Cbr\u003E\u003ClinearGradient\u003E\u003Cbr\u003E\u003Cp\u003Edescribes the title of a document\u003Cbr\u003Edocument description\u003Cbr\u003Edescribes complex geometric shapes as a compact string\u003Cbr\u003Edraws rectangle\u003Cbr\u003Edraws a circle\u003Cbr\u003Edraws an ellipse\u003Cbr\u003Edraws a line\u003Cbr\u003Edraws open shapes by drawing a line at given points\u003Cbr\u003Eit is analogous to \u003Cpolyline\u003E, however the final figure will automatically close\u003Cbr\u003Einserts text data in a picture\u003Cbr\u003Einserts a bitmap from a separate file into a vector SVG drawing\u003Cbr\u003Eyou can group SVG elements into one container with the \u003Cg\u003E tag.\u003Cbr\u003Edefines linear gradients for filling or changing graphic elements\u003Cbr\u003E","\u003Cp\u003ESingle and pair tags\u003Cbr\u003E\u003Cp\u003E\u003Cpath \u002F\u003E\u003Cbr\u003E\u003Crect \u002F\u003E\u003Cbr\u003E\u003Ccircle \u002F\u003E\u003Cbr\u003E\u003Cellipse \u002F\u003E\u003Cbr\u003E\u003Cline \u002F\u003E\u003Cbr\u003E\u003Cpolyline \u002F\u003E\u003Cbr\u003E\u003Cpolygon \u002F\u003E\u003Cbr\u003E\u003ClinearGradient\u003E\u003Cbr\u003E\u003Cp\u003E\u003Canimate \u002F\u003E\u003Cbr\u003E\u003CanimateTransform \u002F\u003E\u003Cbr\u003E\u003CanimateMotion \u002F\u003E\u003Cbr\u003E\u003CanimateColor \u002F\u003E\u003Cbr\u003E\u003Cset \u002F\u003E\u003Cbr\u003E\u003Cp\u003E\u003Ca\u003E … \u003C\u002Fa\u003E\u003Cbr\u003E\u003Cdefs\u003E … \u003C\u002Fdefs\u003E\u003Cbr\u003E\u003Cglyph\u003E … \u003C\u002Fglyph\u003E\u003Cbr\u003E\u003Cg\u003E … \u003C\u002Fg\u003E\u003Cbr\u003E\u003Cmarker\u003E … \u003C\u002Fmarker\u003E\u003Cbr\u003E\u003Cmask\u003E … \u003C\u002Fmask\u003E\u003Cbr\u003E\u003Cmissing-glyph\u003E … \u003C\u002Fmissing-glyph\u003E\u003Cbr\u003E\u003Cpattern\u003E … \u003C\u002Fpattern\u003E\u003Cbr\u003E\u003Csvg\u003E … \u003C\u002Fsvg\u003E\u003Cbr\u003E\u003Cswitch\u003E … \u003C\u002Fswitch\u003E\u003Cbr\u003E\u003Csymbol\u003E … \u003C\u002Fsymbol\u003E\u003Cbr\u003E\u003Cp\u003Euniversal tags\u003Cbr\u003E\u003Cp\u003Esingle tags\u003Cbr\u003E\u003Cp\u003Epair tags\u003Cbr\u003E","\u003Cp\u003ESymbolic SVG sprite\u003Cbr\u003E\u003Cp\u003EA symbolic svg sprite is one svg root element, inside of which \u003Csymbol\u003E areas are created, inside which svg-icon code is contained. Each \u003Csymbol\u003E element is assigned a unique id, by which it can later be accessed in the document.\u003Cbr\u003E\u003CSymbol\u003E creates a template from any svg objects, which can later be reused with the \u003Cuse\u003E tag. Content located inside the \u003Csymbol\u003E is not displayed on the page.\u003Cbr\u003E\u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" version=\"1.1\"\u003E\u003Cbr\u003E \u003Csymbol id=\"path\" viewBox=\"0 0 1000 600\"\u003E\u003Cbr\u003E \u003Cpath d=\"M 10 100 L 240 35 L 200 300 L 450 25 L 24 360 H 250 z\" stroke=\"green\"\u002F\u003E\u003Cbr\u003E \u003C\u002Fsymbol\u003E\u003Cbr\u003E \u003Csymbol id=\"rect\" viewBox=\"0 0 1000 600\"\u003E\u003Cbr\u003E \u003Crect x=\"400\" y=\"100\" width=\"400\" height=\"200\" fill=\"white\" stroke=\"black\" stroke-width=\"15\"\u002F\u003E\u003Cbr\u003E \u003C\u002Fsymbol\u003E\u003Cbr\u003E\u003C\u002Fsvg\u003E\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EHow to use Symbolic SVG sprite\u003Cbr\u003E\u003Cp\u003EIn order to combine them into a sprite, it is enough to wrap the code of each of them in the \u003Csymbol\u003E element, add the viewbox attribute to it and specify a unique id.\u003Cbr\u003ETo be able to use icons from a symbolic svg sprite, first of all, you need to add this sprite to the page. Take the sprite we received in the previous section and paste it on the page.\u003Cbr\u003EAfter the sprite is on the page, you can display the desired icon using the \u003Cuse\u003E tag:\u003Cbr\u003E\u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" version=\"1.1\"\u003E\u003Cbr\u003E \u003Cuse xlink:href=\"#someID\"\u003E\u003C\u002Fuse\u003E\u003Cbr\u003E\u003C\u002Fsvg\u003E\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003ESVG animation\u003Cbr\u003E\u003Cp\u003ESMIL - is the markup language recommended by the W3C for describing multimedia presentations.\u003Cbr\u003EIn SVG, each individual geometric figure can be assigned its own animated instructions, made to move.\u003Cbr\u003ECSS - has better browser support; SMIL - has great functionality.\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EWhen can we use SMIL\u003Cbr\u003E\u003Cp\u003EDo what CSS could not do (animate an unsupported attribute, etc.)\u003Cbr\u003ENeed to have more precise control over the animation.\u003Cbr\u003EMake path morphing (animation of attribute d at \u003Cpath\u003E tag)\u003Cbr\u003ESync animations\u003Cbr\u003EMake interactive animations\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EBrowser support\u003Cbr\u003E","\u003Cp\u003ESMIL tags\u003Cbr\u003E\u003Cp\u003E\u003Canimate \u002F\u003E used to animate any attribute and is the main tool\u003Cbr\u003E\u003Cset \u002F\u003E used to instantly change the attribute for a specific period of time\u003Cbr\u003E\u003CanimateTransform \u002F\u003E used to apply various transformations to an element\u003Cbr\u003E\u003CanimateMotion \u002F\u003E needed to animate the movement of an element along a path\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EHow to use\u003Cbr\u003E\u003Cp\u003EThere are 2 ways of usage SMIL animation in svg\u003Cbr\u003Eput \u003Canimate\u003E tag inside figure (it allows you to encapsulate the animation inside the object)\u003Cbr\u003E\t\u003Crect x=\"400\" y=\"100\" width=\"400\" height=\"200\" fill=\"white\" stroke=\"black\" stroke-width=\"15\"\u003E\u003Cbr\u003E \u003Canimate ...\u002F\u003E\u003Cbr\u003E \u003C\u002Frect\u003E\u003Cbr\u003EPass the link to the item (useful if you want all the animations to be collected in one place)\u003Cbr\u003E\t\u003Crect id=\"rect\" x=\"400\" y=\"100\" width=\"400\" height=\"200\" stroke=\"black\" stroke-width=\"15\"\u003E\u003Cbr\u003E\t\u003Canimate xlink:href=\"#rect\"\u002F\u003E\u003Cbr\u003E\t\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EAnimate attributes\u003Cbr\u003E\u003Cp\u003EattributeName - defines figure attribute where we apply animation\u003Cbr\u003EattributeType (useless) - CSS\u002FXML\u002Fauto - defines what type of attribute we are using\u003Cbr\u003Efrom - defines the start point of animation\u003Cbr\u003Eto - defines end point of animation\u003Cbr\u003Eby - defines “jump” of animation\u003Cbr\u003Evalues - defines multiply points for animation\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EExamples\u003Cbr\u003E\u003Cp\u003E\u003Crect id=\"rect\" x=\"400\" y=\"100\" width=\"400\" height=\"200\" stroke=\"black\" stroke-width=\"15\"\u003E\u003Cbr\u003E\u003Canimate \u003Cbr\u003E attributeName=\"width\"\u003Cbr\u003E from=\"400\"\u003Cbr\u003E to=\"100\"\u003Cbr\u003E \u002F\u003E\u003Cbr\u003E\u003Canimate \u003Cbr\u003E attributeName=\"height\"\u003Cbr\u003E values=\"50;330\"\u003Cbr\u003E \u002F\u003E\u003Cbr\u003E\t\u003C\u002Frect\u003E\u003Cbr\u003E\u003Cbr\u003E\t\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003ETiming attributes\u003Cbr\u003E\u003Cp\u003Edur - defines duration of animation\u003Cbr\u003Efill (remove\u002Ffreeze) - defines element’s behavior after animation end\u003Cbr\u003ErepeatCount (number\u002Findefinite) - defines iteration count\u003Cbr\u003Ebegin (time\u002Fclick) - defines end point of animation start\u003Cbr\u003Erestart (always\u002FwhenNotActive\u002Fnever) - restarts animation on condition\u003Cbr\u003ErepeatDur - stops animation after setted time\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EExamples\u003Cbr\u003E\u003Cp\u003E\u003Crect id=\"rect\" x=\"400\" y=\"100\" width=\"400\" height=\"200\" stroke=\"black\" stroke-width=\"15\"\u003E\u003Cbr\u003E \u003Canimate \u003Cbr\u003E attributeName=\"width\"\u003Cbr\u003E values=\"250; 500; 400\"\u003Cbr\u003E dur=\"2s\"\u003Cbr\u003E repeatCount=\"indefinite\"\u003Cbr\u003E repeatDur=\"30s\"\u003Cbr\u003E begin=\"click\"\u003Cbr\u003E \u002F\u003E\u003Cbr\u003E \u003C\u002Frect\u003E\u003Cbr\u003E\u003Cbr\u003E\t\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003ESynchronize\u003Cbr\u003E\u003Cp\u003EIn addition to standard events, by the type of click, there are events of the beginning, end, and repetition of the animation. In order to bind an event, you must specify the id of the animation and through the point begin, end, repeat, respectively\u003Cbr\u003EYou can also specify a delay relative to the event, or start the animation a second before the end of another\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EExamples\u003Cbr\u003E\u003Cp\u003E\u003Canimate id=\"startedAnimation\" begin=\"click\" ...\u002F\u003E\u003Cbr\u003E \u003Canimate begin=\"startedAnimation.begin\" ...\u002F\u003E\u003Cbr\u003E \u003Canimate id=\"nextAnimation\" begin=\"startedAnimation.end\" repeatCount=\"12\"...\u002F\u003E\u003Cbr\u003E \u003Canimate end=\"nextAnimation.begin + 3s\" ...\u002F\u003E\u003Cbr\u003E \u003Canimate begin=\"nextAnimation.end - 2s\" ...\u002F\u003E\u003Cbr\u003E \u003Canimate begin=\"nextAnimation.repeat(5)\" ...\u002F\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E\t\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EPath morphing\u003Cbr\u003E\u003Cp\u003EPath morphing is an animation of the d attribute of the path tag, which allows you to create the effect of smoothly changing the shape of the figure. Currently, with built-in tools, this can only be done using SMIL. Values ​​indicates the list of values ​​for the d attribute through which the element passes. You can also use from-to.\u003Cbr\u003EFor morphing to work, the number of commands must match, and they must be of the same type.\u003Cbr\u003E","\u003Cp\u003EExamples\u003Cbr\u003E\u003Cp\u003E \u003Cpath d=\"M 200 200 L 300 200 L 400 200 L 400 300 L 400 400 L 300 400 L 200 400 L 200 300 z\" stroke=\"purple\" stroke-width=\"12\" fill=\"none\"\u003E\u003Cbr\u003E \u003Canimate \u003Cbr\u003E attributeName=\"d\"\u003Cbr\u003E values=\"M 200 200 L 300 200 L 400 200 L 400 300 L 400 400 L 300 400 L 200 400 L 200 300 z;\u003Cbr\u003E M 250 200 L 300 100 L 350 200 L 450 350 L 350 400 L 250 500 L 200 400 L 100 300 z;\u003Cbr\u003E M 300 200 L 150 200 L 600 200 L 250 300 L 200 200 L 300 400 L 200 150 L 200 300 z;\u003Cbr\u003E M 200 200 L 300 200 L 400 200 L 400 300 L 400 400 L 300 400 L 200 400 L 200 300 z\"\u003Cbr\u003E dur=\"5s\"\u003Cbr\u003E repeatCount=\"indefinite\"\u003Cbr\u003E \u002F\u003E\u003Cbr\u003E \u003C\u002Fpath\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E\t\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003ETransformation \u003CanimateTransform\u003E\u003Cbr\u003E\u003Cp\u003EUsed to apply various transformations to an element. All types of transformations are identical to CSS transformations. With the simultaneous use of CSS and SMIL transformations, they will override each other, so it is better to use one thing, or watch so that they do not overlap.\u003Cbr\u003EThe animated attribute is transform. The transformation mode is indicated in the type attribute and accepts 4 types of values ​​- translate, rotate, scale, skewX\u002FY.\u003Cbr\u003E","\u003Cp\u003EMotion \u003CanimateMotion\u003E\u003Cbr\u003E\u003Cp\u003ENeeded to animate the movement of an element along a path.\u003Cbr\u003EThe path attribute specifies a set of commands, as for the d attribute. If in the d attribute the commands are interpreted as the outline of the figure, then in the path attribute they are the line along which the element will move. The coordinates of the points are also relative, so the path starts at point 0,0\u003Cbr\u003EIt is possible to make an element rotate in the direction of motion using the rotate attribute. It accepts 3 types of values: auto, auto-reverse and a number indicating rotation in degrees\u003Cbr\u003E"],href:"\u002Finformatika\u002Fsvg-syntax-sprites-animation",href_category:"\u002Finformatika",date:1627389980,related:[{id:562387,name:"Электронно-методические материалы на тему Компьютерные сети",href:"\u002Finformatika\u002Felektronno-metodicheskie-materialy-na-temu-kompyuternye",jpg:"jpg\u002F562387"},{id:282218,name:"C++ для ЕГЭ",href:"\u002Finformatika\u002Fc-dlya-ege",jpg:"jpg\u002F282218"},{id:470051,name:"Проектная деятельность на уроках информатики",href:"\u002Finformatika\u002Fproektnaya-deyatelnost-na-urokah-informatiki-2",jpg:"jpg\u002F470051"},{id:144245,name:" Основные языки для разработки мобильных приложений",href:"\u002Finformatika\u002Fosnovnye-yazyki-dlya-razrabotki-mobilnyh-prilozheniy",jpg:"jpg\u002F144245"},{id:593738,name:"Предмет информатики. Информация, измерение, единицы измерения",href:"\u002Finformatika\u002Fpredmet-informatiki-informatsiya-izmerenie-edinitsy-izmereniya",jpg:"jpg\u002F593738"},{id:446289,name:"Презентация по теме Системы счисления. Арифметические операции в позиционных системах счисления для 9, 10 кл.",href:"\u002Finformatika\u002Fprezentatsiya-po-teme-sistemy-schisleniya-arifmeticheskie",jpg:"jpg\u002F446289"},{id:608874,name:"Introduction to IT",href:"\u002Finformatika\u002Fintroduction-to-it",jpg:"jpg\u002F608874"},{id:387570,name:"Спортивная робототехника",href:"\u002Finformatika\u002Fsportivnaya-robototehnika",jpg:"jpg\u002F387570"},{id:310436,name:"Съёмные носители информации. 5 класс",href:"\u002Finformatika\u002Fsyomnye-nositeli-informatsii-5-klass",jpg:"jpg\u002F310436"},{id:7409,name:"Sun’iy intellekt",href:"\u002Finformatika\u002Fsuniy-intellekt",jpg:"jpg\u002F7409"},{id:257325,name:"Понятие об алгоритмах. Блоксхемы алгоритмов",href:"\u002Finformatika\u002Fponyatie-ob-algoritmah-blokshemy-algoritmov",jpg:"jpg\u002F257325"},{id:202665,name:"Лекция 1 - Платформа .NET и ее особенности",href:"\u002Finformatika\u002Flektsiya-1-platforma-net-i-ee",jpg:"jpg\u002F202665"},{id:385923,name:"Запуск в эксплуатацию системы ARIA SOHO",href:"\u002Finformatika\u002Fzapusk-v-ekspluatatsiyu-sistemy-aria-soho-3",jpg:"jpg\u002F385923"},{id:582170,name:"Библиотека STL. Тип vector",href:"\u002Finformatika\u002Fbiblioteka-stl-tip-vector",jpg:"jpg\u002F582170"},{id:368080,name:"Admin",href:"\u002Finformatika\u002Fadmin-1951",jpg:"jpg\u002F368080"},{id:528012,name:"ИКТ",href:"\u002Finformatika\u002Fikt-2015",jpg:"jpg\u002F528012"},{id:603005,name:"Сетевой этикет и меры безопасности в сети Интернет",href:"\u002Finformatika\u002Fsetevoy-etiket-i-mery-bezopasnosti-v",jpg:"jpg\u002F603005"},{id:12591,name:"Программирование на Java. Массивы в Java. (Лекция 3.2)",href:"\u002Finformatika\u002Fprogrammirovanie-na-java-massivy-v-java",jpg:"jpg\u002F12591"},{id:90013,name:"Регистр",href:"\u002Finformatika\u002Fregistr-5",jpg:"jpg\u002F90013"},{id:212002,name:"Жизненный цикл программного обеспечения",href:"\u002Finformatika\u002Fzhiznennyy-tsikl-programmnogo-obespecheniya-1",jpg:"jpg\u002F212002"},{id:357031,name:"Разработка информационной системы по учету больных сахарным диабетом",href:"\u002Finformatika\u002Frazrabotka-informatsionnoy-sistemy-po-uchetu-bolnyh",jpg:"jpg\u002F357031"},{id:128573,name:"Логика. Предмет логики",href:"\u002Finformatika\u002Flogika-predmet-logiki",jpg:"jpg\u002F128573"},{id:579727,name:"Язык программирования C#",href:"\u002Finformatika\u002Fyazyk-programmirovaniya-c-8",jpg:"jpg\u002F579727"},{id:304884,name:"Памятка регионам по ведению соцсетей",href:"\u002Finformatika\u002Fpamyatka-regionam-po-vedeniyu-sotssetey",jpg:"jpg\u002F304884"},{id:192693,name:"Модель студенческого Медиа-центра",href:"\u002Finformatika\u002Fmodel-studencheskogo-media-tsentra",jpg:"jpg\u002F192693"},{id:332925,name:"Уровень приложений",href:"\u002Finformatika\u002Furoven-prilozheniy-2",jpg:"jpg\u002F332925"},{id:435419,name:"Компьютерные сети. Всемирная паутина",href:"\u002Finformatika\u002Fkompyuternye-seti-vsemirnaya-pautina",jpg:"jpg\u002F435419"},{id:302511,name:"Цифровое видео: Спасём жизнь вместе!",href:"\u002Finformatika\u002Ftsifrovoe-video-spasyom-zhizn-vmeste",jpg:"jpg\u002F302511"}],navigation:{next:"\u002Fgeografiya\u002Fgeodeziya-2",next_name:"Геодезия",prev:"\u002Finformatika\u002Ftravel4friends-welcome",prev_name:"Travel4friends. Welcome"}}},categories:{result:[{id:I,ordering:b,name:"Без категории",pseudoname:"uncategorized"},{id:144,ordering:b,name:"Бизнес",pseudoname:"biznes"},{id:146,ordering:b,name:"Образование",pseudoname:"obrazovanie"},{id:149,ordering:b,name:"Финансы",pseudoname:"finansy"},{id:150,ordering:b,name:"Государство",pseudoname:"gosudarstvo"},{id:152,ordering:b,name:"Спорт",pseudoname:"sport"},{id:154,ordering:b,name:"Армия",pseudoname:"armiya"},{id:156,ordering:b,name:"Культурология",pseudoname:"kulturologiya"},{id:157,ordering:b,name:"Еда и кулинария",pseudoname:"eda-i-kulinariya"},{id:158,ordering:b,name:"Лингвистика",pseudoname:"lingvistika"},{id:163,ordering:b,name:"Черчение",pseudoname:"cherchenie"},{id:164,ordering:b,name:"Физкультура",pseudoname:"fizkultura"},{id:165,ordering:b,name:"ИЗО",pseudoname:"izo"},{id:166,ordering:b,name:"Психология",pseudoname:"psihologiya"},{id:116,ordering:I,name:"Английский язык",pseudoname:"angliyskiy-yazyk"},{id:108,ordering:2,name:"Астрономия",pseudoname:"astronomiya"},{id:104,ordering:3,name:"Алгебра",pseudoname:"algebra"},{id:106,ordering:4,name:"Биология",pseudoname:"biologiya"},{id:142,ordering:5,name:"География",pseudoname:"geografiya"},{id:141,ordering:6,name:"Геометрия",pseudoname:"geometria"},{id:123,ordering:7,name:"Детские презентации",pseudoname:"detskie-prezentatsii"},{id:107,ordering:8,name:G,pseudoname:"informatika"},{id:109,ordering:9,name:"История",pseudoname:"istoriya"},{id:139,ordering:10,name:"Литература",pseudoname:"literatura"},{id:119,ordering:11,name:"Маркетинг",pseudoname:"marketing"},{id:114,ordering:12,name:"Математика",pseudoname:"matematika"},{id:138,ordering:h,name:"Медицина",pseudoname:"medetsina"},{id:118,ordering:14,name:"Менеджмент",pseudoname:"menedzhment"},{id:137,ordering:15,name:"Музыка",pseudoname:"muzyka"},{id:136,ordering:16,name:"МХК",pseudoname:"mhk"},{id:130,ordering:17,name:"Немецкий язык",pseudoname:"nemetskiy-yazyk"},{id:105,ordering:18,name:"ОБЖ",pseudoname:"obzh"},{id:133,ordering:19,name:"Обществознание ",pseudoname:"obshchestvoznanie"},{id:132,ordering:20,name:"Окружающий мир ",pseudoname:"okruzhayushchiy-mir"},{id:131,ordering:H,name:"Педагогика ",pseudoname:"pedagogika"},{id:129,ordering:22,name:"Русский язык",pseudoname:"russkiy-yazyk"},{id:128,ordering:24,name:"Технология",pseudoname:"tehnologiya"},{id:127,ordering:25,name:"Физика",pseudoname:"fizika"},{id:126,ordering:26,name:"Философия",pseudoname:"filosofiya"},{id:125,ordering:27,name:"Химия",pseudoname:"himiya"},{id:124,ordering:29,name:"Экология",pseudoname:"ekologiya"},{id:121,ordering:30,name:"Экономика",pseudoname:"ekonomika"},{id:120,ordering:31,name:"Юриспруденция",pseudoname:"yurisprudentsiya"}]}},state:{},_errors:{},serverRendered:e,config:{public:{SITE_NAME:J,SITE_HOST:"mypreza.com",SITE_LANG:K,API_BASE_URL:"https:\u002F\u002Fmypreza.com\u002Fapi\u002F",pwaManifest:{name:J,short_name:a,description:a,lang:K,start_url:"\u002F?standalone=true",display:"standalone",background_color:j,theme_color:"#000000",icons:[{src:"\u002F_nuxt\u002Ficons\u002F64x64.f2a6e93d.png",type:d,sizes:L,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F64x64.maskable.f2a6e93d.png",type:d,sizes:L,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F120x120.f2a6e93d.png",type:d,sizes:M,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F120x120.maskable.f2a6e93d.png",type:d,sizes:M,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F144x144.f2a6e93d.png",type:d,sizes:N,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F144x144.maskable.f2a6e93d.png",type:d,sizes:N,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F152x152.f2a6e93d.png",type:d,sizes:O,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F152x152.maskable.f2a6e93d.png",type:d,sizes:O,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F192x192.f2a6e93d.png",type:d,sizes:P,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F192x192.maskable.f2a6e93d.png",type:d,sizes:P,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F384x384.f2a6e93d.png",type:d,sizes:Q,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F384x384.maskable.f2a6e93d.png",type:d,sizes:Q,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F512x512.f2a6e93d.png",type:d,sizes:R,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F512x512.maskable.f2a6e93d.png",type:d,sizes:R,purpose:g}]},yandexMetrika:{id:"85004146",metrikaUrl:"https:\u002F\u002Fmc.yandex.ru\u002Fmetrika\u002Ftag.js",accurateTrackBounce:e,childIframe:c,clickmap:c,defer:c,useRuntimeConfig:e,trackHash:c,trackLinks:e,type:b,webvisor:c,triggerEvent:c,consoleLog:e,partytown:c,isDev:c}},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:a}},pinia:{app:{meta:{h1:l,main_text:a,main_title:m,main_description:n,main_keywords:o,main_image:a},app:{logo_image:p,logo_image_width:q,logo_image_height:r,logo_text:a,image_width_full:s,image_width_min:t,recaptcha_key:u,yandex_search:v,ya_context:c,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:w,footer_before:a,footer:a,dark_theme:c,strategy:{image_alt_words:h,item_slide_header:x,item_images:y,item_images_tag:z,item_words_h3:c,item_words_tag:A,item_words_1:h,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:e,item_show_contents:e,item_show_filename:e},colors:{header_text:j,header_bg:i,accent:i}},social:F,token:a}}}}("",0,false,"image\u002Fpng",true,"any","maskable",13,"#d53032","#ffffff","SVG: Syntax Sprites Animation","Учебные презентации","Презентации в PowerPoint на разные темы","Презентации, проекты, доклады в PowerPoint на разные темы для учебы","Презентация, на тему, урок, класс, PowerPoint, скачати презентацію, фон, шаблон, доклад, проект.","images\u002Fdata\u002Flogo.png",185,40,720,480,"6LeioWIpAAAAAGqMN4KqMVIkekcMW7fBKHjXCd-a","2503267","mypreza@ya.ru","h3a","text","none","h3","category","both",80,800,"\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fes5-shims\u002F0.0.2\u002Fes5-shims.min.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fshare2\u002Fshare.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cdiv class=\"ya-share2\" data-services=\"collections,gplus,vkontakte,facebook,odnoklassniki,gplus,twitter,moimir\" data-counter=\"\"\u003E\u003C\u002Fdiv\u003E","Информатика",21,1,"Mypreza","ru","64x64","120x120","144x144","152x152","192x192","384x384","512x512"))</script><script type="module" src="/_nuxt/entry.0d6add34.js" crossorigin></script></body> </html>