Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

SVG animation — Π‘Π»ΠΎΠ³ ITVDN

SVG Π³Ρ€Π°Ρ„ΠΈΠΊΠ° ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π° с использованиСм Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… Ρ‚Π΅Π³ΠΎΠ². Они Π±Ρ‹Π»ΠΈ описаны Π² спСцификации Animation SMIL.


Рассмотрим эти Ρ‚Π΅Π³ΠΈ:

  • позволяСт Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ свойства Π² Ρ‚Π΅Ρ‡Π΅Π½ΠΈΠ΅ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ.
  • это ΡƒΠ΄ΠΎΠ±Π½ΠΎΠ΅ сокращСниС, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ для присвоСния Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… нСчисловых Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² ΠΈ свойств, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ свойства opacity.
  • ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π΄Π²ΠΈΠ³Π°Π΅Ρ‚ вдоль Ρ‚Ρ€Π°Π΅ΠΊΡ‚ΠΎΡ€ΠΈΠΈ двиТСния path.
  • которая ΠΌΠΎΠ΄ΠΈΡ„ΠΈΡ†ΠΈΡ€ΡƒΠ΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π° ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² ΠΈΠ»ΠΈ свойств с Ρ‚Π΅Ρ‡Π΅Π½ΠΈΠ΅ΠΌ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ.

Π’ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ элСмСнтам, ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… Π² SMIL, SVG Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ, совмСстимыС с SMIL Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ спСцификации.

Π­Ρ‚ΠΈ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ Π² сСбя Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ€Π°ΡΡˆΠΈΡ€ΡΡŽΡ‚ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π» элСмСнта.

Π Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ SVG Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ Π² сСбя:

  • — Π΄Π°Π΅Ρ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· SVG Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² Π² Ρ‚Π΅Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΊΠ° Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π² качСствС Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° прСобразования Π½ΠΎΠ²ΠΎΠ³ΠΎ Ρ†Π΅Π½Ρ‚Ρ€Π° Ρ„ΠΈΠ³ΡƒΡ€Ρ‹ ΠΈΠ»ΠΈ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ Ρ„ΠΈΠ³ΡƒΡ€Ρ‹ ΠΈ использованиС ΠΏΠΎΠ²ΠΎΡ€ΠΎΡ‚Π° Π²ΠΎΠΊΡ€ΡƒΠ³ ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· осСй (Π₯, Y, Z).
  • path(attr) — позволяСт Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ  вдоль ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΠΏΡƒΡ‚ΠΈ.Β  Β 
  • — ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π² сочСтании с animateMotion элСмСнта для ссылки Π½Π° Ρ‚Ρ€Π°Π΅ΠΊΡ‚ΠΎΡ€ΠΈΡŽ двиТСния, которая Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ использована Π² качСствС ΠΏΡƒΡ‚ΠΈ для двиТСния. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ mpath Π²Ρ…ΠΎΠ΄ΠΈΡ‚ Π²Π½ΡƒΡ‚Ρ€ΡŒ animateMotion элСмСнта пСрСд Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌ Ρ‚Π΅Π³ΠΎΠΌ.
  • keypoints (attr) — задаСтся Π² качСствС Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° для animateMotion, обСспСчивая Ρ‚ΠΎΡ‡Π½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒ скорости Ρ‚Ρ€Π°Π΅ΠΊΡ‚ΠΎΡ€ΠΈΠΈ двиТСния Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.
  • rotate(attr) — ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π² качСствС Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° для animateMotion для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ²ΠΎΡ€ΠΎΡ‚ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ оси ΠΏΠΎΠ²ΠΎΡ€ΠΎΡ‚Π°.

SVG Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΡ…ΠΎΠΆΠΈ Π½Π° CSS Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. ΠšΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ ΠΊΠ°Π΄Ρ€Ρ‹ ΡΠΎΠ·Π΄Π°ΡŽΡ‚ΡΡ, ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ двиТутся. Но ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π½Π΅Ρ‡Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ CSS Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π½Π΅ Π΄Π΅Π»Π°Π΅Ρ‚.

ΠŸΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ SVG Анимации

SVG элСмСнты ΠΌΠΎΠΆΠ½ΠΎ ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS. Π’ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠ΅, любоС ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈΠ»ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅Β ΠΌΠΎΠ³ΡƒΡ‚Β Π±Ρ‹Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½Ρ‹Β ΠΊ HTML элСмСнту, Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠ³ΡƒΡ‚Β Π±Ρ‹Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½Ρ‹Β ΠΊ SVG. Но ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ SVG свойства, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ сдСланы Ρ‡Π΅Ρ€Π΅Π· CSS. ВСкторная вСрсия ΠΏΡƒΡ‚ΡŒ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, поставляСтся с Π½Π°Π±ΠΎΡ€ΠΎΠΌ Π΄Π°Π½Π½Ρ‹Ρ… path, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ опрСдСляСт Ρ‚Ρ€Π°Π΅ΠΊΡ‚ΠΎΡ€ΠΈΡŽ этому ΠΏΡƒΡ‚ΠΈ. Π­Ρ‚ΠΈ Π΄Π°Π½Π½Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½Ρ‹ ΠΈ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… Ρ‡Π΅Ρ€Π΅Π· SMIL, Π½ΠΎ Π½Π΅ CSS. Π­Ρ‚ΠΎ ΠΏΠΎΡ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ SVG элСмСнты описаны Π½Π°Π±ΠΎΡ€ΠΎΠΌ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ², извСстных ΠΊΠ°ΠΊ SVG атрибуты прСдставлСния.

Если Π²Ρ‹ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°Π΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ JavaScript, я Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ snap.svg, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ описан ΠΊΠ°ΠΊ «Π² JQuery Π² SVG».

Π’ΠΎΡ‚ коллСкция ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ².

http://snapsvg.io/demos/

Если Π²Ρ‹ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°Π΅Ρ‚Π΅ Π΄Π΅ΠΊΠ»Π°Ρ€Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ элСмСнты SVG Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, ΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… я расскаТу.

Π•Ρ‰Π΅ ΠΎΠ΄Π½ΠΎ прСимущСство SMIL Π½Π°Π΄ JS Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉΒ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ JS Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚, ΠΊΠΎΠ³Π΄Π° SVG встроСн Π² качСствС IMG ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π² качСствС Ρ„ΠΎΠ½Π° изобраТСния Π² CSS. SMIL Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Π² ΠΎΠ±ΠΎΠΈΡ… случаях. Π­Ρ‚ΠΎ большоС прСимущСство, Π½Π° ΠΌΠΎΠΉ взгляд.

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ²

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² для SMIL Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ довольно приличная. Они воспроизводятся Π²ΠΎ всСх Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…,Β ΠΊΡ€ΠΎΠΌΠ΅ IE. ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Ρ‹ΠΉΒ ΠΎΠ±Π·ΠΎΡ€Β ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ²Β Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π² Ρ‚Π°Π±Π»ΠΈΡ†Π΅ совмСстимости Π½Π° caniuseit.

Если Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΡ‚ΡŒ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ для SMIL Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° Π½Π° Π»Π΅Ρ‚Ρƒ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Modernizr. Если SMIL Π½Π΅ поддСрТиваСтся, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ запасной Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ (Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ JavaScript, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€).

Анимация Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² элСмСнта ΠΈΠ· ΠΎΠ΄Π½ΠΎΠ³ΠΎ значСния ΠΊ Π΄Ρ€ΡƒΠ³ΠΎΠΌΡƒ Π² Ρ‚Π΅Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ»ΡŒΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ с ΡƒΠΊΠ°Π·Π°Π½ΠΈΠ΅ΠΌ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠ³ΠΎ состояния: from, by, to, dur ΠΈ fill.

Π’Ρ–Π΄Π΅ΠΎ курси Π·Π° ΡΡ…ΠΎΠΆΠΎΡŽ Ρ‚Π΅ΠΌΠ°Ρ‚ΠΈΠΊΠΎΡŽ:

БтворСння Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ SPA Π· Angular

Π‘Π΅Ρ€Π³Ρ–ΠΉ ΠŸΠ°Ρ‚ΡŒΠΎΡ…Π°

РСализация Transform-ΠΏΠΎΡ‚ΠΎΠΊΠΎΠ² Π² Node.js

ΠžΠ»Π΅ΠΊΡΡ–ΠΉ ΠžΡ€Π»Π΅Π½ΠΊΠΎ

JavaScript Π‘Π°Π·ΠΎΠ²Ρ‹ΠΉ 2015

Π”ΠΌΠΈΡ‚Ρ€ΠΎ ΠžΡ…Ρ€Ρ–ΠΌΠ΅Π½ΠΊΠΎ

Π”Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим с ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ΠΌ ΠΊΡ€ΡƒΠ³Π° ΠΈΠ· ΠΎΠ΄Π½ΠΎΠ³ΠΎ полоТСния Π² Π½ΠΎΠ²ΠΎΠ΅. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ² Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π΅Π³ΠΎ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° сх (ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ опрСдСляСт Ρ… — ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π΅Π³ΠΎ Ρ†Π΅Π½Ρ‚Ρ€Π°).

ΠœΡ‹ собираСмся ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ элСмСнт, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ это. Атрибуты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°ΡŽΡ‚ числовыС значСния ΠΈ Ρ†Π²Π΅Ρ‚Π°, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ . Для получСния списка Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌΠΈ, ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ΡΡŒ ΠΊ этой Ρ‚Π°Π±Π»ΠΈΡ†Π΅:

http://www.w3.org/TR/SVG2/animate.html#AnimationAttributesAndProperties

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠ΅ Π² Ρ‚Π΅Ρ‡Π΅Π½ΠΈΠ΅ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ from, by, to, dur ΠΈ fill. Π’ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ этому, Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ, ΠΊΠΎΠ³Π΄Π° анимация Π΄ΠΎΠ»ΠΆΠ½Π° Π½Π°Ρ‡ΠΈΠ½Π°Ρ‚ΡŒΡΡ с Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠΌ Π½Π°Ρ‡Π°Π»Π°.

Π’ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅, я ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΠ» ΠΊΡ€ΡƒΠ³, Π° Π·Π°Ρ‚Π΅ΠΌ Π²Ρ‹Π·Ρ‹Π²Π°ΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ Π½Π° этом ΠΊΡ€ΡƒΠ³Π΅. Π¦Π΅Π½Ρ‚Ρ€ окруТности пСрСмСщаСтся ΠΈΠ· исходного полоТСния — 500 Π΅Π΄ΠΈΠ½ΠΈΡ†, Π΄ΠΎ 1750 Π΅Π΄ΠΈΠ½ΠΈΡ† вдоль оси Ρ….

ΠΠ°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ установлСно Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΌΡ‹ΡˆΠΈ. Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΊΡ€ΡƒΠ³ Π±ΡƒΠ΄Π΅Ρ‚ Π΄Π²ΠΈΠ³Π°Ρ‚ΡŒΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½Π° Π½Π°ΠΆΠ°Ρ‚Π°.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ это Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΊ Π·Π½Π°Ρ‡Π΅Π½ΠΈΡŽ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, Π° Ρ‚Π°ΠΊΠΆΠ΅. НапримСр, Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‚ = «0s» Π½Π°Ρ‡Π½Π΅Ρ‚ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ, ΠΊΠ°ΠΊ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ страница Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½Π°. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°Π΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ, установив ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ. НапримСр, Π½Π°Ρ‡Π°Ρ‚ΡŒ = «6s» запустит Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ Ρ‡Π΅Ρ€Π΅Π· ΡˆΠ΅ΡΡ‚ΡŒ сСкунды послС Π½Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ.

Атрибут Dur ΠΏΠΎΡ…ΠΎΠΆ Π½Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ-ΠΈΠΌΠΏΡƒΠ»ΡŒΡΠ° Π² CSS.

from — to Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ ΠΏΠΎΡ…ΠΎΠΆΠΈ Π½Π° from to ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… ΠΊΠ°Π΄Ρ€ΠΎΠ² Π² keyframe Π±Π»ΠΎΠΊΠ° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π² CSS:

ΠŸΠΎΠ²Ρ‚ΠΎΡ€ΡΡŽΡ‰ΠΈΠ΅ΡΡ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ с Repeat-Count

Когда Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ воспроизвСсти Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ нСсколько Ρ€Π°Π·, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ это с использованиСм Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° RepeatCount. МоТно ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ, сколько Ρ€Π°Π· Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΠΈΡ‚ΡŒ ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ΅ слово, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ Π±Π΅Π· ΠΊΠΎΠ½Ρ†Π° ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒ. Π’Π°ΠΊ Ρ‡Ρ‚ΠΎ, Ссли ΠΌΡ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Π»ΠΈ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΠΈΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ Π²ΠΈΠ΄Π° ΠΊΡ€ΡƒΠ³Π° Π² Ρ‚Π΅Ρ‡Π΅Π½ΠΈΠ΅ Π΄Π²ΡƒΡ… Ρ€Π°Π·, ΠΊΠΎΠ΄ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ:

Π£ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ значСниями ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… ΠΊΠ°Π΄Ρ€ΠΎΠ² Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ: keyTimes ΠΈ values. Β Π’ CSS, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π·Π°Π΄Π°Ρ‚ΡŒ значСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Π·ΡΡ‚ΡŒ Π² ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ Ρ€Π°ΠΌΠΊΠΈ Π²ΠΎ врСмя Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.

0%, 40 % , 80 % ΠΈ 100% ΡΠ²Π»ΡΡŽΡ‚ΡΡ ΠΊΠ°Π΄Ρ€Π°ΠΌΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.

Анимация вдоль ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… ΠΏΡƒΡ‚Π΅ΠΉ:

Π₯ΠΎΡ€ΠΎΡˆΠΈΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Ρ‚Π°ΠΊΠΈΡ… Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ здСсь

Π‘Π΅Π·ΠΊΠΎΡˆΡ‚ΠΎΠ²Π½Ρ– Π²Π΅Π±Ρ–Π½Π°Ρ€ΠΈ Π·Π° ΡΡ…ΠΎΠΆΠΎΡŽ Ρ‚Π΅ΠΌΠ°Ρ‚ΠΈΠΊΠΎΡŽ:

Tips&Tricks: How to Survive Meetings with Foreign Customers

Оксана Π‘ΠΊΠΎΡ€ΠΎΠΌΠ½Π°

БтворСння web ΡˆΠ°Ρ…Ρ–Π² Π½Π° HTML, JavaScript Ρ‚Π° PHP

Π„Π²Π³Π΅Π½ Волосатов

ВСрстка Π»Π΅Π½Π΄ΠΈΠ½Π³Ρƒ Π· використанням Gulp, JavaScript Ρ‚Π° HTML/CSS. Частина 1

Ілля ΠšΡ€Π°Ρ”Π²ΡΡŒΠΊΠΈΠΉ

http://codepen. io/rossfenrick/pen/gpzJzz

Π’Π°ΠΊ ΠΆΠ΅ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π΅ΡΡ‚ΡŒ Π½Π° Ρ…Π°Π±Ρ€Π΅

http://habrahabr.ru/post/207908/

Ѐункция ΠΏΡ€ΠΎΡ…ΠΎΠ΄Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ

Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ Π²Π°ΠΆΠ½Ρ‹ΠΉ элСмСнт β€” это функция ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ΡŒ анимация. Π‘Ρ€Π΅Π΄ΠΈ всСм извСстных Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΌΡ‹ Π·Π½Π°Π΅ΠΌ ease, ease-in, ease-out, linear. Но Ссли Π’Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ свою Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ прохоТдСния Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, Ρ‚ΠΎ Π²Π°ΠΌ сюда

http://cubic-bezier.com/

И напослСдок Π»ΡƒΡ‡ΡˆΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΎΡ‚ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ просто Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚ΠΎΡ€Π²Π°Ρ‚ΡŒ Π³Π»Π°Π·

ΠŸΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ ΠΈ Ρƒ вас всС получится!

ОписаниС ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ стандартных Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ SVG

Π”ΠΎΠΌΠΈΠ½ΠΈΡ€ΡƒΡŽΡ‰Π΅ΠΉ ΠΏΡ€ΠΈΡ‡ΠΈΠ½ΠΎΠΉ появлСния этого Π±Π»ΠΎΠ³Π° стало нСзаслуТСнноС Π·Π°Π±Π²Π΅Π½ΠΈΠ΅ Π½Π° Ρ†Π΅Π»Ρ‹Ρ… Π΄Π΅ΡΡΡ‚ΡŒ Π»Π΅Ρ‚ языка Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΠΎΠΉ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ – SVG (Scalable Vector Graphics), входящСго Π² подмноТСство Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅ΠΌΠΎΠ³ΠΎ языка Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ XML.
Π‘Ρ‚Π°Π½Π΄Π°Ρ€Ρ‚ SVG 1.0 Π±Ρ‹Π» принят Π² качСствС спСцификации ΠšΠΎΠ½ΡΠΎΡ€Ρ†ΠΈΡƒΠΌΠΎΠΌ ВсСмирной ΠΏΠ°ΡƒΡ‚ΠΈΠ½Ρ‹ (W3C) Π² сСнтябрС 2001 Π³. Π‘Ρ‚Π°Π½Π΄Π°Ρ€Ρ‚ SVG 1.1 ΠΈ Π΅Π³ΠΎ вСрсии SVG mobile profiles (SVG Basic and SVG Tiny) Π±Ρ‹Π»ΠΈ приняты консорциумом Π² качСствС Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΈ Π² январС 2003 Π³.
БСйчас вСдутся Ρ€Π°Π±ΠΎΡ‚Ρ‹ ΠΏΠΎ созданию стандарта SVG 2.0

ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ прСимущСства Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° SVG.

Π― Π½Π΅ Π±ΡƒΠ΄Ρƒ Π΄ΠΎΠ»Π³ΠΎ Ρ€Π°ΡΠΏΡ€ΠΎΡΡ‚Ρ€Π°Π½ΡΡ‚ΡŒΡΡ ΠΎ прСимущСствах Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ ΠΏΠ΅Ρ€Π΅Π΄ растровой Π² Π²Π΅Π±Π΄ΠΈΠ·Π°ΠΉΠ½Π΅, Π·Π°ΠΌΠ΅Ρ‡Ρƒ лишь, Ρ‡Ρ‚ΠΎ, ΠΎΠ΄Π½Π°ΠΆΠ΄Ρ‹ созданный, Ρ„Π°ΠΉΠ» Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ SVG ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ Ρ…ΠΎΡ€ΠΎΡˆΠΎ выглядит Π±Π΅Π· ΠΏΠΎΡ‚Π΅Ρ€ΠΈ качСства ΠΈ Π½Π° мобильном устройствС ΠΈ Π½Π° станционарном ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€Π΅ домашнСго ПК.
Π¨Π°ΠΏΠΊΠ° Π΄Π°Π½Π½ΠΎΠ³ΠΎ сайта Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½Π° Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ SVG, ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒ ΠΎΠΊΠ½ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° Π΄ΠΎ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹Ρ… Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ², ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° Π½Π° β€œΠ»Π΅Ρ‚Ρƒβ€ Π±ΡƒΠ΄Π΅Ρ‚ Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Ρ‚ΡŒΡΡ.
SVG – это двухмСрная Π³Ρ€Π°Ρ„ΠΈΠΊΠ° ΠΈ Ρ‚Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ это тСкстовый Ρ„ΠΎΡ€ΠΌΠ°Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ Π² Π±Π»ΠΎΠΊΠ½ΠΎΡ‚Π΅ ΠΈΠ»ΠΈ просто Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ Π² Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Ρ… Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π°Ρ…: Incscape , Adobe illustrator, CorelDRAW

БСсконСчноС ΠΏΠΎΠ»ΠΎΡ‚Π½ΠΎ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° svg.

Π˜Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ происходит Ρ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠ³ΠΎ изобраТСния.
Π”ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° SVG – это Π΄Π²ΡƒΡ…ΠΌΠ΅Ρ€Π½Ρ‹ΠΉ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ бСсконСчныС ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹, ΠΊΠ°ΠΊ Π² ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΌ, Ρ‚Π°ΠΊ ΠΈ Π² ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠΌ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΈ ΠΏΠΎ осям X ΠΈ Y. Π’Π°ΠΊΠΆΠ΅ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ SVG ΠΈΠΌΠ΅Π΅Ρ‚ Π΄Π²Π΅ области просмотра: viewport – систСмная ΠΎΠ±Π»Π°ΡΡ‚ΡŒ просмотра ΠΈ viewBox – ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠ°Ρ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ просмотра, ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π°Ρ‡Π°Π»Π° систСмных ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚ viewport, ΠΌΠΎΠΆΠ΅Ρ‚ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒΡΡ собствСнной, ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠΉ систСмой ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚. Π”Ρ€ΡƒΠ³ΠΈΠΌΠΈ словами ΠΎΠΊΠ½ΠΎ просмотра viewBox, ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Ρ‘Π½ΠΎ Π² любоС мСсто Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° SVG, ΠΏΡ€ΠΈ этом бСрСтся Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ изобраТСния ΠΏΠΎΠ΄ Π½ΠΈΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ послС процСсса согласования ΠΌΠ΅ΠΆΠ΄Ρƒ viewBox ΠΈ viewport, возвращаСтся ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎ Π² ΡΠΈΡΡ‚Π΅ΠΌΠ½ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ просмотра viewport, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π²ΠΈΠ΄ΠΈΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ это свойство ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ€Π³Π°Π½ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΡƒΡŽ ΠΈΠ»ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΡƒΡŽ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΡƒ изобраТСния, мСняя ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚ viewBox.

ΠŸΡ€ΠΈ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ ΠΎΠΊΠ½Π° просмотра viewbox ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Ρ‚ΡŒ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ изобраТСния Π² систСмной области просмотра ΠΈΠ»ΠΈ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Ρ‚ΡŒ Π΅Π³ΠΎ ΠΏΡ€ΠΈ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° viewbox.
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ рСализуСтся эффСкт Π»ΡƒΠΏΡ‹. Π‘ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ эти процСссы Ρ€Π°Π·ΠΎΠ±Ρ€Π°Π½Ρ‹ Π² ΡΡ‚Π°Ρ‚ΡŒΠ΅: Врансформация ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ SVG ΠΏΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ² Viewbox.

Β 

ВзаимодСйствиС SVG, XML с HTML, CSS, Jscript

Π’ SVG, ΠΊΠ°ΠΊ ΠΈ Π² HTML ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ ссылки Π½Π° внСшниС рСсурсы. Но Ссли Π² HTML ΠΎΠ΄Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠ»ΡƒΠΆΠΈΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для ΠΎΠ΄Π½ΠΎΠΉ внСшнСй ссылки, Ρ‚ΠΎ Π² SVG Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ сколько ΡƒΠ³ΠΎΠ΄Π½ΠΎ Π²Π½Π΅ΡˆΠ½ΠΈΡ… ссылок . ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° кликабСльна.
Π’Π½ΡƒΡ‚Ρ€ΡŒ HTML страницы Π»Π΅Π³ΠΊΠΎ встраиваСтся ΠΊΠΎΠ΄ SVG Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° ΠΈΠ»ΠΈ Ρ†Π΅Π»ΠΈΠΊΠΎΠΌ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ внСшний SVG Ρ„Π°ΠΉΠ». МоТно Π½Π°ΠΎΠ±ΠΎΡ€ΠΎΡ‚, Π²Π½ΡƒΡ‚Ρ€ΠΈ SVG Ρ„Π°ΠΉΠ»Π° Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ΠΊΠΎΠ΄ HTML Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ‚Π΅Π³ΠΎΠ² foreignObject. ΠŸΠΎΠ»ΡƒΡ‡Π°ΡŽΡ‚ΡΡ интСрСсныС эффСкты: Π’Π½ΡƒΡ‚Ρ€ΠΈ SVG Ρ„Π°ΠΉΠ»Π° находится Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‰ΠΈΠΉ внСшний HTML сайт. К SVG Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρƒ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ внСшниС Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй CSS 2.0, Ρ‡Ρ‚ΠΎ позволяСт ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ сразу нСсколькими Ρ„Π°ΠΉΠ»Π°ΠΌΠΈ *.svg. Π’Π°ΠΊΠΆΠ΅ Π²ΠΏΠΎΠ»Π½Π΅ допустимо ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ стилСй Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ„Π°ΠΉΠ»Π° *.svg Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ‚Π΅Π³ΠΎΠ² style ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ стили нСпосрСдствСнно Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Π½Ρ‹Ρ… строк Ρ„ΠΈΠ³ΡƒΡ€ ΠΈ ΠΏΡƒΡ‚Π΅ΠΉ.
SVG, ΠΊΠ°ΠΊ любой основанный Π½Π° XML Ρ„ΠΎΡ€ΠΌΠ°Ρ‚, позволяСт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для Π΅Π³ΠΎ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ трансформации (XSLT).
ΠŸΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΡƒΡ XML-Π΄Π°Π½Π½Ρ‹Π΅ Π² SVG с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ простого XSL, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ графичСскоС прСдставлСниС тСкстовых Π΄Π°Π½Π½Ρ‹Ρ…, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ, ΠΊΡ€ΡƒΠ³ΠΎΠ²Ρ‹Π΅ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹, гистограммы ΠΈ Ρ‚.Π΄.

Анимация ΠΈ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ SVG.

Анимация Π² SVG осущСствляСтся ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ языка SMIL (Synchronized Multimedia Integration Language). Π’Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ скриптовыС языки Π½Π° основС спСцификации ECMAScript β€” это встраиваСмый Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅ΠΌΡ‹ΠΉ язык программирования.
Π’ΠΎ Π΅ΡΡ‚ΡŒ всё находится Π² ΠΎΠ΄Π½ΠΎΠΌ мСстС, Π²Π½ΡƒΡ‚Ρ€ΠΈ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° SVG, поэтому Π½Π΅Ρ‚ нСобходимости для ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ Π²Π½Π΅ΡˆΠ½ΠΈΡ… Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ.
На ΠΊΠ°ΠΆΠ΄ΡƒΡŽ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΡƒΡŽ Ρ„ΠΈΠ³ΡƒΡ€Ρƒ ΠΈΠ»ΠΈ Π½Π° Ρ†Π΅Π»ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ событий (ΠΊΠ»ΠΈΠΊ, Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΌΡ‹ΡˆΠΊΠΈ, Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ клавиши ΠΈ Ρ‚.Π΄), Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΌΠΎΠΆΠ΅Ρ‚ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ рисунком. НавСдитС курсор ΠΌΡ‹ΡˆΠΊΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒβ€œStart” Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ слСва.
По ΡΠΎΠ±Ρ‹Ρ‚ΠΈΡŽ mouseover Π½Π° этой ΠΊΠ½ΠΎΠΏΠΊΠ΅ начнСтся анимация ΠΏΠΎ ΠΊΠΎΠΌΠ°Π½Π΄Π΅ begin=”startButton. mouseover” – Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π½Ρ‹Ρ… ΡˆΠ°Ρ€ΠΈΠΊΠΎΠ² ΠΏΠΎ ΠΊΡ€ΠΈΠ²ΠΎΠ»ΠΈΠ½Π΅ΠΉΠ½ΠΎΠΌΡƒ ΠΏΡƒΡ‚ΠΈ. Закончится анимация Π»ΠΈΠ±ΠΎ Ρ‡Π΅Ρ€Π΅Π· Π·Π°Π΄Π°Π½Π½Ρ‹Π΅ Π² ΠΊΠΎΠ΄Π΅ 16 сСкунд, Π»ΠΈΠ±ΠΎ Π² любой ΠΌΠΎΠΌΠ΅Π½Ρ‚ ΠΏΠΎ навСдСнию курсора ΠΌΡ‹ΡˆΠΊΠΈ Π½Π° Ρ†Π²Π΅Ρ‚Π½Ρ‹Π΅ Ρ€Π°Π΄ΠΈΠΎΠΊΠ½ΠΎΠΏΠΊΠΈ β€œStop”. ΠŸΡ€ΠΈ этом каТдая Ρ€Π°Π΄ΠΈΠΎΠΊΠ½ΠΎΠΏΠΊΠ° управляСт своим ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠΌ ΡΠΎΠ²ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠΌ ΠΏΠΎ Ρ†Π²Π΅Ρ‚Ρƒ. На рисункС Π½ΠΈΠΆΠ΅ анимация начинаСтся ΠΈ заканчиваСтся ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ клавиши ΠΌΡ‹ΡˆΠΊΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ GO ΠΈ STOP. Π’ этом случаС Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ событиС click. Команда Π½Π° запуск Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ – begin=”gO.click” ΠΈ соотвСтствСнно остановка – end=”stop.click”
Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ – плавная отрисовка ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ с нуля Π΄ΠΎ ΠΏΠΎΠ»Π½ΠΎΠ³ΠΎ изобраТСния.

Π£ΠΆΠ΅ встроСнныС Π² SVG языки программирования ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ довольно слоТныС сцСнарии Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. Но, Π² Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ этому Π΅ΡΡ‚ΡŒ Π΅Ρ‰Π΅ Π±ΠΎΠ»Π΅Π΅ ΠΌΠΎΡ‰Π½Ρ‹Π΅ срСдства для Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ интСрактивности Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ ΠΈ Π΅Π΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ – это внСшниС Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ сторонних Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ²: D3.js, BonsaiJS, Svg.js, Snapsvg.js

Π•Ρ‰Π΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ⇛

НСдостатки SVG Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°

  • Π‘ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠ΅ΠΌ количСства ΠΌΠ΅Π»ΠΊΠΈΡ… Π΄Π΅Ρ‚Π°Π»Π΅ΠΉ Π² ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ, быстрСС растёт Ρ€Π°Π·ΠΌΠ΅Ρ€ Ρ„Π°ΠΉΠ»Π° SVG-Π΄Π°Π½Π½Ρ‹Ρ…. ΠŸΡ€Π΅Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ случай β€” ΠΊΠΎΠ³Π΄Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ прСдставляСт собой Π±Π΅Π»Ρ‹ΠΉ ΡˆΡƒΠΌ. Π’ этом случаС SVG Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π΅ Π΄Π°Ρ‘Ρ‚ Π½ΠΈΠΊΠ°ΠΊΠΈΡ… прСимущСств Π² Ρ€Π°Π·ΠΌΠ΅Ρ€Π΅ Ρ„Π°ΠΉΠ»Π°, Π½ΠΎ Π΄Π°ΠΆΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΏΡ€ΠΎΠΈΠ³Ρ€Ρ‹Ρˆ ΠΏΠΎ ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡŽ ΠΊ растровому Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρƒ. На ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅, SVG становится Π½Π΅Π²Ρ‹Π³ΠΎΠ΄Π΅Π½ ΡƒΠΆΠ΅ Π·Π°Π΄ΠΎΠ»Π³ΠΎ Π΄ΠΎ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π΄ΠΎΠΉΠ΄Ρ‘Ρ‚ Π΄ΠΎ стадии Π±Π΅Π»ΠΎΠ³ΠΎ ΡˆΡƒΠΌΠ°.
  • Π’Ρ€ΡƒΠ΄Π½ΠΎΡΡ‚ΡŒ использования Π² ΠΊΡ€ΡƒΠΏΠ½Ρ‹Ρ… картографичСских прилоТСниях ΠΈΠ·-Π·Π° Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ для ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ³ΠΎ отобраТСния малСнькой части изобраТСния Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ Ρ†Π΅Π»ΠΈΠΊΠΎΠΌ.
  • Π’ настоящСС врСмя SVG Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ примСняСтся Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅ ΡΡ€Π°Π²Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΌΠ°Π»ΠΎ, ΠΈΠ·-Π·Π° нСдостаточной кроссбраузСрности. Π›ΡƒΡ‡ΡˆΠ΅ всСго обстоят Π΄Π΅Π»Π° Ρƒ Mozilla Firefox со встроСнным просмотрщиком SVG, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Π΅Π΅ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ находятся Π² Ρ€Π°Π±ΠΎΡ‡Π΅ΠΉ Π³Ρ€ΡƒΠΏΠΏΠ΅ ΠšΠΎΠ½ΡΠΎΡ€Ρ†ΠΈΡƒΠΌΠ° ВсСмирной ΠΏΠ°ΡƒΡ‚ΠΈΠ½Ρ‹ (W3C) ΠΏΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ ΠΈ Π²Π½Π΅Π΄Ρ€Π΅Π½ΠΈΡŽ стандарта SVG. Π₯ΡƒΠΆΠ΅ всСго Π΄Π΅Π»Π° ΠΏΠΎ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° SVG Ρƒ Microsoft, которая ΠΏΠΎΠΊΠΈΠ½ΡƒΠ»Π° Π³Ρ€ΡƒΠΏΠΏΡƒ 2003 Π³. Для Internet Explorer – Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌ Adobe SVG Viewer (ASV). Π‘ 9 вСрсии IE частично ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ SVG.
    Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ Apple Safari, Google Chrome Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ SVG, Π½ΠΎ Π½Π΅ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ SVG – это большая спСцификация (Π²Π΄Π²ΠΎΠ΅ большС HTML 4.01), ΠΈΠΌΠ΅Π½Π½ΠΎ поэтому Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² Π²Π½Π΅Π΄Ρ€ΡΡŽΡ‚ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ постСпСнно, ΠΎΡ‚ вСрсии ΠΊ вСрсии. Но Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ всС Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ соврСмСнных Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² Π·Π°ΡΠ²Π»ΡΡŽΡ‚, Ρ‡Ρ‚ΠΎ Π·Π° Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠΌ SVG Π±ΡƒΠ΄ΡƒΡ‰Π΅Π΅ Π² области Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ Π²Π΅Π±Π΄ΠΈΠ·Π°ΠΉΠ½Π°.


Β 

Β 

UPD. Π”ΠΎΠ±Π°Π²Π»Π΅Π½ Π½ΠΎΠ²Ρ‹ΠΉ Ρ€Π°Π·Π΄Π΅Π» ΠΎΠ½Π»Π°ΠΉΠ½ Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€Ρ‹ SVG ΠΊΠΎΠ΄Π° path.
ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π°Ρ: Π‘Ρ‚Ρ€ΡƒΠΊΡ‚ΡƒΡ€Π° SVG Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° ⇛

SVGator: бСсплатный ΠΎΠ½Π»Π°ΠΉΠ½-Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ SVG Animation Creator

ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ для сСбя ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΡƒΡŽ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡƒ SVG-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ β€” Π°Π½ΠΈΠΌΠΈΡ€ΡƒΠΉΡ‚Π΅ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΈ, Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΡ‹, Π·Π½Π°Ρ‡ΠΊΠΈ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅. Навыки программирования Π½Π΅ Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ΡΡ.

Π‘ΠΎΡΡ€Π΅Π΄ΠΎΡ‚ΠΎΡ‡ΡŒΡ‚Π΅ΡΡŒ Π½Π° ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ

Π˜Π½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ понятный интСрфСйс
SVGator β€” это ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½Ρ‹ΠΉ Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ SVG-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, оснащСнный всСми Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹ΠΌΠΈ инструмСнтами: ΠΏΡ€ΠΎΠ΄ΡƒΠΌΠ°Π½Π½Ρ‹ΠΉ, ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ понятный интСрфСйс прямо Ρƒ вас ΠΏΠΎΠ΄ Ρ€ΡƒΠΊΠΎΠΉ.

Быстрый Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ процСсс
ΠŸΠΎΠ΄Π½ΠΈΠΌΠΈΡ‚Π΅ свой SVG Π½Π° ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ Π½ΠΎΠ²Ρ‹ΠΉ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ, Π½Π΅ написав Π½ΠΈ ΠΎΠ΄Π½ΠΎΠΉ строки ΠΊΠΎΠ΄Π°. Π‘ΠΎΡΡ€Π΅Π΄ΠΎΡ‚ΠΎΡ‡ΡŒΡ‚Π΅ΡΡŒ Π½Π° создании Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ; SVGator позаботится ΠΎΠ± ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠΌ.

ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ для сСбя возмоТности экспорта SVGator

Экспорт Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ для Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π°,
для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств ΠΈ Ρ‚. Π΄. GIF

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ дСмонстрационныС Ρ„Π°ΠΉΠ»Ρ‹.

Π‘ΠΎΠ·Π΄Π°Π²Π°ΠΉΡ‚Π΅ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ SVG-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ

УправляйтС запуском
НастройтС Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ Π½Π° запуск ΠΏΠΎ Ρ‰Π΅Π»Ρ‡ΠΊΡƒ, ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ ΠΈ Ρ‚. Π΄., Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ SVG-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΡƒΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ инструмСнта Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ всСгда Π½Π° расстоянии ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΊΠ»ΠΈΠΊΠ°.

Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅, ΠΊΠ°ΠΊ ΠΎΠ½Π° заканчиваСтся
УправляйтС Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ происходит ΠΏΡ€ΠΈ Π²Ρ‚ΠΎΡ€ΠΎΠΌ Ρ‰Π΅Π»Ρ‡ΠΊΠ΅ ΠΌΡ‹ΡˆΠΈ ΠΈΠ»ΠΈ ΠΏΡ€ΠΈ ΠΎΡ‚Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΌΡ‹ΡˆΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π²Π°ΡˆΡƒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠΉ.

Svgator’s Player


API Support

ΠŸΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ ΠŸΠΎΠ»Π½Ρ‹ΠΉ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒ Π½Π°Π΄ вашими анимациями с нашим ΠΈΠ³Ρ€ΠΎΠΊΠΎΠΌ API

Π‘ΠΌ. Π”Π΅ΠΌΠΎ

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ всС Π°Π½ΠΈΠΌΠ°Ρ‚ΠΎΡ€Ρ‹

БСсконСчныС возмоТности
. Π£ΡΠΈΠ»ΡŒΡ‚Π΅ свой SVG Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ путями, трансформациями, Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°ΠΌΠΈ ΠΈΠ»ΠΈ Ρ†Π²Π΅Ρ‚Π½Ρ‹ΠΌΠΈ анимациями.

ΠžΠ±Ρ‚Ρ€Π°Π²ΠΎΡ‡Π½Ρ‹Π΅ маски
Π‘Π΄Π΅Π»Π°ΠΉΡ‚Π΅ Π²Π°ΡˆΡƒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ‡Π΅Ρ‚ΠΊΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… Ρ„ΠΈΠ³ΡƒΡ€ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΎΠ±Ρ‚Ρ€Π°Π²ΠΎΡ‡Π½Ρ‹Ρ… масок. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ самыС ΠΏΠ΅Ρ€Π΅Π΄ΠΎΠ²Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ для SVG-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.

ΠŸΡ€ΠΎΡΡ‚ΠΎΠ΅ созданиС Π»ΠΈΠ½Π΅ΠΉΠ½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ

Анимация свойств ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ
ΠŸΡ€ΠΈΠ΄Π°ΠΉΡ‚Π΅ пикантности Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠΌΡƒ SVG с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Π½ΠΈΠΌΠ°Ρ‚ΠΎΡ€ΠΎΠ² Stroke Offset ΠΈ Stroke Dash. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ эти ΠΌΠΎΡ‰Π½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ для рукописного Π²Π²ΠΎΠ΄Π°, ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ рисования,
ΠΈΠ»ΠΈ эффСктов самостирания.

Π‘Ρ‚Π°Π½ΡŒΡ‚Π΅ профСссионалом прямо сСйчас

Π£Ρ‡Π΅Π±Π½ΠΈΠΊΠΈ всСгда ΠΏΠΎΠ΄ Ρ€ΡƒΠΊΠΎΠΉ
Π›Π΅Π³ΠΊΠΎ приступайтС ΠΊ Ρ€Π°Π±ΠΎΡ‚Π΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠΎΡˆΠ°Π³ΠΎΠ²Ρ‹Ρ… руководств ΠΈΠ»ΠΈ ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°ΠΉΡ‚Π΅ инструкции Π² нашСм справочном Ρ†Π΅Π½Ρ‚Ρ€Π΅.

ВсСгда Π½Π° расстоянии ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΊΠ»ΠΈΠΊΠ°
НСт нСобходимости Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ΅ обСспСчСниС ΠΈΠ»ΠΈ ΠΏΠ»Π°Π³ΠΈΠ½ Π½Π° своС устройство. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°Ρ‡Π°Ρ‚ΡŒ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ SVG ΠΎΠ½Π»Π°ΠΉΠ½ ΠΈΠ· любого мСста ΠΈ Π² любоС врСмя.

Экспорт ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Ρ„Π°ΠΉΠ»Π° SVG

ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ ΠΈ эффСктивный
Пока Π²Ρ‹ сосрСдоточСны Π½Π° творчСской Ρ€Π°Π±ΠΎΡ‚Π΅, SVGator ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°ΠΌ ΡΠ³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ ΡƒΠΏΠ°ΠΊΠΎΠ²Π°Ρ‚ΡŒ вСсь ΠΊΠΎΠ΄ Π² ΠΎΠ΄ΠΈΠ½ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ Ρ„Π°ΠΉΠ» SVG, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ смоТСтС ΡΠΊΡΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π² ΠΊΠΎΠ½Ρ†Π΅.

CSS ΠΈΠ»ΠΈ JavaScript
Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ CSS ΠΈΠ»ΠΈ JavaScript Π² качСствС Ρ‚ΠΈΠΏΠ° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ!

АнимируйтС SVG ΠΊΠ°ΠΊ Π½ΠΈΠΊΠΎΠ³Π΄Π° Ρ€Π°Π½ΡŒΡˆΠ΅

ΠŸΠΎΠ»Π½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ
ΠŸΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ ΠΏΠΎΠ»Π½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒ Π½Π°Π΄ своСй Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ с функциями замСдлСния: ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ прСдустановки ΠΈΠ»ΠΈ настройтС Π³Ρ€Π°Ρ„ΠΈΠΊ замСдлСния.

Π‘Π΅ΡΡˆΠΎΠ²Π½Ρ‹ΠΉ Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ процСсс
Π’ΠΎΡ‡Π½ΠΎ настройтС врСмя, ΠΏΡƒΡ‚ΡŒ ΠΈ ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ SVG. ДобавляйтС, удаляйтС, пСрСтаскивайтС ΠΈΠ»ΠΈ Π΄ΡƒΠ±Π»ΠΈΡ€ΡƒΠΉΡ‚Π΅ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ ΠΊΠ°Π΄Ρ€Ρ‹ Π² Ρ‚Π΅Ρ‡Π΅Π½ΠΈΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… ΠΌΠΈΠ½ΡƒΡ‚.

НачнитС Ρ€Π°Π±ΠΎΡ‚Ρƒ с SVGator сСгодня

ΠŸΡ€ΠΈΡΡ‚ΡƒΠΏΠΈΡ‚ΡŒ ΠΊ Ρ€Π°Π±ΠΎΡ‚Π΅ Π½Π°Π΄ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠΌ SVG-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π½Π΅ составит Ρ‚Ρ€ΡƒΠ΄Π°, нСзависимо ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, ΡΠ²Π»ΡΠ΅Ρ‚Π΅ΡΡŒ Π»ΠΈ Π²Ρ‹ Π½ΠΎΠ²ΠΈΡ‡ΠΊΠΎΠΌ ΠΈΠ»ΠΈ ΠΎΠΏΡ‹Ρ‚Π½Ρ‹ΠΌ профСссионалом.

Π—Π°Ρ€Π΅Π³ΠΈΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ

БСсплатный инструмСнт для Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ SVG ΠΎΠ½Π»Π°ΠΉΠ½

Π”Π°ΠΉΡ‚Π΅ волю своСму Ρ‚Π°Π»Π°Π½Ρ‚Ρƒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ³ΠΎ обСспСчСния для Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ SVG, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ всСгда ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°ΠΌ! АнимируйтС SVG ΠΏΡ€ΠΎΡ‰Π΅, Ρ‡Π΅ΠΌ ΠΊΠΎΠ³Π΄Π°-Π»ΠΈΠ±ΠΎ, Π±Π΅Π· ΠΊΠ°ΠΊΠΈΡ…-Π»ΠΈΠ±ΠΎ Π½Π°Π²Ρ‹ΠΊΠΎΠ² программирования, ΠΈ экспортируйтС ΠΎΠ΄ΠΈΠ½ Ρ„Π°ΠΉΠ» SVG, Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΉ ΠΊ использованию.

ΠŸΠžΠŸΠ ΠžΠ‘Π£Π™Π’Π• БЕЙЧАБ

ΠšΡ€Π΅Π΄ΠΈΡ‚Π½Π°Ρ ΠΊΠ°Ρ€Ρ‚Π° Π½Π΅ трСбуСтся

Π’Π°Ρˆ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ SVG

Π‘ΠΎΠ·Π΄Π°Π½ΠΎ ΠΈ протСстировано Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°ΠΌΠΈ

ΠŸΠ»Π°Π²Π½Ρ‹Π΅ ΠΈ Π»Π΅Π³ΠΊΠΈΠ΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ SVG

ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ экспорта ΠΎΠ΄Π½ΠΈΠΌ Ρ‰Π΅Π»Ρ‡ΠΊΠΎΠΌ ΠΌΡ‹ΡˆΠΈ

9000 2 ΠŸΡ€ΠΎΠ΄ΡƒΠΌΠ°Π½Π½Ρ‹ΠΉ ΠΎΠ½Π»Π°ΠΉΠ½-Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ SVG, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±Π΅Π· ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π²ΠΎ всСх Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…. Π˜Π½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ понятный интСрфСйс, Ρ‚ΠΎΡ‡Π½Ρ‹Π΅ инструмСнты рСдактирования ΠΈ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π½Π°Π±ΠΎΡ€ инструмСнтов для Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.

Π‘ΠΎΠ·Π΄Π°Π²Π°ΠΉΡ‚Π΅ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Π΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΎΡ‚ Π½Π°Ρ‡Π°Π»Π° Π΄ΠΎ ΠΊΠΎΠ½Ρ†Π° Π² ΠΎΠ΄Π½ΠΎΠΌ инструмСнтС Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ SVG ΠΈ экспортируйтС Ρ„Π°ΠΉΠ» нСбольшого Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒΡΡ Π½Π° любом экранС, Π½Π΅ утяТСляя ваш Π²Π΅Π±-сайт.

Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ интСрактивности ΠΊ SVG-анимациям ΠΏΠ΅Ρ€Π΅Π΄ экспортом ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°: Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ запуск ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ, ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΈΠ»ΠΈ ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅.

Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Javascript ΠΈΠ»ΠΈ CSS Π² качСствС Ρ‚ΠΈΠΏΠ° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.

ΠŸΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹, созданныС с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ SVGator

Π’Π΄ΠΎΡ…Π½ΠΎΠ²ΠΈΡ‚Π΅ΡΡŒ ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΠΈΠΌΠΈ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹ΠΌΠΈ изобраТСниями, созданными нашим постоянно растущим сообщСством. SVGator внСс свой Π²ΠΊΠ»Π°Π΄ Π² тысячи ΡƒΡΠΏΠ΅ΡˆΠ½Ρ‹Ρ… дизайнСрских ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² ΠΈ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°Π΅Ρ‚ свою миссию ΠΏΠΎ ΠΏΠΎΠΎΡ‰Ρ€Π΅Π½ΠΈΡŽ ΡˆΠΈΡ€ΠΎΠΊΠΎΠ³ΠΎ использования SVG.

ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ для сСбя лСгкодоступный инструмСнт Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ SVG

ΠΠ°ΡΠ»Π°ΠΆΠ΄Π°ΠΉΡ‚Π΅ΡΡŒ свСрхгладкой ΠΎΠ½Π»Π°ΠΉΠ½-ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΎΠΉ для Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ SVG со Π·Π½Π°ΠΊΠΎΠΌΡ‹ΠΌΠΈ инструмСнтами рСдактирования Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ ΠΈ ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚Ρ‹ΠΌΠΈ Π°Π½ΠΈΠΌΠ°Ρ‚ΠΎΡ€Π°ΠΌΠΈ.

Π‘ΠΎΠ·Π΄Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΡƒΡŽ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΡƒΡŽ Π³Ρ€Π°Ρ„ΠΈΠΊΡƒ ΠΈ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½ΡƒΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ Π±Π΅Π· написания Π΅Π΄ΠΈΠ½ΠΎΠΉ строчки ΠΊΠΎΠ΄Π°. Π£ΡΠΊΠΎΡ€ΡŒΡ‚Π΅ свой Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ процСсс с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ понятного ΠΈ ΡƒΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ интСрфСйса, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ всС, ΠΎΡ‚ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠΎΠ² ΠΈ Π·Π½Π°Ρ‡ΠΊΠΎΠ² Π΄ΠΎ слоТных ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΉ ΠΈ ΠΈΠ·ΠΎΡ‰Ρ€Π΅Π½Π½ΠΎΠΉ Π»ΠΈΠ½Π΅ΠΉΠ½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. ΠšΡ€ΠΈΠ²Π°Ρ обучСния Π±Π»ΠΈΠ·ΠΊΠ° ΠΊ Π½ΡƒΠ»ΡŽ!


ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ бСсплатный ΠΎΠ½Π»Π°ΠΉΠ½-Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ SVG

SVGator Π΄Π΅Π»Π°Π΅Ρ‚ процСсс создания Π΅Ρ‰Π΅ ΠΏΡ€ΠΎΡ‰Π΅, прСдоставляя ΠΏΠΎΠ»Π½ΠΎΡ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΎΠ½Π»Π°ΠΉΠ½-Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ SVG. Благодаря этому Π²Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ½Ρ‹ Π½ΠΈΠΊΠ°ΠΊΠΈΠ΅ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ инструмСнты для создания вашСго Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ SVG-Ρ„Π°ΠΉΠ»Π° ΠΎΡ‚ Π½Π°Ρ‡Π°Π»Π° Π΄ΠΎ ΠΊΠΎΠ½Ρ†Π°.

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Ρ‚ΠΎΡ‡Π½ΠΎΠ΅ ΠΏΠ΅Ρ€ΠΎ, создавайтС ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠΈ, ΠΊΡ€ΡƒΠ³ΠΈ, ΠΌΠ½ΠΎΠ³ΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠΈ ΠΈΠ»ΠΈ Π·Π²Π΅Π·Π΄Ρ‹, Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΡƒΠΉΡ‚Π΅ составныС Ρ„ΠΈΠ³ΡƒΡ€Ρ‹ ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ΡΡŒ постоянно растущСй Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΎΠΉ рСсурсов. АнимируйтС свои элСмСнты, Π²Ρ‹Π±Ρ€Π°Π² Π°Π½ΠΈΠΌΠ°Ρ‚ΠΎΡ€Π° ΠΈ настроив ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ ΠΊΠ°Π΄Ρ€Ρ‹ Π½Π° Π²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠΉ шкалС, Π² Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ ΠΊΠΎΠ΄ автоматичСски гСнСрируСтся Π² Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠΌ Ρ€Π΅ΠΆΠΈΠΌΠ΅.

Π‘ΠΎΠ·Π΄Π°Π²Π°ΠΉΡ‚Π΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ Π²Ρ‹ всСгда прСдставляли

ΠŸΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΡ‚Π΅ свой статичный Π΄ΠΈΠ·Π°ΠΉΠ½ Π² ΠΏΠ»Π°Π²Π½ΡƒΡŽ ΠΈ Ρ‡Π΅Ρ‚ΠΊΡƒΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π»ΡƒΡ‡ΡˆΠ΅Π³ΠΎ инструмСнта для Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ SVG. Π‘Π°ΠΌΡ‹Π΅ ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ SVG-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ всСгда Ρƒ вас ΠΏΠΎΠ΄ Ρ€ΡƒΠΊΠΎΠΉ: ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅, ΠΏΠΎΠ²ΠΎΡ€ΠΎΡ‚, Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°Ρ†ΠΈΡ, ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½ΠΈΠ΅, траСктория, Ρ†Π²Π΅Ρ‚ ΠΈ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°Ρ‚ΠΎΡ€Ρ‹ ΠΆΠ΄ΡƒΡ‚, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ ΠΈΡ… ΠΎΠΏΡ€ΠΎΠ±ΡƒΠ΅Ρ‚Π΅. Π Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΡƒΠΉΡ‚Π΅ свою Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ Π²ΠΆΠΈΠ²ΡƒΡŽ ΠΈ сразу ΠΆΠ΅ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ измСнСния. ΠŸΠΎΠ΄Π½ΠΈΠΌΠΈΡ‚Π΅ свой Π΄ΠΈΠ·Π°ΠΉΠ½ Π½Π° Π½ΠΎΠ²Ρ‹ΠΉ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ с ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°ΠΌΠΈ экспорта, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡƒΠ»ΡƒΡ‡ΡˆΠ°Ρ‚ взаимодСйствиС с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ ΠΈ сократят врСмя, ΠΏΡ€ΠΎΠ²ΠΎΠ΄ΠΈΠΌΠΎΠ΅ Π½Π° страницС.


Как ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ SVG

Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ

Π˜ΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΡƒΠΉΡ‚Π΅ Ρ„Π°ΠΉΠ» SVG ΠΈΠ»ΠΈ создайтС Π΅Π³ΠΎ с нуля Π² ΠΎΠ½Π»Π°ΠΉΠ½-Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅ SVG. НарисуйтС свою ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π·Π½Π°ΠΊΠΎΠΌΡ‹Ρ… инструмСнтов Π΄ΠΈΠ·Π°ΠΉΠ½Π°; ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΡ‹ ΠΈ Π°ΠΊΡ‚ΠΈΠ²Ρ‹.

Анимация

Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π°Π½ΠΈΠΌΠ°Ρ‚ΠΎΡ€, ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ воспроизвСдСния Π½Π° Π²Ρ€Π΅ΠΌΠ΅Π½Π½ΡƒΡŽ ΡˆΠΊΠ°Π»Ρƒ ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚Π΅ ΠΆΠ΅Π»Π°Π΅ΠΌΠΎΠ΅ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½ΠΈΠ΅: ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅, ΠΏΠΎΠ²ΠΎΡ€ΠΎΡ‚, Π½Π°ΠΊΠ»ΠΎΠ½, ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ полоТСния ΠΈΠ»ΠΈ ΠΈΠ³Ρ€Π° с трансформациСй ΠΈ ΠΎΠ±Ρ‚Ρ€Π°Π²ΠΎΡ‡Π½ΠΎΠΉ маской. УстановитС Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ смягчСния.

Экспорт

УстановитС ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ, Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ‚ΠΈΠΏ экспорта (Javascript ΠΈΠ»ΠΈ CSS), запуск Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, ΠΈΡ‚Π΅Ρ€Π°Ρ†ΠΈΠΈ, ΠΎΡ‚ΠΊΠ»ΠΈΠΊ ΠΈ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅ свою Ρ€Π°Π±ΠΎΡ‚Ρƒ Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ просмотра. ЭкспортируйтС ΠΎΠ΄ΠΈΠ½ Ρ„Π°ΠΉΠ» SVG ΠΈ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π΅Π³ΠΎ Π½Π° свой Π²Π΅Π±-сайт.

CREATE SVG NOW

«Π§Ρ‚ΠΎ ΠΌΠ½Π΅ большС всСго нравится Π² SVGator, Ρ‚Π°ΠΊ это Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΎΠ½Π»Π°ΠΉΠ½ ΠΈ Π½Π° основС ΠΎΠ±Π»Π°ΠΊΠ°. Π˜Π½Ρ‚Π΅Ρ€Ρ„Π΅ΠΉΡ ΠΎΡ‡Π΅Π½ΡŒ простой, ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ понятный ΠΈ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ. ΠžΠ±ΡƒΡ‡Π΅Π½ΠΈΠ΅ Π½Π΅ Ρ‚Π°ΠΊΠΎΠ΅ ΡƒΠΆ слоТноС, Π΄Π°ΠΆΠ΅ ΠΏΠΎΡ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅ Π΅ΡΡ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ руководств, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΌΠΎΠ³ΠΈΡ‚Π΅ с этим».

АлСксандр Π . — Π”ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€

ΠŸΠΎΡ‡Π΅ΠΌΡƒ SVGator β€” Π»ΡƒΡ‡ΡˆΠΈΠΉ ΠΎΠ½Π»Π°ΠΉΠ½-Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ SVG?

SVGator β€” Π²Π΅Π΄ΡƒΡ‰Π΅Π΅ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ΅ обСспСчСниС для SVG-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‰Π΅Π΅ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π½Π°Π±ΠΎΡ€ инструмСнтов для создания ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π² ΠΎΠ΄Π½ΠΎΠΌ мСстС. Π•Π³ΠΎ успСх связан с ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ Ρ…ΡƒΠ΄ΠΎΠΆΠ½ΠΈΠΊΠΎΠ²-Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ постоянно Ρ‚Π΅ΡΡ‚ΠΈΡ€ΡƒΡŽΡ‚ ΠΈ ΡƒΠ»ΡƒΡ‡ΡˆΠ°ΡŽΡ‚ инструмСнт, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠΈΡ‚ΡŒ Π½Π°ΠΈΠ»ΡƒΡ‡ΡˆΠΈΠ΅ возмоТности рСдактирования.


ЧАБВО Π—ΠΠ”ΠΠ’ΠΠ•ΠœΠ«Π• Π’ΠžΠŸΠ ΠžΠ‘Π«

ΠŸΠΎΡ‡Π΅ΠΌΡƒ я Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ SVG Π½Π° своСм Π²Π΅Π±-сайтС?

Анимация β€” это ΡƒΠΌΠ½Ρ‹ΠΉ способ ΠΎΠΆΠΈΠ²ΠΈΡ‚ΡŒ Π²Π΅Π±-сайт. Π­Ρ‚ΠΎ создаСт приятный ΠΎΠΏΡ‹Ρ‚ ΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠ½ΠΈΠ·ΠΈΡ‚ΡŒ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΎΡ‚ΠΊΠ°Π·ΠΎΠ², побуТдая Π·Ρ€ΠΈΡ‚Π΅Π»Π΅ΠΉ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°Ρ‚ΡŒ своС ΠΏΡƒΡ‚Π΅ΡˆΠ΅ΡΡ‚Π²ΠΈΠ΅.