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

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

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</div></h2><div class="slides-content">shapes as 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"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 4</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/93701/slide-3.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Single and pair tags … … … … … …" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/93701/slide-3.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/93701/slide-3.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/93701/slide-3.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/93701/slide-3.jpg 1440w" class="slides-image"></h2><h2 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</div></h2><div class="slides-content">/><br><animateTransform /><br><animateMotion /><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"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 5</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/93701/slide-4.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Symbolic SVG sprite A symbolic svg sprite is one svg" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/93701/slide-4.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/93701/slide-4.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/93701/slide-4.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/93701/slide-4.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Symbolic SVG sprite<br><p>A symbolic svg sprite is one svg root element,</div></h2><div class="slides-content">inside of 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"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 6</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/93701/slide-5.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="How to use Symbolic SVG sprite In order to combine" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/93701/slide-5.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/93701/slide-5.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/93701/slide-5.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/93701/slide-5.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>How to use Symbolic SVG sprite<br><p>In order to combine them into</div></h2><div class="slides-content">a sprite, 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"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 7</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/93701/slide-6.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="SVG animation SMIL - is the markup language recommended by" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/93701/slide-6.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/93701/slide-6.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/93701/slide-6.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/93701/slide-6.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>SVG animation<br><p>SMIL - is the markup language recommended by the W3C</div></h2><div class="slides-content">for describing 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"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 8</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/93701/slide-7.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="When can we use SMIL Do what CSS could not" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/93701/slide-7.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/93701/slide-7.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/93701/slide-7.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/93701/slide-7.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>When can we use SMIL<br><p>Do what CSS could not do (animate</div></h2><div class="slides-content">an unsupported 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"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 9</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/93701/slide-8.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Browser support" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/93701/slide-8.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/93701/slide-8.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/93701/slide-8.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/93701/slide-8.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Browser support<br></div></h2><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide10" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 10</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/93701/slide-9.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="SMIL tags used to animate any attribute and is the" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/93701/slide-9.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/93701/slide-9.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/93701/slide-9.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/93701/slide-9.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>SMIL tags<br><p><animate /> used to animate any attribute and is the</div></h2><div class="slides-content">main tool<br><set /> 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"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 11</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/93701/slide-10.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="How to use There are 2 ways of usage SMIL" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/93701/slide-10.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/93701/slide-10.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/93701/slide-10.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/93701/slide-10.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>How to use<br><p>There are 2 ways of usage SMIL animation in</div></h2><div class="slides-content">svg<br>put <animate> 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"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 12</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/93701/slide-11.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Animate attributes attributeName - defines figure attribute where we apply" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/93701/slide-11.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/93701/slide-11.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/93701/slide-11.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/93701/slide-11.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Animate attributes<br><p>attributeName - defines figure attribute where we apply animation<br>attributeType (useless)</div></h2><div class="slides-content">- CSS/XML/auto - 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"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 13</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/93701/slide-12.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Examples attributeName="width" from="400" to="100" /> attributeName="height" values="50;330" />" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/93701/slide-12.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/93701/slide-12.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/93701/slide-12.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/93701/slide-12.jpg 1440w" class="slides-image"></h2><h2 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></div></h2><div class="slides-content">to="100"<br> /><br><animate <br> attributeName="height"<br> values="50;330"<br> /><br> </rect><br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide14" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 14</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/93701/slide-13.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Timing attributes dur - defines duration of animation fill (remove/freeze)" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/93701/slide-13.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/93701/slide-13.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/93701/slide-13.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/93701/slide-13.jpg 1440w" class="slides-image"></h2><h2 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</div></h2><div class="slides-content">behavior after 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"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 15</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/93701/slide-14.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Examples attributeName="width" values="250; 500; 400" dur="2s" repeatCount="indefinite" repeatDur="30s" begin="click" />" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/93701/slide-14.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/93701/slide-14.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/93701/slide-14.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/93701/slide-14.jpg 1440w" class="slides-image"></h2><h2 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></div></h2><div class="slides-content">values="250; 500; 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"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 16</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/93701/slide-15.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Synchronize In addition to standard events, by the type of" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/93701/slide-15.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/93701/slide-15.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/93701/slide-15.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/93701/slide-15.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Synchronize<br><p>In addition to standard events, by the type of click, there</div></h2><div class="slides-content">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<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"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 17</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/93701/slide-16.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Examples" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/93701/slide-16.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/93701/slide-16.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/93701/slide-16.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/93701/slide-16.jpg 1440w" class="slides-image"></h2><h2 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></div></h2><div class="slides-content"><animate end="nextAnimation.begin + 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"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 18</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/93701/slide-17.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Path morphing Path morphing is an animation of the d" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/93701/slide-17.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/93701/slide-17.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/93701/slide-17.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/93701/slide-17.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Path morphing<br><p>Path morphing is an animation of the d attribute of</div></h2><div class="slides-content">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.<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"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 19</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/93701/slide-18.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Examples attributeName="d" values="M 200 200 L 300 200 L 400" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/93701/slide-18.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/93701/slide-18.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/93701/slide-18.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/93701/slide-18.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Examples<br><p> <path d="M 200 200 L 300 200 L 400 200</div></h2><div class="slides-content">L 400 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"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 20</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/93701/slide-19.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Transformation Used to apply various transformations to an element. All" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/93701/slide-19.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/93701/slide-19.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/93701/slide-19.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/93701/slide-19.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Transformation <animateTransform><br><p>Used to apply various transformations to an element. All types</div></h2><div class="slides-content">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.<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> Количество просмотров: 57 <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/game-theoretic-methods-in-machine-learning" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/359385/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/359385/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/359385/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/359385/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/359385/slide-0.jpg 1440w" class="slides-image related-itemImage"> Game-Theoretic Methods in Machine Learning</a></div><div class="related-item"><a href="/informatika/tekstovye-redaktory-sublime-text-i-vim" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/142313/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/142313/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/142313/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/142313/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/142313/slide-0.jpg 1440w" class="slides-image related-itemImage"> Текстовые редакторы Sublime Text и Vim</a></div><div class="related-item"><a href="/informatika/this-work-is-licensed-under-a" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/303767/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/303767/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/303767/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/303767/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/303767/slide-0.jpg 1440w" class="slides-image related-itemImage"> This work is licensed under a Creative Commons Attribution-ShareAlike 3.0</a></div><div class="related-item"><a href="/informatika/osobennosti-matematiki-v-python-zadaniya" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/238290/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/238290/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/238290/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/238290/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/238290/slide-0.jpg 1440w" class="slides-image related-itemImage"> Особенности математики в Python. Задания</a></div><div class="related-item"><a href="/informatika/aprobatsiya-tehnologiy-silverlightlinqwcf-dlya-sozdaniya-web" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/394335/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/394335/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/394335/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/394335/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/394335/slide-0.jpg 1440w" class="slides-image related-itemImage"> Апробация технологий Silverlight/LINQ/WCF для создания web-приложений, ориентированных на интенсивную обработку данных</a></div><div class="related-item"><a href="/informatika/internet-vred-i-polza-1" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/265208/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/265208/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/265208/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/265208/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/265208/slide-0.jpg 1440w" class="slides-image related-itemImage"> Интернет: вред и польза</a></div><div class="related-item"><a href="/informatika/sravnitelnyy-analiz-dizayna-internet-saytov-9" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/365940/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/365940/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/365940/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/365940/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/365940/slide-0.jpg 1440w" class="slides-image related-itemImage"> Сравнительный анализ дизайна интернет-сайтов</a></div><div class="related-item"><a href="/informatika/funktsionalnye-podsistemy-ais" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/428795/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/428795/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/428795/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/428795/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/428795/slide-0.jpg 1440w" class="slides-image related-itemImage"> Функциональные подсистемы АИС</a></div><div class="related-item"><a href="/informatika/sistemy-iskusstvennogo-intellekta" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/174747/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/174747/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/174747/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/174747/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/174747/slide-0.jpg 1440w" class="slides-image related-itemImage"> Системы искусственного интеллекта</a></div><div class="related-item"><a href="/informatika/kak-nastroit-kontekst-i-ne-slit" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/334227/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/334227/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/334227/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/334227/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/334227/slide-0.jpg 1440w" class="slides-image related-itemImage"> Как настроить контекст и не слить весь бюджет за один день</a></div><div class="related-item"><a href="/informatika/sreda-programmirovaniya-scratch-urok-1" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/19974/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/19974/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/19974/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/19974/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/19974/slide-0.jpg 1440w" class="slides-image related-itemImage"> Среда программирования Scratch. Урок 1</a></div><div class="related-item"><a href="/informatika/multiservisnaya-set-na-osnove-softswitch" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/210655/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/210655/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/210655/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/210655/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/210655/slide-0.jpg 1440w" class="slides-image related-itemImage"> Мультисервисная сеть на основе SoftSwitch</a></div><div class="related-item"><a href="/informatika/4d-printing" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/89522/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/89522/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/89522/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/89522/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/89522/slide-0.jpg 1440w" class="slides-image related-itemImage"> 4D-Printing</a></div><div class="related-item"><a href="/informatika/prezentatsiya-uroka-informatiki-ustroystvo-kompyutera3-4" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/561492/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/561492/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/561492/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/561492/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/561492/slide-0.jpg 1440w" class="slides-image related-itemImage"> презентация урока информатики Устройство компьютера3-4 класс</a></div><div class="related-item"><a href="/informatika/setevye-operatsionnye-sistemy" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/99033/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/99033/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/99033/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/99033/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/99033/slide-0.jpg 1440w" class="slides-image related-itemImage"> Сетевые Операционные Системы</a></div><div class="related-item"><a href="/informatika/ugroza-dostupa-k-lokalnym-faylam-servera" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/583613/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/583613/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/583613/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/583613/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/583613/slide-0.jpg 1440w" class="slides-image related-itemImage"> Угроза доступа к локальным файлам сервера при помощи URL</a></div><div class="related-item"><a href="/informatika/elektronnaya-pochta-15" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/289533/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/289533/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/289533/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/289533/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/289533/slide-0.jpg 1440w" class="slides-image related-itemImage"> Электронная почта</a></div><div class="related-item"><a href="/informatika/konspekt-uroka-po-teme-kompyuternye-prezentatsii" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/535658/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/535658/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/535658/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/535658/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/535658/slide-0.jpg 1440w" class="slides-image related-itemImage"> Конспект урока по теме Компьютерные презентации с использованием мультимедиа технологии</a></div><div class="related-item"><a href="/informatika/teoreticheskie-osnovy-informatiki-15" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/174761/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/174761/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/174761/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/174761/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/174761/slide-0.jpg 1440w" class="slides-image related-itemImage"> Теоретические основы информатики</a></div><div class="related-item"><a href="/informatika/the-inverted-multi-index" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/87883/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/87883/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/87883/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/87883/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/87883/slide-0.jpg 1440w" class="slides-image related-itemImage"> The Inverted Multi-Index</a></div><div class="related-item"><a href="/informatika/algoritm-s-vetvyashcheysya-strukturoy" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/404495/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/404495/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/404495/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/404495/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/404495/slide-0.jpg 1440w" class="slides-image related-itemImage"> Алгоритм с ветвящейся структурой</a></div><div class="related-item"><a href="/informatika/statistical-programming-languages" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/167654/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/167654/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/167654/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/167654/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/167654/slide-0.jpg 1440w" class="slides-image related-itemImage"> Statistical programming languages</a></div><div class="related-item"><a href="/informatika/nformatsyn-sistemi-ta-tehnolog-4" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/582545/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/582545/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/582545/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/582545/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/582545/slide-0.jpg 1440w" class="slides-image related-itemImage"> Інформаційні системи та технології</a></div><div class="related-item"><a href="/informatika/vvedenie-besprovodnye-seti-peredachi-dannyh" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/16617/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/16617/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/16617/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/16617/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/16617/slide-0.jpg 1440w" class="slides-image related-itemImage"> Введение. Беспроводные сети передачи данных</a></div><div class="related-item"><a href="/informatika/master-klass-kodirovanie-tekstovoy-informatsii" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/276788/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/276788/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/276788/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/276788/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/276788/slide-0.jpg 1440w" class="slides-image related-itemImage"> Мастер-класс. Кодирование текстовой информации</a></div><div class="related-item"><a href="/informatika/puteshestvuya-po-klaviature" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/473053/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/473053/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/473053/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/473053/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/473053/slide-0.jpg 1440w" class="slides-image related-itemImage"> Путешествуя по клавиатуре</a></div><div class="related-item"><a href="/informatika/nstruktsya-1" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/373685/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/373685/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/373685/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/373685/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/373685/slide-0.jpg 1440w" class="slides-image related-itemImage"> Інструкція</a></div><div class="related-item"><a href="/informatika/operator-elektronno-vychislitelnyh-i-vychislitelnyh-mashin" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/228847/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/228847/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/228847/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/228847/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/228847/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:n,main_text:a,main_title:o,main_description:p,main_keywords:q,main_image:a},app:{logo_image:r,logo_image_width:s,logo_image_height:t,logo_text:a,image_width_full:u,image_width_min:v,recaptcha_key:w,yandex_search:x,ya_context:e,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:y,footer_before:a,footer:a,dark_theme:e,strategy:{image_alt_words:j,item_slide_header:z,item_images:A,item_images_tag:h,item_words_h3:d,item_words_tag:h,item_words_1:k,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:d,item_show_contents:d,item_show_filename:d},colors:{header_text:l,header_bg:i,accent:i}},social:F}},item:{result:{id:93701,name:m,category:G,count:H,jpg:"jpg\u002F93701",hits:57,download:b,h1:"SVG: Syntax Sprites Animation презентация",meta:{h1:m,title:m,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:359385,name:"Game-Theoretic Methods in Machine Learning",href:"\u002Finformatika\u002Fgame-theoretic-methods-in-machine-learning",jpg:"jpg\u002F359385"},{id:142313,name:"Текстовые редакторы Sublime Text и Vim",href:"\u002Finformatika\u002Ftekstovye-redaktory-sublime-text-i-vim",jpg:"jpg\u002F142313"},{id:303767,name:"This work is licensed under a Creative Commons Attribution-ShareAlike 3.0",href:"\u002Finformatika\u002Fthis-work-is-licensed-under-a",jpg:"jpg\u002F303767"},{id:238290,name:"Особенности математики в Python. Задания",href:"\u002Finformatika\u002Fosobennosti-matematiki-v-python-zadaniya",jpg:"jpg\u002F238290"},{id:394335,name:"Апробация технологий Silverlight\u002FLINQ\u002FWCF для создания web-приложений, ориентированных на интенсивную обработку данных",href:"\u002Finformatika\u002Faprobatsiya-tehnologiy-silverlightlinqwcf-dlya-sozdaniya-web",jpg:"jpg\u002F394335"},{id:265208,name:"Интернет: вред и польза",href:"\u002Finformatika\u002Finternet-vred-i-polza-1",jpg:"jpg\u002F265208"},{id:365940,name:"Сравнительный анализ дизайна интернет-сайтов",href:"\u002Finformatika\u002Fsravnitelnyy-analiz-dizayna-internet-saytov-9",jpg:"jpg\u002F365940"},{id:428795,name:"Функциональные подсистемы АИС",href:"\u002Finformatika\u002Ffunktsionalnye-podsistemy-ais",jpg:"jpg\u002F428795"},{id:174747,name:"Системы искусственного интеллекта",href:"\u002Finformatika\u002Fsistemy-iskusstvennogo-intellekta",jpg:"jpg\u002F174747"},{id:334227,name:"Как настроить контекст и не слить весь бюджет за один день",href:"\u002Finformatika\u002Fkak-nastroit-kontekst-i-ne-slit",jpg:"jpg\u002F334227"},{id:19974,name:"Среда программирования Scratch. Урок 1",href:"\u002Finformatika\u002Fsreda-programmirovaniya-scratch-urok-1",jpg:"jpg\u002F19974"},{id:210655,name:"Мультисервисная сеть на основе SoftSwitch",href:"\u002Finformatika\u002Fmultiservisnaya-set-na-osnove-softswitch",jpg:"jpg\u002F210655"},{id:89522,name:"4D-Printing",href:"\u002Finformatika\u002F4d-printing",jpg:"jpg\u002F89522"},{id:561492,name:"презентация урока информатики Устройство компьютера3-4 класс",href:"\u002Finformatika\u002Fprezentatsiya-uroka-informatiki-ustroystvo-kompyutera3-4",jpg:"jpg\u002F561492"},{id:99033,name:"Сетевые Операционные Системы",href:"\u002Finformatika\u002Fsetevye-operatsionnye-sistemy",jpg:"jpg\u002F99033"},{id:583613,name:"Угроза доступа к локальным файлам сервера при помощи URL",href:"\u002Finformatika\u002Fugroza-dostupa-k-lokalnym-faylam-servera",jpg:"jpg\u002F583613"},{id:289533,name:"Электронная почта",href:"\u002Finformatika\u002Felektronnaya-pochta-15",jpg:"jpg\u002F289533"},{id:535658,name:"Конспект урока по теме Компьютерные презентации с использованием мультимедиа технологии",href:"\u002Finformatika\u002Fkonspekt-uroka-po-teme-kompyuternye-prezentatsii",jpg:"jpg\u002F535658"},{id:174761,name:"Теоретические основы информатики",href:"\u002Finformatika\u002Fteoreticheskie-osnovy-informatiki-15",jpg:"jpg\u002F174761"},{id:87883,name:"The Inverted Multi-Index",href:"\u002Finformatika\u002Fthe-inverted-multi-index",jpg:"jpg\u002F87883"},{id:404495,name:"Алгоритм с ветвящейся структурой",href:"\u002Finformatika\u002Falgoritm-s-vetvyashcheysya-strukturoy",jpg:"jpg\u002F404495"},{id:167654,name:"Statistical programming languages",href:"\u002Finformatika\u002Fstatistical-programming-languages",jpg:"jpg\u002F167654"},{id:582545,name:"Інформаційні системи та технології",href:"\u002Finformatika\u002Fnformatsyn-sistemi-ta-tehnolog-4",jpg:"jpg\u002F582545"},{id:16617,name:"Введение. Беспроводные сети передачи данных",href:"\u002Finformatika\u002Fvvedenie-besprovodnye-seti-peredachi-dannyh",jpg:"jpg\u002F16617"},{id:276788,name:"Мастер-класс. Кодирование текстовой информации",href:"\u002Finformatika\u002Fmaster-klass-kodirovanie-tekstovoy-informatsii",jpg:"jpg\u002F276788"},{id:473053,name:"Путешествуя по клавиатуре",href:"\u002Finformatika\u002Fputeshestvuya-po-klaviature",jpg:"jpg\u002F473053"},{id:373685,name:"Інструкція",href:"\u002Finformatika\u002Fnstruktsya-1",jpg:"jpg\u002F373685"},{id:228847,name:"Оператор электронно-вычислительных и вычислительных машин. Отчет по производственной практике",href:"\u002Finformatika\u002Foperator-elektronno-vychislitelnyh-i-vychislitelnyh-mashin",jpg:"jpg\u002F228847"}],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:j,name:"Литература",pseudoname:"literatura"},{id:119,ordering:k,name:"Маркетинг",pseudoname:"marketing"},{id:114,ordering:12,name:"Математика",pseudoname:"matematika"},{id:138,ordering:13,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:d,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:l,theme_color:"#000000",icons:[{src:"\u002F_nuxt\u002Ficons\u002F64x64.f2a6e93d.png",type:c,sizes:L,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F64x64.maskable.f2a6e93d.png",type:c,sizes:L,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F120x120.f2a6e93d.png",type:c,sizes:M,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F120x120.maskable.f2a6e93d.png",type:c,sizes:M,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F144x144.f2a6e93d.png",type:c,sizes:N,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F144x144.maskable.f2a6e93d.png",type:c,sizes:N,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F152x152.f2a6e93d.png",type:c,sizes:O,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F152x152.maskable.f2a6e93d.png",type:c,sizes:O,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F192x192.f2a6e93d.png",type:c,sizes:P,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F192x192.maskable.f2a6e93d.png",type:c,sizes:P,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F384x384.f2a6e93d.png",type:c,sizes:Q,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F384x384.maskable.f2a6e93d.png",type:c,sizes:Q,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F512x512.f2a6e93d.png",type:c,sizes:R,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F512x512.maskable.f2a6e93d.png",type:c,sizes:R,purpose:g}]},yandexMetrika:{id:"85004146",metrikaUrl:"https:\u002F\u002Fmc.yandex.ru\u002Fmetrika\u002Ftag.js",accurateTrackBounce:d,childIframe:e,clickmap:e,defer:e,useRuntimeConfig:d,trackHash:e,trackLinks:d,type:b,webvisor:e,triggerEvent:e,consoleLog:d,partytown:e,isDev:e}},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:a}},pinia:{app:{meta:{h1:n,main_text:a,main_title:o,main_description:p,main_keywords:q,main_image:a},app:{logo_image:r,logo_image_width:s,logo_image_height:t,logo_text:a,image_width_full:u,image_width_min:v,recaptcha_key:w,yandex_search:x,ya_context:e,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:y,footer_before:a,footer:a,dark_theme:e,strategy:{image_alt_words:j,item_slide_header:z,item_images:A,item_images_tag:h,item_words_h3:d,item_words_tag:h,item_words_1:k,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:d,item_show_contents:d,item_show_filename:d},colors:{header_text:l,header_bg:i,accent:i}},social:F,token:a}}}}("",0,"image\u002Fpng",true,false,"any","maskable","h2","#d53032",10,11,"#ffffff","SVG: Syntax Sprites Animation","Учебные презентации","Презентации в PowerPoint на разные темы","Презентации, проекты, доклады в PowerPoint на разные темы для учебы","Презентация, на тему, урок, класс, PowerPoint, скачати презентацію, фон, шаблон, доклад, проект.","images\u002Fdata\u002Flogo.png",185,40,720,480,"6LeioWIpAAAAAGqMN4KqMVIkekcMW7fBKHjXCd-a","2503267","[e-mail]","div","images_before","category","both",88,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>