ΠΠ°ΠΌ ΠΏΡΠ΅Π΄ΡΡΠΎΠΈΡ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Π²ΠΎΠΏΡΠΎΡΡ:
β’ SVG, ΠΊΡΠ°ΡΠΊΠ°Ρ ΠΈΡΡΠΎΡΠΈΡ ΠΈ Π°Π½Π°ΡΠΎΠΌΠΈΡ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ SVG-Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°;
β’ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ SVG-Π³ΡΠ°ΡΠΈΠΊΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΡ ΠΏΠ°ΠΊΠ΅ΡΠΎΠ² ΠΈ ΡΠ΅ΡΠ²ΠΈΡΠΎΠ² ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ;
β’ Π²ΡΡΠ°Π²ΠΊΠ° ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ² SVG-Π³ΡΠ°ΡΠΈΠΊΠΈ Π² ΡΡΡΠ°Π½ΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅Π³ΠΎΠ² img ΠΈ object;
β’ Π²ΡΡΠ°Π²ΠΊΠ° ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ² SVG-Π³ΡΠ°ΡΠΈΠΊΠΈ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠΎΠ½ΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ;
β’ Π²ΡΡΠ°Π²ΠΊΠ° ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ² SVG-Π³ΡΠ°ΡΠΈΠΊΠΈ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ Π² ΠΊΠΎΠ΄ HTML Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π»ΠΈΠ½Π΅ΠΉΠ½ΡΡ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ²;
β’ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ SVG-ΡΠΈΠΌΠ²ΠΎΠ»ΠΎΠ²;
β’ ΡΡΡΠ»ΠΊΠ° Π½Π° Π²Π½Π΅ΡΠ½ΠΈΠ΅ SVG-ΡΠΈΠΌΠ²ΠΎΠ»Ρ;
β’ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ, ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅ΠΌΡΠ΅ ΠΊΠ°ΠΆΠ΄ΡΠΌ ΠΈΠ· ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ² Π²ΡΡΠ°Π²ΠΊΠΈ;
β’ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ² SVG-Π³ΡΠ°ΡΠΈΠΊΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ SMIL;
β’ ΠΏΡΠΈΠ΄Π°Π½ΠΈΠ΅ ΡΡΠΈΠ»Π΅Π²ΠΎΠ³ΠΎ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ ΠΎΠ±ΡΠ΅ΠΊΡΠ°ΠΌ SVG-Π³ΡΠ°ΡΠΈΠΊΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π²Π½Π΅ΡΠ½Π΅ΠΉ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ;
β’ ΠΏΡΠΈΠ΄Π°Π½ΠΈΠ΅ ΡΡΠΈΠ»Π΅Π²ΠΎΠ³ΠΎ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ ΠΎΠ±ΡΠ΅ΠΊΡΠ°ΠΌ SVG-Π³ΡΠ°ΡΠΈΠΊΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ;
β’ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ² SVG-Π³ΡΠ°ΡΠΈΠΊΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS;
β’ ΠΌΠ΅Π΄ΠΈΠ°Π·Π°ΠΏΡΠΎΡΡ ΠΈ SVG-Π³ΡΠ°ΡΠΈΠΊΠ°;
β’ ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΡ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ² SVG-Π³ΡΠ°ΡΠΈΠΊΠΈ;
β’ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ² SVG-Π³ΡΠ°ΡΠΈΠΊΠΈ Ρ ΡΠ΅Π»ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΠΈΠ»ΡΡΡΠΎΠ² Π΄Π»Ρ CSS;
β’ ΠΌΠ°Π½ΠΈΠΏΡΠ»ΡΡΠΈΡ ΠΎΠ±ΡΠ΅ΠΊΡΠ°ΠΌΠΈ SVG-Π³ΡΠ°ΡΠΈΠΊΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΠ΄Π° JavaScript ΠΈ JavaScript-Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ;
β’ ΡΠΎΠ²Π΅ΡΡ ΠΏΠΎ Π²Π½Π΅Π΄ΡΠ΅Π½ΠΈΡ SVG-ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ;
β’ ΡΠ΅ΡΡΡΡΡ Π΄Π»Ρ Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠ΅Π³ΠΎ ΠΈΠ·ΡΡΠ΅Π½ΠΈΡ.
SVG-ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡ β ΠΏΡΠ΅Π΄ΠΌΠ΅Ρ Π½Π΅ΠΏΡΠΎΡΡΠΎΠΉ. ΠΠ°ΠΊΠΈΠ΅ ΡΠ°Π·Π΄Π΅Π»Ρ Π΄Π°Π½Π½ΠΎΠΉ Π³Π»Π°Π²Ρ Π² Π±ΠΎΠ»ΡΡΠ΅ΠΉ ΡΡΠ΅ΠΏΠ΅Π½ΠΈ ΠΎΡΠ²Π΅ΡΠ°ΡΡ Π²Π°ΡΠΈΠΌ ΠΏΠΎΡΡΠ΅Π±Π½ΠΎΡΡΡΠΌ, Π±ΡΠ΄Π΅Ρ Π·Π°Π²ΠΈΡΠ΅ΡΡ ΠΎΡ ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΠΎΡ SVG. ΠΠ°Π΄Π΅ΡΡΡ, Ρ ΡΡΠ°Π·Ρ ΠΆΠ΅ ΡΠΌΠΎΠ³Ρ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠΈΡΡ ΡΡΠ΄ ΠΊΡΠ°ΡΡΠ°ΠΉΡΠΈΡ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² Π΅Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ.
ΠΡΠ»ΠΈ Π²Π°ΠΌ ΠΏΡΠΎΡΡΠΎ Π½ΡΠΆΠ½ΠΎ Π·Π°ΠΌΠ΅Π½ΠΈΡΡ ΡΡΠ°ΡΠΈΡΠ½ΡΠ΅ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΠ΅ΡΡΡΡΡ Π½Π° ΡΠ°ΠΉΡΠ΅ ΠΈΡ SVG-Π²Π΅ΡΡΠΈΡΠΌΠΈ Ρ ΡΠ΅Π»ΡΡ ΠΏΠΎΠ²ΡΡΠ΅Π½ΠΈΡ ΡΠ΅Π·ΠΊΠΎΡΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ/ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ°ΠΉΠ»ΠΎΠ² ΠΌΠ΅Π½ΡΡΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ², ΡΠΎΠ³Π΄Π° ΠΎΠ±ΡΠ°ΡΠΈΡΠ΅ΡΡ ΠΊ ΠΌΠ΅Π½Π΅Π΅ ΠΎΠ±ΡΠ΅ΠΌΠ½ΡΠΌ ΡΠ°Π·Π΄Π΅Π»Π°ΠΌ ΠΏΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ SVG Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠΎΠ½ΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ Π²Π½ΡΡΡΠΈ img-ΡΠ΅Π³ΠΎΠ².
ΠΡΠ»ΠΈ Π²Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΡΠ΅ΡΠ΅ΡΡ ΡΠ΅ΠΌ, ΠΊΠ°ΠΊΠΈΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΈ ΡΠ΅ΡΠ²ΠΈΡΡ ΠΌΠΎΠ³ΡΡ ΠΏΠΎΠΌΠΎΡΡ ΡΠΎΠ·Π΄Π°ΡΡ SVG-ΡΠ΅ΡΡΡΡΡ ΠΈ ΡΠΏΡΠ°Π²Π»ΡΡΡ ΠΈΠΌΠΈ, ΡΡΠ°Π·Ρ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΡΠ΅ ΠΊ ΡΠ°Π·Π΄Π΅Π»Ρ Β«Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ SVG-Π³ΡΠ°ΡΠΈΠΊΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΡ ΠΏΠ°ΠΊΠ΅ΡΠΎΠ² ΠΈ ΡΠ΅ΡΠ²ΠΈΡΠΎΠ² ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉΒ», Π³Π΄Π΅ Π±ΡΠ΄Π΅Ρ Π΄Π°Π½ ΡΡΠ΄ ΠΏΠΎΠ»Π΅Π·Π½ΡΡ ΡΡΡΠ»ΠΎΠΊ ΠΈ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Π΅ΠΉ.
Π Π΅ΡΠ»ΠΈ ΠΆΠ΅Π»Π°Π΅ΡΠ΅ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ Ρ SVG ΠΏΠΎΠ³Π»ΡΠ±ΠΆΠ΅ ΠΈΠ»ΠΈ ΡΠΏΡΠ°Π²Π»ΡΡΡ ΡΡΠΎΠΉ Π³ΡΠ°ΡΠΈΠΊΠΎΠΉ, Π² ΡΠΎΠΌ ΡΠΈΡΠ»Π΅ Ρ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΡΠΎ Π²Π°ΠΌ Π»ΡΡΡΠ΅ ΡΡΠ΅ΡΡΡΡΡ ΠΏΠΎΡΠ΄ΠΎΠ±Π½Π΅Π΅ ΠΈ Π·Π°ΠΏΠ°ΡΡΠΈΡΡ Π΄Π²ΠΎΠΉΠ½ΠΎΠΉ ΠΏΠΎΡΡΠΈΠ΅ΠΉ Π»ΡΠ±ΠΈΠΌΠΎΠ³ΠΎ Π½Π°ΠΏΠΈΡΠΊΠ°, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠ°Π·Π³ΠΎΠ²ΠΎΡ Π±ΡΠ΄Π΅Ρ Π΄ΠΎΠ»Π³ΠΈΠΌ.
ΠΡΠΈΡΡΡΠΏΠ°Ρ ΠΊ ΠΎΡΠ²ΠΎΠ΅Π½ΠΈΡ ΡΡΠΎΠΉ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ, Π΄Π»Ρ Π½Π°ΡΠ°Π»Π° Π·Π°Π³Π»ΡΠ½Π΅ΠΌ Π² 2001 Π³ΠΎΠ΄.
ΠΡΠ°ΡΠΊΠ°Ρ ΠΈΡΡΠΎΡΠΈΡ SVG
ΠΠ΅ΡΠ²ΡΠΉ Π²ΡΠΏΡΡΠΊ SVG ΡΠΎΡΡΠΎΡΠ»ΡΡ Π² 2001 Π³ΠΎΠ΄Ρ. Π ΡΡΠΎ Π½Π΅ ΠΎΠΏΠ΅ΡΠ°ΡΠΊΠ°. SVG ΠΊΠ°ΠΊ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Ρ 2001 Π³ΠΎΠ΄Π°. Π‘ ΡΠ΅Ρ ΠΏΠΎΡ ΠΎΠ½Π° ΠΏΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΠΎ Π½Π°Π±ΠΈΡΠ°Π»Π° ΠΎΠ±ΠΎΡΠΎΡΡ, Π½ΠΎ ΡΠΈΡΠΎΠΊΠΈΠΉ ΠΈΠ½ΡΠ΅ΡΠ΅Ρ ΠΊ Π½Π΅ΠΉ ΠΈ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ²ΡΠ·Π°Π½Ρ Ρ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ΠΌ ΡΡΡΡΠΎΠΉΡΡΠ² Ρ ΡΠΊΡΠ°Π½Π°ΠΌΠΈ Π²ΡΡΠΎΠΊΠΎΠ³ΠΎ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ. ΠΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π² SVG-ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡ ΠΈΠ·Π»ΠΎΠΆΠ΅Π½ΠΎ Π² Π΅Π΅ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ Π²Π΅ΡΡΠΈΠΈ 1.1 (http://www.w3.org/TR/SVG11/intro.html) ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
Β«SVG β ΡΡΠΎ ΡΠ·ΡΠΊ ΠΎΠΏΠΈΡΠ°Π½ΠΈΡ Π΄Π²ΡΡ ΠΌΠ΅ΡΠ½ΠΎΠΉ Π³ΡΠ°ΡΠΈΠΊΠΈ Π² XML [XML10]. SVG ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΡΠΈ ΡΠΈΠΏΠ° Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ²: ΡΠΈΠ³ΡΡΡ Π²Π΅ΠΊΡΠΎΡΠ½ΠΎΠΉ Π³ΡΠ°ΡΠΈΠΊΠΈ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΡΡΠΈ, ΡΠΎΡΡΠΎΡΡΠΈΠ΅ ΠΈΠ· ΠΏΡΡΠΌΡΡ ΠΈ ΠΊΡΠΈΠ²ΡΡ Π»ΠΈΠ½ΠΈΠΉ), ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ ΡΠ΅ΠΊΡΡΒ».
Π‘ΡΠ΄Ρ ΠΏΠΎ Π½Π°Π·Π²Π°Π½ΠΈΡ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ (ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΠ°Ρ Π²Π΅ΠΊΡΠΎΡΠ½Π°Ρ Π³ΡΠ°ΡΠΈΠΊΠ°), SVG ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π΄Π°ΡΡ Π² ΠΊΠΎΠ΄Π΅ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ Π΄Π²ΡΡ ΠΌΠ΅ΡΠ½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π² Π²ΠΈΠ΄Π΅ Π²Π΅ΠΊΡΠΎΡΠ½ΡΡ ΠΎΠΏΠΎΡΠ½ΡΡ ΡΠΎΡΠ΅ΠΊ. ΠΡΠΎ ΠΎΡΠΊΡΡΠ²Π°Π΅Ρ Π΄Π»Ρ Π½Π΅Π΅ ΡΠΈΡΠΎΠΊΠΈΠ΅ ΠΏΠ΅ΡΡΠΏΠ΅ΠΊΡΠΈΠ²Ρ ΠΏΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π·Π½Π°ΡΠΊΠΎΠ², ΠΏΡΠΎΡΠΈΡΠΎΠ²ΠΊΠ΅ Π»ΠΈΠ½ΠΈΠΉ ΠΈ ΡΡ Π΅ΠΌ.
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π²Π΅ΠΊΡΠΎΡΡ Π·Π°Π΄Π°ΡΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΡ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠΉ, ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡ Π±Π΅Π· ΠΏΠΎΡΠ΅ΡΠΈ ΠΊΠ°ΡΠ΅ΡΡΠ²Π° Π΄ΠΎ Π»ΡΠ±ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ². ΠΠΎΠ»Π΅Π΅ ΡΠΎΠ³ΠΎ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Π΄Π°Π½Π½ΡΠ΅ SVG-Π³ΡΠ°ΡΠΈΠΊΠΈ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Ρ Π² Π²ΠΈΠ΄Π΅ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠΉ Π²Π΅ΠΊΡΠΎΡΠ½ΡΡ ΠΎΠΏΠΎΡΠ½ΡΡ ΡΠΎΡΠ΅ΠΊ, ΠΈΡ ΠΎΠ±ΡΠ΅ΠΌ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΡΡ ΠΌΠΈΠ·Π΅ΡΠ½ΡΠΌ ΠΏΠΎ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ Ρ Π΄Π°Π½Π½ΡΠΌΠΈ ΡΠ°ΠΉΠ»ΠΎΠ² JPEG, GIF ΠΈΠ»ΠΈ PNG, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΎΠΏΠΎΡΡΠ°Π²ΠΈΠΌΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ².
ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ SVG-Π³ΡΠ°ΡΠΈΠΊΠ° ΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠΈΡΠΎΠΊΠΎΠΉ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΎΠΉ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ². ΠΠ΅ Π² ΡΠΈΡΠ»Π΅ ΠΏΡΠΎΡΠΈΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ Android 2.3 ΠΈ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Π²Π΅ΡΡΠΈΠΈ, Π° ΡΠ°ΠΊΠΆΠ΅ Π²Π΅ΡΡΠΈΠΈ Internet Explorer, Π½Π°ΡΠΈΠ½Π°Ρ Ρ 9-ΠΉ (http://caniuse.com/#search=svg).
ΠΡΠ°ΡΠΈΠΊΠ°, ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡΠ°Ρ ΡΠΎΠ±ΠΎΠΉ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ
ΠΠ±ΡΡΠ½ΠΎ ΠΏΡΠΈ ΠΏΠΎΠΏΡΡΠΊΠ΅ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΊΠΎΠ΄Π° Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΡΠ°ΠΉΠ»Π° Π² ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠΌ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ΅ ΠΏΠΎΠ½ΡΡΡ ΡΡΠΎ-Π»ΠΈΠ±ΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ.
Π Π²ΠΎΡ SVG-Π³ΡΠ°ΡΠΈΠΊΠ° ΠΎΠΏΠΈΡΡΠ²Π°Π΅ΡΡΡ ΡΠ·ΡΠΊΠΎΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ. SVG Π·Π°ΠΏΠΈΡΡΠ²Π°Π΅ΡΡΡ Π½Π° ΡΠ°ΡΡΠΈΡΡΠ΅ΠΌΠΎΠΌ ΡΠ·ΡΠΊΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ (Extensible Markup Language (XML)), ΡΠ²Π»ΡΡΡΠ΅ΠΌΡΡ Π±Π»ΠΈΠ·ΠΊΠΈΠΌ ΡΠΎΠ΄ΡΡΠ²Π΅Π½Π½ΠΈΠΊΠΎΠΌ HTML. ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Ρ Π½Π΅ Π² ΠΊΡΡΡΠ΅, Π½ΠΎ XML ΠΏΠΎΠ²ΡΠ΅ΠΌΠ΅ΡΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π² ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅. ΠΠ°ΠΌ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΠ»ΠΎΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ RSS-ΠΊΠ°Π½Π°Π»ΠΎΠΌ? Π Π²Π΅Π΄Ρ Π² Π½Π΅ΠΌ ΡΠ°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ XML. ΠΠΌΠ΅Π½Π½ΠΎ Π² ΡΡΠΎΠΌ ΡΠ·ΡΠΊΠ΅ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ RSS-ΠΊΠ°Π½Π°Π»Π°, ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Ρ Π΅Π³ΠΎ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΡ Π΄Π»Ρ ΡΠ°Π·Π½ΠΎΠΎΠ±ΡΠ°Π·Π½ΡΡ ΡΡΠ΅Π΄ΡΡΠ² ΠΈ ΡΠ΅ΡΠ²ΠΈΡΠΎΠ². Π‘Π»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, ΡΠΈΡΠ°ΡΡ ΠΈ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡΡ SVG-Π³ΡΠ°ΡΠΈΠΊΡ ΠΌΠΎΠ³ΡΡ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΌΠ°ΡΠΈΠ½Ρ, Π½ΠΎ ΠΈ ΠΌΡ Ρ Π²Π°ΠΌΠΈ.
ΠΠΎΠ·Π²ΠΎΠ»ΡΡΠ΅ ΠΏΡΠΈΠ²Π΅ΡΡΠΈ ΠΏΡΠΈΠΌΠ΅Ρ. ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π·Π²Π΅Π·Π΄Ρ.
ΠΠ°Π½Π½ΠΎΠ΅ SVG-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ Π² ΡΠ°ΠΉΠ»Π΅ Star.svg, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² ΠΊΠ°ΡΠ°Π»ΠΎΠ³Π΅ example_07-01. Π€Π°ΠΉΠ» ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΠΊΡΡΡΡ ΠΊΠ°ΠΊ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅, Π½Π° ΡΠΊΡΠ°Π½Π΅ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΎΠ½ ΠΏΠΎΡΠ²ΠΈΡΡΡ Π² Π²ΠΈΠ΄Π΅ Π·Π²Π΅Π·Π΄Ρ, ΡΠ°ΠΊ ΠΈ Π² ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠΌ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ΅, Π³Π΄Π΅ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΊΠΎΠ΄, ΡΠΎΡΠΌΠΈΡΡΡΡΠΈΠΉ ΡΡΡ Π·Π²Π΅Π·Π΄Ρ. Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΊΠΎΠ΄:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="198px" height="188px" viewBox="0 0 198 188" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.
w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.
com/sketch -->
<title>Star 1</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-
rule="evenodd" sketch:type="MSPage">
<polygon id="Star-1" stroke="#9 79797" stroke-width="3"
fill="#F8E81C" sketch:type="MSShapeGroup" points="99 154 40.22 14748 184.9 01699 51.44 71742 119.45085 3.894 34837 73.09 83006 69.61 07374 63.54 91503 99 4 128.3 89263 63.54 91503 194.1 05652 73.09 83006 146.5 52826 119.45085 157.7 78525 184.9 01699 "></polygon>
</g>
</svg>
Π ΡΡΠΎ Π²ΡΠ΅, ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π·Π²Π΅Π·Π΄Ρ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ SVG-Π³ΡΠ°ΡΠΈΠΊΠΈ.
ΠΡΠ»ΠΈ ΡΠ°Π½ΡΡΠ΅ Π²Π°ΠΌ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΠ»ΠΎΡΡ Π²ΠΈΠ΄Π΅ΡΡ ΠΊΠΎΠ΄ SVG-Π³ΡΠ°ΡΠΈΠΊΠΈ, ΡΠΎ Ρ Π²Π°Ρ ΠΌΠΎΠΆΠ΅Ρ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡΡΡ Π²ΠΎΠΏΡΠΎΡ: Π° Π·Π°ΡΠ΅ΠΌ ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ? ΠΡΠ»ΠΈ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π²ΡΠ΅Π³ΠΎ Π»ΠΈΡΡ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²Π΅ΠΊΡΠΎΡΠ½ΠΎΠΉ Π³ΡΠ°ΡΠΈΠΊΠΈ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅, ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ ΡΡΠΎΡ ΠΊΠΎΠ΄ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ ΡΠΌΡΡΠ»Π°. ΠΡΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΡΠΏΠΎΡΠΎΠ±Π½ΠΎΠ΅ ΡΠΎΡ ΡΠ°Π½ΡΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΡ Π²Π°ΡΠ΅Π³ΠΎ Π²Π΅ΠΊΡΠΎΡΠ½ΠΎΠ³ΠΎ ΡΠ²ΠΎΡΡΠ΅ΡΡΠ²Π° Π² ΡΠΎΡΠΌΠ°ΡΠ΅ SVG, ΠΈ Π²Ρ ΠΏΠΎΠ»ΡΡΠΈΡΠ΅ ΡΠΎ, ΡΡΠΎ Ρ ΠΎΡΠ΅Π»ΠΈ. ΠΠ΅ΡΠ΅ΡΠ΅Π½Ρ ΡΠ°ΠΊΠΈΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Π±ΡΠ΄Π΅Ρ Π΄Π°Π½ ΡΡΡΡ ΠΏΠΎΠ·ΠΆΠ΅.
ΠΡΠΎ, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ ΠΆΠ΅, Π»ΠΈΡΡ Π½Π°ΡΠ°Π»ΡΠ½ΡΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠΈΠΉ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ SVG-Π³ΡΠ°ΡΠΈΠΊΠΎΠΉ ΠΈΠ· Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠΎΠ², Π° Π²ΠΎΡ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ SVG-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² ΠΈ ΠΎΡΠ²ΠΎΠ΅Π½ΠΈΠ΅ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² Π²ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΡΡΠ²Π° Π² ΠΈΡ ΡΠΎΠ²ΠΌΠ΅ΡΡΠ½ΡΡ ΡΠ°Π±ΠΎΡΡ, Π½Π΅ΡΠΎΠΌΠ½Π΅Π½Π½ΠΎ, ΠΏΡΠΈΠ³ΠΎΠ΄ΠΈΡΡΡ Π² ΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΡΠ²ΡΡΡΡ ΠΏΠΎΡΡΠ΅Π±Π½ΠΎΡΡΠΈ Π² ΠΌΠ°Π½ΠΈΠΏΡΠ»ΡΡΠΈΠΈ SVG-Π³ΡΠ°ΡΠΈΠΊΠΎΠΉ ΠΈ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ Π½Π° Π΅Π΅ ΠΎΡΠ½ΠΎΠ²Π΅ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ.
ΠΠΎΡΡΠΎΠΌΡ ΡΠ°Π·Π±Π΅ΡΠ΅ΠΌΡΡ Π² SVG-ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ΅ ΠΈ ΠΏΠΎΡΡΠ°ΡΠ°Π΅ΠΌΡΡ ΠΏΠΎΠ½ΡΡΡ, ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΏΡΠΈ Π΅Π΅ Π²ΡΠ²ΠΎΠ΄Π΅ Π½Π° ΡΠΊΡΠ°Π½. Π― Ρ ΠΎΡΡ ΠΏΡΠΈΠ²Π»Π΅ΡΡ Π²Π°ΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΊ ΡΡΠ΄Ρ ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΠΌΠΎΠΌΠ΅Π½ΡΠΎΠ².
ΠΠΎΡΠ½Π΅Π²ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ SVG
Π£ ΠΊΠΎΡΠ½Π΅Π²ΠΎΠ³ΠΎ SVG-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈΠΌΠ΅ΡΡΡΡ Π°ΡΡΠΈΠ±ΡΡΡ Π΄Π»Ρ ΡΠΈΡΠΈΠ½Ρ (width), Π²ΡΡΠΎΡΡ (height) ΠΈ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° (viewbox):
<svg width="198px" height="188px" viewBox="0 0 198 188"
ΠΡΠ΅ ΡΡΠΎ ΠΏΡΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ SVG Π½Π° ΡΠΊΡΠ°Π½Π΅ ΠΈΠ³ΡΠ°Π΅Ρ Π²Π΅ΡΡΠΌΠ° Π²Π°ΠΆΠ½ΡΡ ΡΠΎΠ»Ρ.
ΠΠ°Π΄Π΅ΡΡΡ, ΠΊ ΡΡΠΎΠΌΡ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Π²Ρ ΡΠΆΠ΅ Ρ ΠΎΡΠΎΡΠΎ ΡΠ°Π·Π±ΠΈΡΠ°Π΅ΡΠ΅ΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΡΠ°ΠΊΠΎΠ΅ ΠΎΠΊΠ½ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. ΠΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΎΡΡ Π² Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ Π³Π»Π°Π² ΠΊΠ½ΠΈΠ³ΠΈ Π΄Π»Ρ ΠΎΠΏΠΈΡΠ°Π½ΠΈΡ ΡΠΎΠΉ ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠΊΡΠ°Π½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΎΠΊΠ½ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ 320 Γ 480 ΠΏΠΈΠΊΡΠ΅Π»ΠΎΠ², Ρ Π½Π°ΡΡΠΎΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ° β 1920 Γ 1080 ΠΏΠΈΠΊΡΠ΅Π»ΠΎΠ².
Π€Π°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ SVG-Π°ΡΡΠΈΠ±ΡΡΡ width ΠΈ height ΡΠΎΠ·Π΄Π°ΡΡ ΠΎΠΊΠ½ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. Π§Π΅ΡΠ΅Π· ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ΅ ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΠΎΠΊΠ½ΠΎ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΌΠΎΡΡΠ΅ΡΡ Π½Π° ΡΠΈΠ³ΡΡΡ, ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ Π²Π½ΡΡΡΠΈ SVG. ΠΠ°ΠΊ ΠΈ ΠΏΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ, ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ SVG ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΎΠΊΠ½Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, Π½ΠΎ ΡΡΠΎ Π½Π΅ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ ΠΎΡΡΡΡΡΡΠ²ΠΈΡ Π²ΡΠ΅Π³ΠΎ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ, ΠΎΠ½ΠΎ ΠΏΡΠΎΡΡΠΎ Π½Π΅ Π²ΠΎΠΉΒΠ΄Π΅Ρ ΡΠ΅Π»ΠΈΠΊΠΎΠΌ Π² ΡΠ΅ΠΊΡΡΠ΅Π΅ ΠΎΠΊΠ½ΠΎ. Π ΡΠΎ ΠΆΠ΅ Π²ΡΠ΅ΠΌΡ ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠΈΡΡΠ΅ΠΌΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ, Π² ΠΊΠΎΡΠΎΡΠΎΠΉ ΡΠΏΡΠ°Π²Π»ΡΡΡ Π²ΡΠ΅ΠΌΠΈ ΡΠΈΠ³ΡΡΠ°ΠΌΠΈ SVG.
viewbox-Π·Π½Π°ΡΠ΅Π½ΠΈΡ 0 0 198 188 ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΎΠΏΠΈΡΠ°Π½ΠΈΡ Π»Π΅Π²ΠΎΠΉ Π²Π΅ΡΡ Π½Π΅ΠΉ ΠΈ ΠΏΡΠ°Π²ΠΎΠΉ Π½ΠΈΠΆΠ½Π΅ΠΉ ΡΠΎΡΠ΅ΠΊ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΎΠΉ ΠΎΠ±Π»Π°ΡΡΠΈ. ΠΠ²Π° ΠΏΠ΅ΡΠ²ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΠΈΠ·Π²Π΅ΡΡΠ½ΡΠ΅ Π² ΡΠ΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΎΠΌ ΡΠΌΡΡΠ»Π΅ ΠΊΠ°ΠΊ min-x ΠΈ min-y, ΠΎΠΏΠΈΡΡΠ²Π°ΡΡ Π»Π΅Π²ΡΠΉ Π²Π΅ΡΡ Π½ΠΈΠΉ ΡΠ³ΠΎΠ», Π° Π΄Π²Π° Π²ΡΠΎΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΠΈΠ·Π²Π΅ΡΡΠ½ΡΠ΅ Π² ΡΠ΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΎΠΌ ΡΠΌΡΡΠ»Π΅ ΠΊΠ°ΠΊ ΡΠΈΡΠΈΠ½Π° ΠΈ Π²ΡΡΠΎΡΠ°, ΠΎΠΏΠΈΡΡΠ²Π°ΡΡ ΠΏΡΠ°Π²ΡΠΉ Π½ΠΈΠΆΠ½ΠΈΠΉ ΡΠ³ΠΎΠ».
ΠΠ°Π»ΠΈΡΠΈΠ΅ Π°ΡΡΠΈΠ±ΡΡΠ° viewbox ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°ΡΡ ΠΈΠ»ΠΈ ΡΠΌΠ΅Π½ΡΡΠ°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ Π² Π½Π΅ΠΌ ΡΠΌΠ΅Π½ΡΡΠΈΡΡ Π½Π°ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Ρ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ:
<svg width="198px" height="188px" viewBox="0 0 99 94"
ΡΠΈΠ³ΡΡΠ° ΡΠΌΠ΅Π½ΡΡΠΈΡΡΡ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡΡΡ Π² ΡΠ°Π·ΠΌΠ΅ΡΠ°Ρ SVG-ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠ² ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ.
ΡΠΎΠ²Π΅Ρ
Π§ΡΠΎΠ±Ρ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ Ρ Π°ΡΡΠΈΠ±ΡΡΠΎΠΌ viewbox ΠΈ ΡΠΈΡΡΠ΅ΠΌΠΎΠΉ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ SVG, Π° ΡΠ°ΠΊΠΆΠ΅ Ρ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅ΠΌΡΠΌΠΈ ΠΈΠΌΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΠΌΠΈ, Ρ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΡ ΠΈΠ·ΡΡΠΈΡΡ ΡΠ»Π΅Π΄ΡΡΡΡΡ ΡΡΠ°ΡΡΡ Π‘Π°ΡΡ Π‘ΡΡΠ°ΠΉΠ΄Π΅Π½: http://sarasoueidan.com/blog/svg-coordinate-systems/, Π° ΡΠ°ΠΊΠΆΠ΅ ΡΡΠ°ΡΡΡ Π―ΠΊΠΎΠ±Π° ΠΠ΅Π½ΠΊΠΎΠ²Π° (Jakob Jenkov): http://tutorials.jenkov.com/svg/svg-viewport-view-box.html.
ΠΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΈΠΌΠ΅Π½
Π£ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΠΌΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° SVG ΠΈΠΌΠ΅Π΅ΡΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΈΠΌΠ΅Π½, ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ΅ Π΄Π»Ρ ΡΠ³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°Π²ΡΠ΅ΠΉ Π΅Π³ΠΎ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΉ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ Sketch (Π΄Π»Ρ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π° ΠΈΠΌΠ΅Π½ XML ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π°Π±Π±ΡΠ΅Π²ΠΈΠ°ΡΡΡΠ° xmlns):
xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
Π‘ΡΡΠ»ΠΊΠΈ Π½Π° ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΈΠΌΠ΅Π½ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Ρ ΠΈΡΠΊΠ»ΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΠΉ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΎΠΉ, ΠΊΠΎΡΠΎΡΠ°Ρ Π³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°Π»Π° SVG, ΠΏΠΎΡΡΠΎΠΌΡ, ΠΊΠΎΠ³Π΄Π° SVG-Π³ΡΠ°ΡΠΈΠΊΠ° ΠΏΡΠΈΠ²ΡΠ·ΡΠ²Π°Π΅ΡΡΡ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π² Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡΡ , ΡΡΠΈ ΡΡΡΠ»ΠΊΠΈ Π·Π°ΡΠ°ΡΡΡΡ ΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡΡΡ Π½Π΅ Π½ΡΠΆΠ½Ρ ΠΈ ΠΏΠΎΡΡΠΎΠΌΡ ΡΠ΄Π°Π»ΡΡΡΡΡ Π² Ρ ΠΎΠ΄Π΅ ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΠΈ, ΠΏΡΠΎΠ²ΠΎΠ΄ΠΈΠΌΠΎΠΉ Ρ ΡΠ΅Π»ΡΡ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° SVG-Π³ΡΠ°ΡΠΈΠΊΠΈ.