SVG animation — ΠΠ»ΠΎΠ³ ITVDN
SVG Π³ΡΠ°ΡΠΈΠΊΠ° ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π° Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΡ ΡΠ΅Π³ΠΎΠ². ΠΠ½ΠΈ Π±ΡΠ»ΠΈ ΠΎΠΏΠΈΡΠ°Π½Ρ Π² ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ Animation SMIL.
Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΡΠΈ ΡΠ΅Π³ΠΈ:
- ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π² ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ.
- ΡΡΠΎ ΡΠ΄ΠΎΠ±Π½ΠΎΠ΅ ΡΠΎΠΊΡΠ°ΡΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ Π΄Π»Ρ ΠΏΡΠΈΡΠ²ΠΎΠ΅Π½ΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΡ Π½Π΅ΡΠΈΡΠ»ΠΎΠ²ΡΡ Π°ΡΡΠΈΠ±ΡΡΠΎΠ² ΠΈ ΡΠ²ΠΎΠΉΡΡΠ², ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ ΡΠ²ΠΎΠΉΡΡΠ²Π° opacity.
- ΠΊΠΎΡΠΎΡΡΠΉ Π΄Π²ΠΈΠ³Π°Π΅Ρ Π²Π΄ΠΎΠ»Ρ ΡΡΠ°Π΅ΠΊΡΠΎΡΠΈΠΈ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΡ path.
- ΠΊΠΎΡΠΎΡΠ°Ρ ΠΌΠΎΠ΄ΠΈΡΠΈΡΠΈΡΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠ° ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ Π°ΡΡΠΈΠ±ΡΡΠΎΠ² ΠΈΠ»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ² Ρ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ.
Π Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ, ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ Π² SMIL, SVG Π²ΠΊΠ»ΡΡΠ°Π΅Ρ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΡ, ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Ρ SMIL Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ.
ΠΡΠΈ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΡ Π²ΠΊΠ»ΡΡΠ°ΡΡ Π² ΡΠ΅Π±Ρ Π°ΡΡΠΈΠ±ΡΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°ΡΡΠΈΡΡΡΡ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π» ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Π Π°ΡΡΠΈΡΠ΅Π½ΠΈΡ SVG Π²ΠΊΠ»ΡΡΠ°ΡΡ Π² ΡΠ΅Π±Ρ:
- 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 Π΅Π΄ΠΈΠ½ΠΈΡ Π²Π΄ΠΎΠ»Ρ ΠΎΡΠΈ Ρ .
ΠΠ°ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ ΠΌΡΡΠΈ. ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΊΡΡΠ³ Π±ΡΠ΄Π΅Ρ Π΄Π²ΠΈΠ³Π°ΡΡΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½Π° Π½Π°ΠΆΠ°ΡΠ°.
ΠΡΡΠΈΠ±ΡΡ 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 Π½Π° ΡΠ²ΠΎΠ΅ΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅?
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ β ΡΡΠΎ ΡΠΌΠ½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΎΠΆΠΈΠ²ΠΈΡΡ Π²Π΅Π±-ΡΠ°ΠΉΡ. ΠΡΠΎ ΡΠΎΠ·Π΄Π°Π΅Ρ ΠΏΡΠΈΡΡΠ½ΡΠΉ ΠΎΠΏΡΡ ΠΈ ΠΌΠΎΠΆΠ΅Ρ ΡΠ½ΠΈΠ·ΠΈΡΡ ΠΏΠΎΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΎΡΠΊΠ°Π·ΠΎΠ², ΠΏΠΎΠ±ΡΠΆΠ΄Π°Ρ Π·ΡΠΈΡΠ΅Π»Π΅ΠΉ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ°ΡΡ ΡΠ²ΠΎΠ΅ ΠΏΡΡΠ΅ΡΠ΅ΡΡΠ²ΠΈΠ΅.