ΠΠ°ΠΊ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ svg ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΠΎΠ΄Π±ΠΎΡΠΊΠ° ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² Π΄Π»Ρ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΊΠΎΠ½Π²Π΅ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈ ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΠΈ SVG
ΠΠΎΠ΄Π³ΠΎΡΠΎΠ²ΠΈΠ»ΠΈ ΡΠΏΠΈΡΠΎΠΊ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠΌΠΎΠ³ΡΡ Π²Π°ΠΌ Ρ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠΎΡΡΠΎΡΡ ΠΈ Π³ΠΈΠ±ΠΊΠΎΡΡΡ ΡΠΎΡΠΌΠ°ΡΠ° SVG Π² ΡΠ²ΠΎΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠ°Ρ .
ΠΠ΅ΡΠΏΠ»Π°ΡΠ½ΡΠ΅ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΡ
ΠΠΎΠ³Π΄Π° Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π²Π΅ΠΊΡΠΎΡΠ½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΡΡΠΈΠ»ΡΠΌΠΈ Π² ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ΅ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ, ΠΏΠΎΠΌΠΎΡΡ ΠΌΠΎΠ³ΡΡ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΠ΅ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΡ. ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ «ΠΠ»Π»ΡΡΡΡΠ°ΡΠΎΡΠ°», ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ, Π½Π΅ Π±ΡΠ΄Π΅Ρ, Π½ΠΎ Π΄Π»Ρ Π±Π°Π·ΠΎΠ²ΡΡ ΠΏΠΎΡΡΠ΅Π±Π½ΠΎΡΡΠ΅ΠΉ Π² ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ Π²ΠΏΠΎΠ»Π½Π΅ ΡΠΎΠΉΠ΄Π΅Ρ.
Inkscape
ΠΠ°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΌΠ½ΠΎΠ³ΠΎΡΡΠΎΡΠΎΠ½Π½ΠΈΠΉ Π²Π°ΡΠΈΠ°Π½Ρ β Inkscape. ΠΡΠΎ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΠΉ Π²Π΅ΠΊΡΠΎΡΠ½ΡΠΉ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ Ρ ΠΎΡΠΊΡΡΡΡΠΌ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² Π΄Π»Ρ ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈ ΠΌΠ°Π½ΠΈΠΏΡΠ»ΡΡΠΈΠΉ Ρ ΠΎΠ±ΡΠ΅ΠΊΡΠ°ΠΌΠΈ. ΠΡΠΎΠΌΠ΅ ΠΈΠΌΠΏΠΎΡΡΠ° Π²Π΅ΠΊΡΠΎΡΠ°, ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ AI, EPS, PS ΠΈ PNG.
Boxy SVG
ΠΡΡΠ³ΠΈΠΌ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΠΌ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΌ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠΎΠΌ ΡΠ²Π»ΡΠ΅ΡΡΡ Boxy SVG. ΠΡΠΎ ΠΌΡΠ»ΡΡΠΈΠΏΠ»Π°ΡΡΠΎΡΠΌΠ΅Π½Π½ΡΠΉ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΏΠΎΡΠΎΠ±Π΅Π½ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ Π½Π° Chromium, Π½ΠΎ ΠΈ Π½Π° Π»ΡΠ±ΠΎΠΉ ΠΈΠ· Π΄ΠΎΡΡΡΠΏΠ½ΡΡ Π²Π°ΠΌ ΠΠ‘: Windows, MacOS ΠΈ Π²ΡΠ΅ ΡΠ΅ΠΌΠ΅ΠΉΡΡΠ²ΠΎ Linux.
ΠΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ Π΄Π»Ρ ΠΊΠΎΠ½Π²Π΅ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ SVG
ΠΡΠ»ΠΈ Π²Ρ Π½Π΅ Ρ ΠΎΡΠΈΡΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π²Π΅ΠΊΡΠΎΡ Ρ Π½ΡΠ»Ρ, ΡΡΠ΄ Π±ΡΠ°ΡΠ·Π΅ΡΠ½ΡΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ Π²Π°ΠΌ ΠΊΠΎΠ½Π²Π΅ΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² Π²Π΅ΠΊΡΠΎΡΠ½ΡΡ Π³ΡΠ°ΡΠΈΠΊΡ Π±Π΅Π· ΡΡΡΠ΄ΠΎΠ΅ΠΌΠΊΠΎΠΉ ΡΡΡΠ½ΠΎΠΉ ΡΠ°Π±ΠΎΡΡ.
PicSVG
PicSVG ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π·Π°Π³ΡΡΠ·ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΡΠ°ΠΉΡ, Π³Π΄Π΅ ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΊΠΎΠ½Π²Π΅ΡΡΠ°ΡΠΈΡ Π² Π²Π΅ΠΊΡΠΎΡ. Π Π°Π±ΠΎΡΠ°Π΅Ρ Ρ PNG, JPEG ΠΈ GIF.
Vectormagic
px2svg
ΠΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΏΡΠ΅Π²ΡΠ°ΡΠΈΡΡ ΡΠ°ΡΡΡΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² Π²Π΅ΠΊΡΠΎΡΠ½ΠΎΠ΅, ΠΏΡΠΎΠ²Π΅ΡΡΡΠ΅ px2svg ΠΎΡ ΠΡΠΈΠΊΠ° ΠΠ΅ΠΉΠ΅ΡΠ° (Eric Meyer). ΠΡΠΎ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ PHP-ΡΠΊΡΠΈΠΏΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠΏΠΈΠΊΡΠ΅Π»ΡΠ½ΠΎ, ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ ΠΊ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΡ Π²ΠΎΡΡΠΎΠ·Π΄Π°Π²Π°Ρ ΠΎΡΠΈΠ³ΠΈΠ½Π°Π» Π² Π²Π΅ΠΊΡΠΎΡΠ½ΠΎΠΌ Π²ΠΈΠ΄Π΅.
ΠΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΡ ΠΈ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΠ°
ΠΠ°ΠΆΠ΄ΠΎΠ΅ ΠΏΠ΅ΡΠ΅ΡΠ΅ΡΠ΅Π½ΠΈΠ΅, ΠΏΡΡΡ, Π΄Π΅ΡΡΡΠΈΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΈ ΠΊΠ°ΠΆΠ΄Π°Ρ ΡΠ°ΡΡΡ ΠΌΠ΅ΡΠ°-ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΡΡΠ»ΠΎΠΆΠ½ΡΠ΅Ρ SVG ΠΈ ΠΊΠΎΠ³Π΄Π° Π½Π° Π²Π°ΡΠ΅ΠΌ ΡΠ°ΠΉΡΠ΅ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ°ΠΊΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΈΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ, ΠΈΠ½Π°ΡΠ΅ ΡΡΠΎ Π½Π°ΡΠ½Π΅Ρ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡΡΡ Π½Π° ΡΠΊΠΎΡΠΎΡΡΠΈ ΡΠ°Π±ΠΎΡΡ ΡΠ°ΠΉΡΠ°.
ΠΠ°Π·ΠΎΠ²Π°Ρ ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΡ
Π§ΡΠΎΠ±Ρ Π±ΡΡΡ ΡΠ²Π΅ΡΠ΅Π½Π½ΡΠΌ Π² ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠΌ ΡΠ°ΠΉΠ»Π° ΠΈ Π½Π΅ ΠΏΠΎΡΠ΅ΡΡΡΡ Π»ΠΈΡΠ½Π΅Π΅, ΡΠΎΠΊΡΠ°ΡΠ°Ρ ΠΎΠ±ΡΠ΅ΠΌ, ΡΠ»Π΅Π΄ΡΠ΅Ρ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΡΡΡΠ½ΡΠΌ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΏΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ Π»ΡΠ±ΠΎΠΉ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ ΠΊΠΎΠ΄Π° Ρ ΠΆΠΈΠ²ΡΠΌ ΠΏΡΠ΅Π΄ΠΏΡΠΎΡΠΌΠΎΡΡΠΎΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ β ΡΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ Π²ΡΡΠΈΡΡΠΈΡΡ ΡΠ°ΠΉΠ» ΠΎΡ ΡΠ»ΡΠΆΠ΅Π±Π½ΡΡ ΠΊΠ»Π°ΡΡΠΎΠ², Π»ΠΈΡΠ½ΠΈΡ ΠΏΡΠΎΠ±Π΅Π»ΠΎΠ² ΠΈ Π·Π°ΠΏΡΡΡΡ Π½Π΅ Π½Π°ΡΡΡΠΈΠ² ΡΠ΅Π»ΠΎΡΡΠ½ΠΎΡΡΡ Π³ΡΠ°ΡΠΈΠΊΠΈ. Π₯ΠΎΡΠΎΡΠ΅ΠΉ ΠΈΠ΄Π΅Π΅ΠΉ Π±ΡΠ΄Π΅Ρ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π³Π°ΠΉΠ΄ΠΎΠΌ ΠΎΡ ΠΠ½Π΄ΡΠ΅Π°ΡΠ° ΠΠ°ΡΡΠ΅Π½Π° (Andreas Larsen), Π΅ΡΠ»ΠΈ ΡΠ΅ΡΠΈΡΠ΅ Π΄Π΅Π»Π°ΡΡ Π²ΡΠ΅ ΡΡΠΊΠ°ΠΌΠΈ.
ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠ΅ ΡΠ΅ΡΠ²ΠΈΡΡ Π΄Π»Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΉ ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΠΈ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ svgo. ΠΠΎ ΡΡΡ ΡΡΠΎΠΈΡ Π±ΡΡΡ Π²Π½ΠΈΠΌΠ°ΡΠ΅Π»ΡΠ½ΡΠΌ β ΡΡΠΎΠ±Ρ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ Π²Π°ΠΆΠ½ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΎΡΠ½ΠΎΡΡΡΠ΅Π΅ΡΡ ΠΊ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ), Π»ΡΡΡΠ΅ Π²ΡΠ΅-ΡΠ°ΠΊΠΈ Π΄Π΅Π»Π°ΡΡ ΡΡΠΎ Π²ΡΡΡΠ½ΡΡ.
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ SVG-Π½Π°Π±ΠΎΡΠ°
SVG-Π½Π°Π±ΠΎΡ ΠΌΠΎΠΆΠ΅Ρ ΡΡΠ°ΡΡ ΠΎΡΠ»ΠΈΡΠ½ΠΎΠΉ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²ΠΎΠΉ ΠΊΠ»Π°ΡΡΠΈΡΠ΅ΡΠΊΠΈΠΌ ΡΡΠΈΡΡΠ°ΠΌ-ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌ. Π ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ, Π΅ΡΠ»ΠΈ ΡΠΎ ΡΡΠΈΡΡΠΎΠΌ Π²ΠΎΠ·Π½ΠΈΠΊΠ½Π΅Ρ ΠΊΠ°ΠΊΠ°Ρ-ΡΠΎ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°, ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π΅ ΡΠ²ΠΈΠ΄ΠΈΡ Π½ΠΈΡΠ΅Π³ΠΎ, SVG ΠΌΠΎΠΆΠ΅Ρ Π³ΡΠ°ΡΠΈΠΎΠ·Π½ΠΎ ΠΎΡΠΊΠ°ΡΠΈΡΡΡΡ ΠΊ PNG (Π³Π»Π°Π²Π½ΠΎΠ΅ ΠΏΡΠ΅Π΄ΡΡΠΌΠΎΡΡΠ΅ΡΡ ΡΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ).
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΠ°ΠΊΠΈΡ Π½Π°Π±ΠΎΡΠΎΠ² Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΡΡΠ½ΡΡ β Π·Π΄Π΅ΡΡ ΠΡΠΈΡ ΠΠΎΠΉΠ»Π΅Ρ (Chris Coyier) ΡΠ°ΡΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ. Π ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠΌ Π΄Π»Ρ Grunt grunt-svgstore ΠΈΠ»ΠΈ gulp-svgstore Π΄Π»Ρ Gulp.
Π§Π΅ΠΌ ΠΎΡΠΊΡΡΡΡ ΡΠ°ΠΉΠ» Π² ΡΠΎΡΠΌΠ°ΡΠ΅ SVG β Π»ΡΡΡΠΈΠ΅ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ ΠΈ ΠΎΠ½Π»Π°ΠΉΠ½-ΡΠ΅Π΄Π°ΠΊΡΠΎΡΡ
ΠΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΡ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠΎΠ² ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΡ ΡΠ°Π½ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΠΎΡΠΌΠ°ΡΠ°Ρ . ΠΡΠ»ΠΈ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ° ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Ρ ΡΠ°ΡΡΡΠΎΠ²ΠΎΠΉ Π³ΡΠ°ΡΠΈΠΊΠΎΠΉ, ΡΠΎ Π΄Π»Ρ ΡΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΡ ΡΠ°ΠΉΠ»ΠΎΠ² ΠΏΡΠ΅Π΄Π»Π°Π³Π°ΡΡΡΡ ΡΠ°ΡΡΡΠΎΠ²ΡΠ΅ ΡΠΎΡΠΌΠ°ΡΡ, Π΅ΡΠ»ΠΈ Ρ Π²Π΅ΠΊΡΠΎΡΠ½ΠΎΠΉ, ΡΠΎ, ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ, Π²Π΅ΠΊΡΠΎΡΠ½ΡΠ΅ ΡΠΎΡΠΌΠ°ΡΡ. ΠΠ΄Π½Π°ΠΊΠΎ Π΅ΡΡΡ ΡΠ°ΡΡΡΠΎΠ²ΡΠ΅ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΠΊΡΠΏΠΎΡΡ ΡΠΈΡΡΠ½ΠΊΠΎΠ² Π² Π²Π΅ΠΊΡΠΎΡΠ½ΡΠ΅ ΠΈ ΡΠΌΠ΅ΡΠ°Π½Π½ΡΠ΅ ΡΠΎΡΠΌΠ°ΡΡ. Π’Π°ΠΊΠΎΠ²ΡΠΌ, ΠΊ ΠΏΡΠΈΠΌΠ΅ΡΡ, ΡΠ²Π»ΡΠ΅ΡΡΡ Adobe Photoshop, ΡΠΌΠ΅ΡΡΠΈΠΉ ΡΠΊΡΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠΈΡΡΠ½ΠΎΠΊ Π² SVG β Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΠΉ ΡΠ΅Π³ΠΎΠ΄Π½Ρ ΡΠΎΡΠΌΠ°Ρ, ΡΠΏΠΎΡΠΎΠ±Π½ΡΠΉ Ρ ΡΠ°Π½ΠΈΡΡ ΠΊΠ°ΠΊ ΡΠ°ΡΡΡΠΎΠ²ΡΡ, ΡΠ°ΠΊ ΠΈ Π²Π΅ΠΊΡΠΎΡΠ½ΡΡ Π³ΡΠ°ΡΠΈΠΊΡ.
Π§ΡΠΎ Π·Π° ΡΠΎΡΠΌΠ°Ρ SVG ΠΈ Π³Π΄Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ
Π Π°Π·ΡΠ°Π±ΠΎΡΠ°Π½Π½ΡΠΉ Π² 2001 Π³ΠΎΠ΄Ρ ΠΠΎΠ½ΡΠΎΡΡΠΈΡΠΌΠΎΠΌ ΠΡΠ΅ΠΌΠΈΡΠ½ΠΎΠΉ ΠΏΠ°ΡΡΠΈΠ½Ρ, ΡΠΎΡΠΌΠ°Ρ SVG ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ Π½Π΅ ΡΠΎΠ²ΡΠ΅ΠΌ ΠΎΠ±ΡΡΠ½ΡΠΉ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ. Π Π΅Π³ΠΎ ΠΎΡΠ½ΠΎΠ²Ρ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Ρ ΡΠ·ΡΠΊΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ VML ΠΈ PGML, ΡΠΎ Π΅ΡΡΡ ΡΠ΅ΡΡ ΠΈΠ΄Π΅Ρ, ΠΏΠΎ ΡΡΡΠΈ, ΠΎ ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠΌ ΡΠ°ΠΉΠ»Π΅. ΠΡΠΈ ΡΡΠΎΠΌ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΡ ΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΈΠ½ΡΠ΅ΡΠΏΡΠ΅ΡΠΈΡΡΡΡ SVG ΠΊΠ°ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΊΠ°ΠΊ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΌ, ΡΠ°ΠΊ ΠΈ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ. ΠΡΠ΄ΡΡΠΈ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΠΌ ΡΡΠ΅Π΄ΠΈ ΠΏΡΠΎΡΠΈΡ ΡΠΎΡΠΌΠ°ΡΠΎΠ², ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Π½ΡΡ Π΄Π»Ρ Ρ ΡΠ°Π½Π΅Π½ΠΈΡ Π²Π΅ΠΊΡΠΎΡΠ½ΠΎΠΉ Π³ΡΠ°ΡΠΈΠΊΠΈ, Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ SVG Π°ΠΊΡΠΈΠ²Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ Ρ ΡΠ°Π½Π΅Π½ΠΈΡ ΠΈ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½ΠΈΡ Π²Π΅ΠΊΡΠΎΡΠ½ΡΡ ΠΈ ΡΠΌΠ΅ΡΠ°Π½Π½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π² ΠΈΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅.
ΠΠ°ΠΊ ΠΈ Π²ΡΠ΅ ΡΠΎΡΠΌΠ°ΡΡ, SVG ΠΈΠΌΠ΅Π΅Ρ ΡΠ²ΠΎΠΈ ΠΏΠ»ΡΡΡ ΠΈ ΠΌΠΈΠ½ΡΡΡ. Π ΠΏΠ΅ΡΠ²ΡΠΌ ΠΎΡΠ½ΠΎΡΡΡΡΡ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΠΎΡΡΡ Π±Π΅Π· ΠΏΠΎΡΠ΅ΡΠΈ ΠΊΠ°ΡΠ΅ΡΡΠ²Π°, ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΌΠ°Π»ΡΠΉ Π²Π΅Ρ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΈΠ½ΡΠ΅Π³ΡΠ°ΡΠΈΠΈ Π² SVG-Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΡ PNG, GIF, JPG-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ (ΠΏΡΠΈ Π½Π°Π»ΠΈΡΠΈΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅Π³ΠΎ ΠΎΠΏΡΡΠ°) Π² ΡΠ΅ΠΊΡΡΠΎΠ²ΡΡ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ°Ρ , ΠΈΠ½Π΄Π΅ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎΠΈΡΠΊΠΎΠ²ΡΠΌΠΈ ΡΠΎΠ±ΠΎΡΠ°ΠΌΠΈ, ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΈ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΠΎΡΡΡ. Π ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π°ΠΌ ΡΠΎΡΠΌΠ°ΡΠ° ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΎΡΠ½Π΅ΡΡΠΈ Ρ ΠΎΡΠΎΡΡΡ ΡΠΆΠΈΠΌΠ°Π΅ΠΌΠΎΡΡΡ, ΠΎΡΠΊΡΡΡΠΎΡΡΡ ΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΡΡΡ.
Π‘ Π΄ΡΡΠ³ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ SVG Π½Π°ΡΠ»Π΅Π΄ΡΠ΅Ρ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠΈ XML ΡΠΎ Π²ΡΠ΅ΠΌΠΈ Π²ΡΡΠ΅ΠΊΠ°ΡΡΠΈΠΌΠΈ. Π€ΠΎΡΠΌΠ°Ρ ΠΏΠ»ΠΎΡ ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ»ΠΎΠΆΠ½ΡΡ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ², ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΡΠ°ΠΉΠ»Ρ SVG Π±ΡΡΡΡΠΎ Β«Π½Π°Π±ΠΈΡΠ°ΡΡΒ» Π²Π΅Ρ, Π΅ΡΠ»ΠΈ ΡΠΎΡΡΠΎΡΡ ΠΈΠ· ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²Π° ΠΌΠ΅Π»ΠΊΠΈΡ Π΄Π΅ΡΠ°Π»Π΅ΠΉ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠΈΡΠ°ΡΡ Π²Π΅ΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ, ΡΡΠΎ Π·Π°ΡΡΡΠ΄Π½ΡΠ΅Ρ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠΎΡΠΌΠ°ΡΠ° Π² ΠΊΠ°ΡΡΠΎΠ³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡΡ . Π‘ΡΠ΅Π΄ΠΈ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠΎΠ² ΡΠΎΡΠΌΠ°ΡΠ° ΠΎΡΠΌΠ΅ΡΠ°Π΅ΠΌ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½ΠΈΠ·ΠΊΡΡ ΠΊΡΠΎΡΡΠ±ΡΠ°ΡΠ·Π΅ΡΠ½ΠΎΡΡΡ ΠΈ ΠΎΡΡΡΡΡΡΠ²ΠΈΠ΅ Ρ ΠΎΡΡ Π±Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ ΡΡΠ΅Ρ ΠΌΠ΅ΡΠ½ΠΎΠΉ Π³ΡΠ°ΡΠΈΠΊΠΈ.
ΠΡΡΡΠΈΠ΅ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΡ Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ Ρ ΡΠ°ΠΉΠ»Π°ΠΌΠΈ SVG
ΠΠ°ΠΊ ΡΠΆΠ΅ Π±ΡΠ»ΠΎ ΡΠΊΠ°Π·Π°Π½ΠΎ, ΠΎΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ°ΠΉΠ» SVG ΠΌΠΎΠΆΠ½ΠΎ Π² ΠΎΠ±ΡΡΠ½ΠΎΠΌ ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠΌ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ΅, Π½ΠΎ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ Π½ΡΠΆΠ½ΠΎ ΠΎΠ±Π»Π°Π΄Π°ΡΡ ΡΠΏΠ΅ΡΠΈΡΠΈΡΠ΅ΡΠΊΠΈΠΌΠΈ Π·Π½Π°Π½ΠΈΡΠΌΠΈ. ΠΠΎΡΠ°Π·Π΄ΠΎ ΡΠ΄ΠΎΠ±Π½Π΅Π΅ ΠΈ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½Π΅Π΅ Π·Π°Π΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°ΡΡ Π²Π΅ΠΊΡΠΎΡΠ½ΡΠ΅ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΡ.
Adobe Illustrator
ΠΠ°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΠΉ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π½Π° ΡΠΎΠ»Ρ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ° SVG. Adobe Illustrator ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ Π²Π½ΡΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ Π½Π°Π±ΠΎΡΠΎΠΌ ΡΡΠ΅Π΄ΡΡΠ² Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ Ρ Π²Π΅ΠΊΡΠΎΡΠ½ΠΎΠΉ ΠΈ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ Π³ΡΠ°ΡΠΈΠΊΠΎΠΉ. ΠΠ½ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΈ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠ°ΠΊ ΠΏΡΠΎΡΡΡΠ΅ ΡΡΠΊΠΈΠ·Ρ, ΡΠ°ΠΊ ΠΈ ΡΠ»ΠΎΠΆΠ½ΡΠ΅ Ρ ΡΠ΄ΠΎΠΆΠ΅ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΠΈΠ»Π»ΡΡΡΡΠ°ΡΠΈΠΈ. ΠΡΠΈ ΡΠ°Π±ΠΎΡΠ΅ Ρ ΡΠΎΡΠΌΠ°ΡΠΎΠΌ SVG ΡΠ΅Π΄Π°ΠΊΡΠΎΡ Π΄ΠΎΠΏΡΡΠΊΠ°Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ»ΠΎΠ΅Π² ΠΈ ΡΠ·ΡΠΊΠΎΠ² ΡΡΠ΅Π½Π°ΡΠΈΠ΅Π², ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ².
Boxy SVG
ΠΡΠΊΡΡΡΡ SVG-ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π½Π½ΠΎΠ³ΠΎ Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ Ρ ΡΡΠΈΠΌ ΡΠΎΡΠΌΠ°ΡΠΎΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Boxy SVG. ΠΠ°Π½Π½ΡΠΉ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΎΠΌ ΡΡΡΡΠΏΠ°Π΅Ρ Adobe Illustrator, ΠΎΠ΄Π½Π°ΠΊΠΎ Π² Π½ΡΠΌ Π²Ρ Π½Π°ΠΉΠ΄Π΅ΡΠ΅ Π²ΡΠ΅ Π±Π°Π·ΠΎΠ²ΡΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΈ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ SVG. ΠΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ ΡΠ°Π±ΠΎΡΠ° Ρ ΡΠΈΠ³ΡΡΠ°ΠΌΠΈ ΠΈ ΠΎΠ±ΡΠ΅ΠΊΡΠ°ΠΌΠΈ, ΠΈΠΌΠΏΠΎΡΡ ΡΡΠΈΡΡΠΎΠ² ΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΡ ΡΠΎΡΠΌΠ°ΡΠΎΠ², ΡΠ°Π±ΠΎΡΠ° Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΎΠΉ Pixabay, ΠΏΡΠΎΡΠΌΠΎΡΡ ΠΈ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° SVG ΠΈ CSS. ΠΡΠΎΠ³ΡΠ°ΠΌΠΌΠ° Boxy SVG Π΄ΠΎΡΡΡΠΏΠ½Π° ΠΊΠ°ΠΊ ΠΎΠ½Π»Π°ΠΉΠ½-ΡΠ΅ΡΠ²ΠΈΡ ΠΈ ΠΊΠ°ΠΊ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ Windows 10, MacOS ΠΈ Chrome OS.
Vectr
Π§Π΅ΠΌ ΠΎΡΠΊΡΡΡΡ ΡΠ°ΠΉΠ» SVG Π΅ΡΠ΅? ΠΠ»Ρ ΡΠ°Π±ΠΎΡΡ Ρ ΡΠ°ΠΉΠ»Π°ΠΌΠΈ ΡΡΠΎΠ³ΠΎ ΡΠΈΠΏΠ° Π΅ΡΡΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ° Vectr, ΠΎΡΠ΅Π½Ρ Π΄Π°ΠΆΠ΅ Π½Π΅ΠΏΠ»ΠΎΡ ΠΎ ΡΠΏΡΠ°Π²Π»ΡΡΡΠ°ΡΡΡ Ρ Π²ΠΎΠ·Π»ΠΎΠΆΠ΅Π½Π½ΡΠΌΠΈ Π½Π° Π½Π΅Ρ Π·Π°Π΄Π°ΡΠ°ΠΌΠΈ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ. Π ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π΄ΠΎΡΡΡΠΏΠ½Ρ ΡΠ°ΠΊΠΈΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ, ΠΊΠ°ΠΊ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ ΡΠ°ΡΡΠ΅ΠΉ Π²Π΅ΠΊΡΠΎΡΠ½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΠ°Π±ΠΎΡΠ° ΡΠΎ ΡΠ»ΠΎΡΠΌΠΈ, Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° ΠΈ ΠΏΡΠΈΠΌΠΈΡΠΈΠ²ΠΎΠ², ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΡΡΠ΅ΠΊΡΠΎΠ² (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ, ΠΎΠ±Π²ΠΎΠ΄ΠΊΠ°, Π²Π½Π΅ΡΠ½ΡΡ ΠΈ Π²Π½ΡΡΡΠ΅Π½Π½ΡΡ ΡΠ΅Π½Ρ), ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠΎΠ², ΠΏΠ΅ΡΠ°, Π»ΠΈΠ½ΠΈΠΉ ΠΈ Π΄ΡΡΠ³ΠΈΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ². Π£ΡΠΈΠ»ΠΈΡΠ° Vectr Π±Π΅ΡΠΏΠ»Π°ΡΠ½Π°, Π΅ΡΡΡ Π²Π΅ΡΡΠΈΠΈ Π΄Π»Ρ Windows, Linux ΠΈ Chrome OS.
Inkscape
Π ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ Π΄Π²ΡΡ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌ, Inkscape Π½Π΅ Π½ΡΠΆΠ΄Π°Π΅ΡΡΡ Π² ΠΎΡΠΎΠ±ΠΎΠΌ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠΈ. ΠΡΠΎΡ ΠΌΠΎΡΠ½ΡΠΉ ΠΈ ΡΠΎΠ²Π΅ΡΡΠ΅Π½Π½ΠΎ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΠΉ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ ΠΈ Π΄Π»Ρ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΈ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π²Π΅ΠΊΡΠΎΡΠ½ΠΎΠΉ Π³ΡΠ°ΡΠΈΠΊΠΈ Π»ΡΠ±ΠΎΠΉ ΡΠ»ΠΎΠΆΠ½ΠΎΡΡΠΈ, Π½Π°ΡΠΈΠ½Π°Ρ ΠΎΡ SVG-ΠΈΠΊΠΎΠ½ΠΎΠΊ ΠΈ Π·Π°ΠΊΠ°Π½ΡΠΈΠ²Π°Ρ ΠΏΠΎΠ»Π½ΠΎΡΠ΅Π½Π½ΡΠΌΠΈ ΠΈΠ»Π»ΡΡΡΡΠ°ΡΠΈΡΠΌΠΈ. ΠΡΠΎΠ³ΡΠ°ΠΌΠΌΠ° Inkscape ΡΠΌΠ΅Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ ΠΊΠΎΠ½ΡΡΡΠ°ΠΌΠΈ, ΡΠ΅ΠΊΡΡΠΎΠΌ, ΠΌΠ°ΡΠΊΠ΅ΡΠ°ΠΌΠΈ, ΡΠ»ΠΎΡΠΌΠΈ ΠΈ ΠΊΠ°Π½Π°Π»Π°ΠΌΠΈ, Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ°ΠΌΠΈ ΠΈ ΡΠ΅ΠΊΡΡΡΡΠ°ΠΌΠΈ. Π’Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ Π²Π΅ΠΊΡΠΎΡΠΈΠ·Π°ΡΠΈΡ ΡΠ°ΡΡΡΠΎΠ²ΠΎΠΉ Π³ΡΠ°ΡΠΈΠΊΠΈ, ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠΎΠΌ SVG ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅.
ΠΡΡΠ°ΡΠΈ, ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ SVG ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΡΠ΅ΠΌ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° ΡΠ°ΠΉΠ»Π°, Π½ΠΎ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ Π½ΡΠΆΠ½ΠΎ ΠΈΠΌΠ΅ΡΡ Ρ ΠΎΡΡ Π±Ρ Π±Π°Π·ΠΎΠ²ΡΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΎ ΡΠ·ΡΠΊΠ΅ CSS ΠΈ ΠΊΠΎΠ΄Π°Ρ ΡΠ²Π΅ΡΠΎΠ². ΠΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π², ΠΊ ΠΏΡΠΈΠΌΠ΅ΡΡ, ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ style Π² Π²ΡΠ΄Π΅Π»Π΅Π½Π½ΠΎΠΌ Π½Π° ΡΠΊΡΠΈΠ½ΡΠΎΡΠ΅ Π±Π»ΠΎΠΊΠ΅ ΠΊΠΎΠ΄Π°, ΠΌΡ Π·Π°ΠΌΠ΅Π½ΠΈΠ»ΠΈ Π±Π΅Π»ΡΠΉ ΡΠ²Π΅Ρ Π½Π° ΠΊΡΠ°ΡΠ½ΡΠΉ. Π ΡΠ°ΠΊ, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ, Π΅ΡΠ»ΠΈ ΡΠ΅ΠΌ ΠΈ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ SVG, ΡΠΎ Inkscape ΠΈ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΠΌΠΈ Π΅ΠΌΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ°ΠΌΠΈ.
Π§Π΅ΠΌ ΠΎΡΠΊΡΡΡΡ SVG ΠΎΠ½Π»Π°ΠΉΠ½
ΠΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ΅Π½ ΠΎΠ½Π»Π°ΠΉΠ½-ΡΠ΅Π΄Π°ΠΊΡΠΎΡ SVG, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π²Π΅Π±-Π²Π΅ΡΡΠΈΠΈ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌ Boxy SVG, Vectr ΠΈ Inkscape. Π€ΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΠΉ Π½Π°Π±ΠΎΡ ΡΠ°ΠΊΠΈΡ ΡΠ΅Π΄Π°ΠΊΡΠΈΠΉ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΠΎΠ΄ΠΈΠ½ Π² ΠΎΠ΄ΠΈΠ½, ΠΊΠ°ΠΊ Ρ Π΄Π΅ΡΠΊΡΠΎΠΏΠ½ΡΡ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ². ΠΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Inkscape, ΠΊ ΠΏΡΠΈΠΌΠ΅ΡΡ, ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΏΡΡΡΠΈΡΡ Π² ΡΠ°ΠΌΠΊΠ°Ρ ΠΏΡΠΎΠ΅ΠΊΡΠ° www.rollapp.com/app/inkscape.
ΠΡΠ»ΠΈ ΠΆΠ΅ Π²Ρ ΠΈΡΠΈΡΠ΅ ΡΡΠΎ-ΡΠΎ ΠΏΠΎΠΏΡΠΎΡΠ΅, ΠΏΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΠΎΠ½Π»Π°ΠΉΠ½ΠΎΠ²ΡΠΉ Π²Π΅ΠΊΡΠΎΡΠ½ΡΠΉ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ Sketchpad, Π΄ΠΎΡΡΡΠΏΠ½ΡΠΉ ΠΏΠΎ Π°Π΄ΡΠ΅ΡΡ sketch.io/sketchpad. Π Π°ΠΊΡΠΈΠ²Π΅ Sketchpad ΠΈΠΌΠ΅ΡΡΡΡ ΡΠ°ΠΊΠΈΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ, ΠΊΠ°ΠΊ ΠΊΠΈΡΡΠΈ, Π»ΠΈΠ½ΠΈΠΈ, ΡΡΡΠ΅Π»ΠΊΠΈ, ΠΏΡΠΈΠΌΠΈΡΠΈΠ²Ρ, ΠΊΠ»ΠΈΠΏΠ°ΡΡ, ΠΏΠ΅ΡΠΎ, ΠΌΠ΅Π»ΠΎΠΊ, Π°ΡΡΠΎΠ³ΡΠ°Ρ, Π·Π°Π»ΠΈΠ²ΠΊΠ° ΠΈ Ρ.ΠΏ. ΠΡΡΡ ΡΠ°Π±ΠΎΡΠ° ΡΠΎ ΡΠ»ΠΎΡΠΌΠΈ, ΠΏΠ°Π»ΠΈΡΡΠΎΠΉ ΠΈ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ°ΠΌΠΈ.
Π Π²ΠΎΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ SVG-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Β«Ρ Π½ΡΠ»ΡΒ» ΡΠ΅ΡΠ²ΠΈΡ ΠΌΠ°Π»ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ, Ρ ΠΎΡΡ ΡΡΠ½ΠΊΡΠΈΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ»ΡΠ½ΠΎΠ³ΠΎ ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈΠΌ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ. ΠΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ Π½Π° Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ, ΡΠ°ΠΊ ΡΡΠΎ Π²Ρ Π»Π΅Π³ΠΊΠΎ Ρ Π½ΠΈΠΌ ΡΠ°Π·Π±Π΅ΡΠ΅ΡΠ΅ΡΡ.
ΠΠΎΠ½Π²Π΅ΡΡΠ΅ΡΡ SVG Π² PNG
ΠΡΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΡΠ°ΠΉΠ» SVG ΠΊΠ°ΠΊ ΠΎΠ±ΡΡΠ½ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΎΡΡΠΎ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΈΠ² Π΅Π³ΠΎ Π½Π° ΠΎΠΊΠ½ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, Π½ΠΎ Π±ΡΠ²Π°Π΅Ρ ΠΈ ΡΠ°ΠΊ, ΡΡΠΎ SVG-Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΊΠΎΠ½Π²Π΅ΡΡΠΈΡΠΎΠ²Π°ΡΡ Π² Π±ΠΎΠ»Π΅Π΅ Π΄ΠΎΡΡΡΠΏΠ½ΡΠΉ ΠΈ ΠΏΡΠΈΠ²ΡΡΠ½ΡΠΉ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΡΠΎΡΠΌΠ°Ρ, ΡΠΊΠ°ΠΆΠ΅ΠΌ, PNG. ΠΡΠ»ΠΈ ΠΊΠΎΠ½Π²Π΅ΡΡΠΈΡΡΠ΅ΠΌΡΡ ΡΠ°ΠΉΠ»ΠΎΠ² ΠΌΠ½ΠΎΠ³ΠΎ, Π΅ΡΡΡ ΡΠΌΡΡΠ» Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎΠΉ ΡΡΠ»Π·ΠΎΠΉ SVG2PNG, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠ΅ΠΉ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²ΡΠ²Π°ΡΡ SVG Π² PNG Π² ΠΏΠ°ΠΊΠ΅ΡΠ½ΠΎΠΌ ΡΠ΅ΠΆΠΈΠΌΠ΅. Π§ΡΠΎΠ±Ρ ΠΊΠΎΠ½Π²Π΅ΡΡΠΈΡΠΎΠ²Π°ΡΡ SVG Π² PNG, Π·Π°ΠΏΡΡΡΠΈΡΠ΅ ΡΡΠΈΠ»ΠΈΡΡ, ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΈΡΠ΅ Π² Π΅Π΅ ΠΎΠΊΠ½ΠΎ Π²Π΅ΠΊΡΠΎΡΠ½ΡΠ΅ ΡΠ°ΠΉΠ»Ρ, Π½Π°ΠΆΠΌΠΈΡΠ΅ Β«StartΒ» ΠΈ ΠΏΠΎΠ»ΡΡΠΈΡΠ΅ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ.
Π ΠΎΡΡΠ°Π»ΡΠ½ΡΡ ΡΠ»ΡΡΠ°ΡΡ Π±ΡΠ΄Π΅Ρ ΠΌΠ΅Π½ΡΡΠ΅ ΠΌΠΎΡΠΎΠΊΠΈ, Π΅ΡΠ»ΠΈ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ΡΡ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΠΌΠΈ ΠΊΠΎΠ½Π²Π΅ΡΡΠ΅ΡΠ°ΠΌΠΈ SVG Π² PNG, ΡΠ°Π±ΠΎΡΠ°ΡΡΠΈΠΌΠΈ Π² ΡΠ΅ΠΆΠΈΠΌΠ΅ ΠΎΠ½Π»Π°ΠΉΠ½. Π ΡΠ°ΡΡΠ½ΠΎΡΡΠΈ, ΡΡΠΎ svgtopng.com/ru, convertio.co/ru/svg-png ΠΈ image.online-convert.com/ru/convert-to-png.
ΠΠ°ΠΊΠΎΠΉ ΠΈΠ· Π½ΠΈΡ ΡΠ΄ΠΎΠ±Π½Π΅Π΅, ΡΠ΅ΡΠ°ΠΉΡΠ΅ ΡΠ°ΠΌΠΈ. ΠΡΠ΅ ΡΡΠΈ ΡΡΠΈ ΠΊΠΎΠ½Π²Π΅ΡΡΠ΅ΡΠ° Π±Π΅ΡΠΏΠ»Π°ΡΠ½Ρ ΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΠ°Π±ΠΎΡΡ Π² ΠΏΠ°ΠΊΠ΅ΡΠ½ΠΎΠΌ ΡΠ΅ΠΆΠΈΠΌΠ΅, Π° Online-Convert Π²Π΄ΠΎΠ±Π°Π²ΠΎΠΊ ΠΊΠΎ Π²ΡΠ΅ΠΌΡ Π΅ΡΠ΅ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π³ΠΈΠ±ΠΊΠΎΠΉ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ Π²ΡΡ ΠΎΠ΄Π½ΡΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠ² PNG-ΡΠ°ΠΉΠ»Π°.
ΠΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ ΡΠΎΡΠΌΠ°ΡΠΎΠΌ SVG: ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ Π΄Π»Ρ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΡ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ²
Π€Π°ΠΉΠ»Ρ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ SVG Β«Π»ΡΠ³ΠΊΠΈΠ΅Β» ΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΡΠ΅, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΌΠΎΠ΄ΠΈΡΠΈΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ΅ΡΠ΅Π· ΠΊΠΎΠ΄. ΠΠ½ΠΈ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°ΡΡ Π²ΡΡΠΎΠΊΠΎΠ΅ ΠΊΠ°ΡΠ΅ΡΡΠ²ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΊΡΠ°Π½Π°. Π‘ Π½ΠΈΠΌΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΊΠ°ΠΊ Ρ ΠΎΠ±ΡΡΠ½ΡΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΠ½Π»Π°ΠΉΠ½ Π² HTML. ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΎ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π°Ρ ΡΠΎΡΠΌΠ°ΡΠ° Π² ΡΡΠ°ΡΡΠ΅.
ΠΠ°ΡΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ SVG
ΠΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½Ρ ΡΡΡΠΊΠΈΠ΅, Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ ΠΈΠ»ΠΈ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°, ΠΈΠΊΠΎΠ½ΠΊΠΈ, Π»ΠΎΠ³ΠΎΡΠΈΠΏΡ, Π²Π΅ΠΊΡΠΎΡΠ½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΡΠΎΠΈΡ ΠΏΠΎΠ΄ΡΠΌΠ°ΡΡ ΠΎΠ± ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΠΎΡΠΌΠ°ΡΠ° SVG. ΠΠΈΠΆΠ΅ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Ρ Π΅Π³ΠΎ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΠΈ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π°.
ΠΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΡΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΠ΅ΠΌ ΠΊΠ°ΡΠ΅ΡΡΠ²Π° pixel perfect
ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΠΎΡΠΌΠ°ΡΠ° PNG ΠΈΠ»ΠΈ ΡΠ°ΡΡΡΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Ρ ΠΏΠΈΠΊΡΠ΅Π»ΡΠΌΠΈ. ΠΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΡΠ½ΠΈΠΆΠ°Π΅Ρ Π΅Ρ ΠΊΠ°ΡΠ΅ΡΡΠ²ΠΎ. ΠΠΎΡΡΠΎΠΌΡ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·Π½ΡΡ ΡΠΎΡΠΎ Π΄Π»Ρ Π΄Π΅Π²Π°ΠΉΡΠΎΠ² Ρ ΡΠ°Π·Π½ΡΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΊΡΠ°Π½Π°.
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ SVG ΡΠΎΡ ΡΠ°Π½ΡΡΡ ΠΊΠ°ΡΠ΅ΡΡΠ²ΠΎ ΠΏΡΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ Π½Π°ΡΠΈΡΠΎΠ²Π°Π½Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΠ΄Π°, Π° Π½Π΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.
Π‘ΡΠ°Π²Π½Π΅Π½ΠΈΠ΅ ΠΊΠ°ΡΠ΅ΡΡΠ²Π° ΡΠ°ΡΡΡΠΎΠ²ΡΡ ΠΈ Π²Π΅ΠΊΡΠΎΡΠ½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΌΠΎΠ΄ΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ SVG ΠΌΠΎΠΆΠ½ΠΎ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ»ΠΈ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅ΡΠ°, ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΡΡΠΈΡΡΡ ΠΈ ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅. ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²Π΅ΠΊΡΠΎΡΠ½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΌΠΎΠΆΠ½ΠΎ Π΄Π΅Π»Π°ΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌΠΈ.
ΠΠ΅Π±ΠΎΠ»ΡΡΠΎΠΉ Β«Π²Π΅ΡΒ» ΡΠ°ΠΉΠ»ΠΎΠ²
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ PNG ΡΡΠ°Π½ΠΎΠ²ΡΡΡΡ ΠΎΡΠ΅Π½Ρ Β«ΡΡΠΆΡΠ»ΡΠΌΠΈΒ», ΠΊΠΎΠ³Π΄Π° Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ Π²ΡΡΠΎΠΊΠΎΠ΅ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅. ΠΡΠΎ Π½Π΅Π³Π°ΡΠΈΠ²Π½ΠΎ Π²Π»ΠΈΡΠ΅Ρ Π½Π° ΡΠΊΠΎΡΠΎΡΡΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡΡ, ΡΡΠΎ Π² ΡΠ²ΠΎΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ ΠΌΠΎΠΆΠ΅Ρ ΡΡ ΡΠ΄ΡΠΈΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΡ ΡΠ°ΠΉΡΠ° Π² ΠΏΠΎΠΈΡΠΊΠΎΠ²ΠΎΠΉ Π²ΡΠ΄Π°ΡΠ΅.
Π€Π°ΠΉΠ»Ρ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ JPG ΡΡΡΡ Β«Π»Π΅Π³ΡΠ΅Β» ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ Π² PNG, Π½ΠΎ Π²ΡΡ ΡΠ°Π²Π½ΠΎ ΠΎΠ½ΠΈ ΡΠ»ΠΈΡΠΊΠΎΠΌ Β«ΡΡΠΆΡΠ»ΡΠ΅Β». Π ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ SVG ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡ ΡΠΎΠ±ΠΎΠΉ ΠΊΠΎΠ΄, ΠΏΠΎΡΡΠΎΠΌΡ ΠΎΠ½ΠΈ Β«Π²Π΅ΡΡΡΒ» ΠΎΡΠ΅Π½Ρ ΠΌΠ°Π»ΠΎ. ΠΠΎΡΡΠΎΠΌΡ ΡΠΌΠ΅Π»ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΡΠΎΡ ΡΠΎΡΠΌΠ°Ρ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΈΠΊΠΎΠ½ΠΎΠΊ, Π»ΠΎΠ³ΠΎΡΠΈΠΏΠΎΠ² ΠΈ Π΄ΡΡΠ³ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°.
ΠΠΎΡΡΡΠΏΠ½ΠΎΡΡΡ
ΠΡΠ»ΠΈ SVG-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°Ρ ΡΠ΅ΠΊΡΡ, ΠΏΠΎΠΈΡΠΊΠΎΠ²ΠΈΠΊΠΈ ΠΌΠΎΠ³ΡΡ ΠΈΡ ΠΈΠ½Π΄Π΅ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΠΈ Π²ΡΠ΄Π°Π²Π°ΡΡ Π² ΠΎΡΠ²Π΅Ρ Π½Π° Π·Π°ΠΏΡΠΎΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ. Π‘ΠΊΡΠΈΠ½ΡΠΈΠ΄Π΅ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΡΠ»Π°Π±ΠΎΠ²ΠΈΠ΄ΡΡΠΈΠ΅ ΠΈ ΡΠ»Π΅ΠΏΡΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ, ΡΠΎΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ SVG. ΠΡΠΎ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΡ ΡΠ°ΠΉΠ»ΠΎΠ² ΡΡΠΎΠ³ΠΎ ΡΠΎΡΠΌΠ°ΡΠ° Π΄Π»Ρ Π²ΡΠ΅Ρ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Π΅ΠΉ ΡΠ°ΠΉΡΠ°.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ SVG: ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½ΡΠ½Π½ΡΠ΅ ΠΏΡΠ°ΠΊΡΠΈΠΊΠΈ
ΠΠ΅ΠΊΡΠΎΡΠ½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄ΠΎΠ»Π³ΠΎ Π±ΡΠ»ΠΈ Π½Π΅ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠΌΠΈ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Π½Π΅ Π²ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΈΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π»ΠΈ. Π Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ ΡΡΠ° ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° ΡΠ΅ΡΠ΅Π½Π°. ΠΠΎΡΡΠΎΠΌΡ ΡΠΎΡΠΌΠ°Ρ Π°ΠΊΡΠΈΠ²Π½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠ΅ΡΠ΅Π½ΠΈΡ Π·Π°Π΄Π°Ρ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ. ΠΠ°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠ΅ ΠΊΠ΅ΠΉΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Ρ Π½ΠΈΠΆΠ΅.
ΠΠΎΠ³ΠΎΡΠΈΠΏΡ ΠΈ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π² SVG
ΠΠΎΠ³ΠΎΡΠΈΠΏΡ ΠΈ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠΎΡ ΡΠ°Π½ΡΡΡ ΠΊΠ°ΡΠ΅ΡΡΠ²ΠΎ Π½Π° ΡΠΊΡΠ°Π½Π°Ρ Ρ Π»ΡΠ±ΡΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ. Π§ΡΡΠΊΠΎΡΡΡ Π½ΡΠΆΠ½Π° Π²ΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° ΡΠ°ΠΉΡΠ°: ΠΎΡ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π΄ΠΎ ΡΠΊΡΠ°Π½Π½ΠΎΠΉ Π·Π°ΡΡΠ°Π²ΠΊΠΈ.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ SVG ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ Π½Π°Π΄ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Π»ΠΈΠ½ΠΈΠ΅ΠΉ, ΡΠΎΡΠΌΠΎΠΉ ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. Π’Π°ΠΊΠΆΠ΅ ΡΠΎΡΠΌΠ°Ρ ΠΎΠ±Π»Π΅Π³ΡΠ°Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΌΠ°Π½ΠΈΠΏΡΠ»ΠΈΡΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ.
ΠΠ½ΡΠΎΠ³ΡΠ°ΡΠΈΠΊΠ°
ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ SVG ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈ ΠΎΠ±Π½ΠΎΠ²Π»ΡΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ ΠΈΠ»ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π΄Π°Π½Π½ΡΡ . ΠΠΎΡΡΠΎΠΌΡ SVG β ΠΈΠ΄Π΅Π°Π»ΡΠ½ΡΠΉ Π²Π°ΡΠΈΠ°Π½Ρ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ ΠΊΠ°ΡΡ ΠΈ ΠΈΠ½ΡΠΎΠ³ΡΠ°ΡΠΈΠΊΠΈ.
ΠΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ SVG ΡΠ΄ΠΎΠ±Π½ΠΎ Π΄Π΅Π»Π°ΡΡ ΡΠ°Π·Π½ΡΠ΅ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠΎΡΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈΠ»ΠΈ ΠΏΡΠ΅Π²ΡΠ°ΡΠ΅Π½ΠΈΠ΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² Π΄ΡΡΠ³ΠΎΠΉ. Π ΠΏΡΠΈΠΌΠ΅ΡΡ, ΠΌΠΎΠΆΠ½ΠΎ ΠΌΠ΅Π½ΡΡΡ ΡΠΎΡΠΌΡ Π±ΡΠΊΠ² ΠΈΠ»ΠΈ ΡΡΠ°Π½ΡΡΠΎΡΠΌΠΈΡΠΎΠ²Π°ΡΡ ΠΎΠ΄ΠΈΠ½ Π»ΠΎΠ³ΠΎΡΠΈΠΏ Π² Π΄ΡΡΠ³ΠΎΠΉ.
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ
SVG ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ CSS-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΠΏΠΎΡΡΠΎΠΌΡ ΡΡΠΎΠ½ΡΠ΅Π½Π΄-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌ Π½Π΅ ΠΏΡΠΈΠ΄ΡΡΡΡ ΠΈΠ·ΡΡΠ°ΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ΅Ρ Π½ΠΈΠΊΠΈ. Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ SMIL SVG β ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠΌ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π²Π΅ΠΊΡΠΎΡΠ½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. SMIL ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌ Π΄Π°ΠΆΠ΅ Π±ΠΎΠ»ΡΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ, ΡΠ΅ΠΌ ΠΎΠ±ΡΡΠ½Π°Ρ CSS-Π°Π½ΠΈΠΌΠ°ΡΠΈΡ.
ΠΠ»Π»ΡΡΡΡΠ°ΡΠΈΠΈ ΠΈ ΡΠΈΡΡΠ½ΠΊΠΈ
ΠΠ±ΡΡΠ½ΡΠ΅ ΡΠΈΡΡΠ½ΠΊΠΈ ΠΈ ΠΈΠ»Π»ΡΡΡΡΠ°ΡΠΈΠΈ, Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΈ Π½Π΅ ΡΠ»ΠΈΡΠΊΠΎΠΌ ΡΠ»ΠΎΠΆΠ½ΡΠ΅, Π»Π΅Π³ΠΊΠΎ ΡΡΠ°Π½ΡΡΠΎΡΠΌΠΈΡΠΎΠ²Π°ΡΡ Π² SVG. Π’Π°ΠΊΠΆΠ΅ ΡΡΠΎ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΡΠΉ ΡΠΎΡΠΌΠ°Ρ Π΄Π»Ρ ΡΠΊΠ΅ΡΡΠ΅ΠΉ, ΡΡ Π΅ΠΌ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π΄Π»Ρ ΠΈΠ»Π»ΡΡΡΡΠ°ΡΠΈΠΉ, ΡΡ Π΅ΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡΠΈΡ ΠΏΡΠΈΠ½ΡΠΈΠΏ ΡΠ°Π±ΠΎΡΡ ΠΊΠ°ΠΊΠΎΠ³ΠΎ-ΡΠΎ ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌΠ°.
ΠΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΡ ΠΈ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ
SVG ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ»ΠΎΠΆΠ½ΡΡ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ½ΡΠ΅Π³ΡΠΈΡΡΡΡΡΡ Ρ Π½Π°ΡΡΡΠ΅Π½Π½ΡΠΌΠΈ ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡΠΌΠΈ (RIA, rich internet application). ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌ ΡΠΎΡΠΌΠ°ΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° ΠΏΠΎΠ»ΡΡΠ°ΡΡΡΡ Π»ΡΠ³ΠΊΠΈΠΌΠΈ, ΠΏΡΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌΠΈ ΠΈ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠΌΠΈ.
ΠΠ°Π»Π΅Π΅ ΡΠ΅ΡΡ ΠΏΠΎΠΉΠ΄ΡΡ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΡΠ°ΠΉΠ»Ρ SVG Π½Π° ΡΠ°ΠΉΡ.
ΠΠ·ΡΡΠ°ΠΉΡΠ΅ Π²ΡΡΡΡΠΊΡ Π½Π° Π₯Π΅ΠΊΡΠ»Π΅ΡΠ΅ Π ΡΠ°ΠΌΠΊΠ°Ρ ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΈ Β«ΠΠ΅ΡΡΡΠ°Π»ΡΡΠΈΠΊΒ» Π²Ρ ΠΈΠ·ΡΡΠΈΡΠ΅ HTML5 ΠΈ CSS3, Π½Π°ΡΡΠΈΡΠ΅ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Flex, Grid, Sass, Bootstrap. Π ΠΏΡΠΎΡΠ΅ΡΡΠ΅ ΠΎΠ±ΡΡΠ΅Π½ΠΈΡ ΡΠ²Π΅ΡΡΡΠ°Π΅ΡΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΠ»Π½ΠΎΡΠ΅Π½Π½ΡΡ Π»Π΅Π½Π΄ΠΈΠ½Π³ΠΎΠ² ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡΠ΅ ΠΈΡ Π² ΠΏΠΎΡΡΡΠΎΠ»ΠΈΠΎ. ΠΠ°Π·ΠΎΠ²ΡΠ΅ ΠΊΡΡΡΡ Π² ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΈ Π΄ΠΎΡΡΡΠΏΠ½Ρ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ SVG Π² HTML ΠΈ CSS
Π€Π°ΠΉΠ»Ρ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ SVG ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ ΡΠ°ΠΉΡΠ° ΡΡΠ΅Π΄ΡΡΠ²Π°ΠΌΠΈ HTML ΠΈ CSS.
Π’Π΅Π³ img
ΠΠ΅ΡΠ²ΡΠΉ ΡΠΏΠΎΡΠΎΠ± β URL ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ Π² Π°ΡΡΠΈΠ±ΡΡΠ΅ src ΡΠ΅Π³Π° img. Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π²Ρ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Ρ ΡΠΎΡΠΌΠ°ΡΠΎΠΌ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°ΠΌΠΈ jpg, png ΠΈ ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅.
ΠΡΠ»ΠΈ Π²Ρ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ΅ΡΠ΅Π· ΡΠ΅Π³ img, Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS. ΠΠΎ Π²Ρ Π½Π΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΌΠ°Π½ΠΈΠΏΡΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ JavaScript ΠΈ Π²Π½Π΅ΡΠ½ΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ. ΠΡΠΈ ΡΡΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ CSS ΠΈΠ½Π»Π°ΠΉΠ½ Π΄Π»Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΊΠΎΠ΄Π° SVG.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ SVG Π² CSS
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ SVG ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ Π² ΡΠ²ΠΎΠΉΡΡΠ²Π΅ background-image, ΠΊΠ°ΠΊ ΡΠΎΡΠΎ Π² Π΄ΡΡΠ³ΠΈΡ ΡΠΎΡΠΌΠ°ΡΠ°Ρ . ΠΠΈΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅Ρ ΠΊΠΎΠ΄Π°.
ΠΡΠΎΡ ΡΠΏΠΎΡΠΎΠ± ΡΠΎΡ ΡΠ°Π½ΡΠ΅Ρ Π²ΡΠ΅ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π° Π²Π΅ΠΊΡΠΎΡΠ½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, Π²ΠΊΠ»ΡΡΠ°Ρ Π²ΡΡΠΎΠΊΡΡ ΡΠ΅ΡΠΊΠΎΡΡΡ Π½Π° ΡΠΊΡΠ°Π½Π°Ρ Ρ Π»ΡΠ±ΡΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ. Π’Π°ΠΊΠΆΠ΅ ΡΡΠΎΡ ΡΠΏΠΎΡΠΎΠ± ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡ, ΠΏΠΎΠ²ΡΠΎΡΡΡΡ ΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
ΠΠ½Π»Π°ΠΉΠ½ SVG Π² HTML
Π€Π°ΠΉΠ» SVG ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΠΊΡΡΡΡ Π² Π»ΡΠ±ΠΎΠΌ ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠΌ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ΅, ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠΎΠ΄ ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π΅Π³ΠΎ Π² HTML-ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡΠΎ Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ SVG ΠΈΠ½Π»Π°ΠΉΠ½. ΠΡΠΈΠΌΠ΅Ρ Π½ΠΈΠΆΠ΅.
Π’Π°ΠΊΠΎΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ ΡΠΌΠ΅Π½ΡΡΠ°Π΅Ρ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ http-Π·Π°ΠΏΡΠΎΡΠΎΠ² ΠΈ ΡΠΎΠΊΡΠ°ΡΠ°Π΅Ρ Π²ΡΠ΅ΠΌΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡΡ. Π ΡΠ΅Π³Π°Ρ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΊΠ»Π°ΡΡΡ ΠΈ id ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΡ Π΄Π»Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ SVG Π² ΡΠΎΡΠΌΠ°ΡΠ΅ ΠΊΠΎΠ΄Π°
Π SVG-ΡΠ°ΠΉΠ»Π°Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΡΠΉ Π½Π° XML ΡΠ·ΡΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠΏΠΈΡΡΠ²Π°Π΅Ρ Π²Π΅ΠΊΡΠΎΡΠ½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠ°ΠΊ ΠΈ HTML, ΡΡΠΎ ΡΠ·ΡΠΊ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ. ΠΠΎ ΠΊΠΎΠ΄ SVG ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΌΠ°Π½ΠΈΠΏΡΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΠΊ Π½ΠΈΠΌ ΡΡΡΠ΅ΠΊΡΡ.
ΠΠΎΠ΄ SVG ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π² HTML-ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈΠ»ΠΈ ΠΏΠΈΡΠ°ΡΡ Π΅Π³ΠΎ Π² ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ ΡΠ°ΠΉΠ»Π°Ρ . ΠΠΈΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΎΠΊΡΡΠΆΠ½ΠΎΡΡΠΈ ΠΈ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ SVG.
ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΎ ΡΠ°Π±ΠΎΡΠ΅ Ρ ΠΏΡΠΎΡΡΡΠΌΠΈ ΡΠΈΠ³ΡΡΠ°ΠΌΠΈ Π½ΠΈΠΆΠ΅.
Π ΠΈΡΡΠ΅ΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ SVG: ΠΊΡΡΠ³
Π§ΡΠΎΠ±Ρ Π½Π°ΡΠΈΡΠΎΠ²Π°ΡΡ ΠΊΡΡΠ³, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΡΡΠΈ Π°ΡΡΠΈΠ±ΡΡΠ°:
ΠΠΎΠ΄, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΠΈΡΠΎΠ²Π°ΡΡ ΠΊΡΡΠ³, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π½ΠΈΠΆΠ΅. Π¦Π²Π΅Ρ Π»ΠΈΠ½ΠΈΠΈ ΠΈ ΡΠΎΠ½Π° ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΈΠ½Π»Π°ΠΉΠ½ ΠΈΠ»ΠΈ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ.
ΠΡΡΠ³ Π½Π°ΡΠΈΡΠΎΠ²Π°Π½ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΎΠ±ΡΡΠΆΠ΄Π°Π΅ΠΌΠΎΠ³ΠΎ ΡΠΎΡΠΌΠ°ΡΠ°
Π ΠΈΡΡΠ΅ΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ SVG: ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠΎΠ² Ρ ΠΏΠΎΠΌΠΎΡΡΡ SVG ΠΏΠΎΡ ΠΎΠΆΠ΅ Π½Π° ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΠΊΡΡΠΆΠ½ΠΎΡΡΠ΅ΠΉ. ΠΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ ΡΠ΅Π½ΡΡΠ° ΠΏΠΎ ΠΎΡΡΠΌ x ΠΈ y, Π° ΡΠ°ΠΊΠΆΠ΅ Π²ΡΡΠΎΡΡ ΠΈ ΡΠΈΡΠΈΠ½Ρ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ°. ΠΡΠΈΠΌΠ΅Ρ ΠΊΠΎΠ΄Π° Π½ΠΈΠΆΠ΅.
ΠΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ Π½Π°ΡΠΈΡΠΎΠ²Π°Π½ Ρ ΠΏΠΎΠΌΠΎΡΡΡ SVG
Π ΠΈΡΡΠ΅ΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ SVG: Π»ΠΈΠ½ΠΈΡ
Π§ΡΠΎΠ±Ρ Π½Π°ΡΠΈΡΠΎΠ²Π°ΡΡ Π»ΠΈΠ½ΠΈΡ, Π½ΡΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ ΠΏΠΎ ΠΎΡΡΠΌ x ΠΈ y Π΄Π²ΡΡ ΡΠΎΡΠ΅ΠΊ. Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΡΠ²Π΅Ρ ΠΈ ΡΠΎΠ»ΡΠΈΠ½Ρ Π»ΠΈΠ½ΠΈΠΈ. ΠΠΎΠ΄ Π½ΠΈΠΆΠ΅ Π½Π°Π²Π΅ΡΠ½ΡΠΊΠ° Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΏΠΎΠ½ΡΡΠ½Π΅Π΅ ΠΎΠ±ΡΡΡΠ½Π΅Π½ΠΈΡ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ.
Π ΠΈΡΡΠ΅ΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ SVG: Π·Π²Π΅Π·Π΄Π°
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ SVG ΠΌΠΎΠΆΠ½ΠΎ ΡΠΈΡΠΎΠ²Π°ΡΡ Π·Π²ΡΠ·Π΄Ρ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΠΌΠ½ΠΎΠ³ΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠΈ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ ΡΠΎΡΠ΅ΠΊ ΡΠ³Π»ΠΎΠ² ΡΠΈΠ³ΡΡΡ. ΠΡΠΈΠΌΠ΅Ρ ΠΊΠΎΠ΄Π° Π½ΠΈΠΆΠ΅.
Π‘Π»ΠΎΠΆΠ½ΡΠΉ ΠΌΠ½ΠΎΠ³ΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ SVG
Π ΠΈΡΡΠ΅ΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ SVG: ΠΏΡΡΠΈ
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΌΠΎΠΆΠ½ΠΎ ΡΠΈΡΠΎΠ²Π°ΡΡ Π»ΠΎΠΌΠ°Π½ΡΠ΅ ΠΊΡΠΈΠ²ΡΠ΅. ΠΠ½ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΎΠ±ΡΠ΅ΠΊΡΡ ΡΠ°Π·Π½ΠΎΠΉ ΡΠΎΡΠΌΡ. Π‘ ΠΏΠΎΠΌΠΎΡΡΡ Π°ΡΡΠΈΠ±ΡΡΠ° d ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΠΏΡΡΡ ΠΈΠ»ΠΈ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ Π»ΠΎΠΌΠ°Π½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ. ΠΠΎΠΌΠ°Π½Π΄Π° M ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, Π° m β Π΄Π»Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ. Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΠΌΠ°Π½Π΄Ρ L ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΡΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ Π½ΠΎΠ²ΠΎΠΉ ΡΠΎΡΠΊΠΈ.
ΠΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ path:
Π ΡΡΠΎ ΠΏΡΠΈΠΌΠ΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ Π»ΠΈΠ½ΠΈΠΉ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ path:
Π ΠΈΡΡΠ΅ΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ SVG: ΠΊΡΠΈΠ²ΡΠ΅
ΠΠ»Ρ ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΊΡΠΈΠ²ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΊΠΎΠΌΠ°Π½Π΄Π° C. Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π½ΠΈΠΆΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΡΡ Π½Π°ΡΠ°Π»ΠΎ ΠΊΡΠΈΠ²ΠΎΠΉ, ΡΠΎΡΠΊΠΈ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΈ ΠΊΠΎΠ½Π΅Ρ ΠΊΡΠΈΠ²ΠΎΠΉ.
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΠΌΠ°Π½Π΄Ρ S ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΡΡΡ ΠΊΡΠΈΠ²ΡΠ΅ ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠ»ΠΎΠΆΠ½ΡΠ΅ ΡΠΎΡΠΌΡ.
Π§ΠΈΡΠ°ΠΉΡΠ΅ ΡΠ°ΠΊΠΆΠ΅ ΠΠΎΠ³Π΄Π° ΡΠΎΠ±ΠΎΡΡ Π·Π°ΠΌΠ΅Π½ΡΡ Π²Π΅ΡΡΡΠ°Π»ΡΡΠΈΠΊΠΎΠ² Π½Π° ΡΡΠ½ΠΊΠ΅ ΡΡΡΠ΄Π°: Π±ΠΎΠ»ΡΡΠ°Ρ ΠΎΠ±Π·ΠΎΡΠ½Π°Ρ ΡΡΠ°ΡΡΡ ΠΎ ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΈ Ρ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡΠΌΠΈ ΡΠΊΡΠΏΠ΅ΡΡΠΎΠ².
ΠΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ SVG
Π€ΠΎΡΠΌΠ°Ρ SVG ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΠ΅Π³
ΠΠ±ΡΡΠ½ΡΠΉ ΡΠ΅ΠΊΡΡ ΡΠΎΠ·Π΄Π°Π½ Ρ ΠΏΠΎΠΌΠΎΡΡΡ SVG
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° stroke ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°ΡΡ ΡΠ²Π΅Ρ ΡΡΠΈΡΡΠ°. ΠΠΎΠ·ΠΈΡΠΈΡ ΡΠ΅ΠΊΡΡΠ° Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΠ°ΠΌΠΈ x ΠΈ y. Π ΡΠ²ΠΎΠΉΡΡΠ²Π°Ρ stroke ΠΈ fill ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΡ.
ΠΠ°ΠΊ ΡΠΏΡΠ°Π²Π»ΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ ΡΡΠΈΡΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ svg
SVG ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΏΡΠ°Π²Π»ΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ ΡΡΠΈΡΡΠ°:
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅Π³Π° ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΠ±ΡΠ°ΡΡ ΠΎΠ΄Π½ΠΎ ΠΈΠ»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ»ΠΎΠ² Π² ΡΠ΅ΠΊΡΡΠ΅ ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°.
Π’Π°ΠΊΠΆΠ΅ SVG ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠ΅ΡΠ΅Π²ΠΎΡΠ°ΡΠΈΠ²Π°ΡΡ ΡΠ΅ΠΊΡΡ, ΠΌΠ΅Π½ΡΡΡ ΡΠ²Π΅Ρ Π»ΠΈΠ½ΠΈΠΈ ΠΈ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π±ΡΠΊΠ² ΠΈ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ Π΄ΡΡΠ³ΠΈΠ΅ ΡΡΠ°Π½ΡΡΠΎΡΠΌΠ°ΡΠΈΠΈ. ΠΠΈΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠΎΠ½ΡΡΡΠ° ΡΠ΅ΠΊΡΡΠ°, Π½Π°ΠΏΠΈΡΠ°Π½Π½ΠΎΠ³ΠΎ ΡΠΏΡΠ°Π²Π° Π½Π°Π»Π΅Π²ΠΎ. ΠΠΎΡΠ»Π΅Π΄Π½Π΅Π΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ² direction ΠΈ unicode-bidi.
ΠΌΠΎΠΆΠ½ΠΎ ΡΠ²ΡΠ·ΡΠ²Π°ΡΡ ΡΠ΅ΠΊΡΡ Ρ ΠΏΡΡΡΠΌΠΈ. ΠΡΠΎ Π΄Π΅Π»Π°Π΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π°ΡΡΠΈΠ±ΡΡΠ° xlink:href. ΠΡΠΈΠΌΠ΅Ρ ΠΊΠΎΠ΄Π° Π½ΠΈΠΆΠ΅.
ΠΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ CSS Π² SVG
ΠΠΎΠ΄ CSS ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΈΠ½Π»Π°ΠΉΠ½ Π² ΠΊΠΎΠ΄Π΅ SVG. Π‘ΠΌΠΎΡΡΠΈΡΠ΅ ΠΏΡΠΈΠΌΠ΅Ρ.
Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΈΡΠ°ΡΡ CSS Π² ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ ΡΠ°ΠΉΠ»Π°Ρ ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΡΡΠΈΠ»ΠΈ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ SVG. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π² SVG ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΠΊΠ»Π°ΡΡ.
Π CSS ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ ΡΡΠΈΠΌ ΠΊΠ»Π°ΡΡΠΎΠΌ.
ΠΠΌΠ΅ΡΡΠΎ Π·Π°ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ: ΠΊΠ°ΠΊ Π΄Π΅Π»Π° Ρ SVG 2.0
SVG 2.0 Π°ΠΊΡΠΈΠ²Π½ΠΎ ΡΠ°Π·ΡΠ°Π±Π°ΡΡΠ²Π°Π΅ΡΡΡ. ΠΡΠΎΠ΄ΡΠΊΡ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² ΡΡΠ°Π΄ΠΈΠΈ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ (Candidate Recommendation). ΠΡΠ°ΡΠ·Π΅ΡΡ Π½Π΅ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ SVG 2.0. Π Π½ΠΎΠ²ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ HTML 5 ΠΈ WOFF (web open font format). Π‘Π»Π΅Π΄ΠΈΡΡ Π·Π° ΡΡΠ°Π΄ΠΈΡΠΌΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ SVG 2.0 ΠΌΠΎΠΆΠ½ΠΎ Π½Π° ΡΠ°ΠΉΡΠ΅ W3C.
ΠΠ΄Π°ΠΏΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄ ΡΡΠ°ΡΡΠΈ All you need to know about SVG on the web by Richard Mattka. ΠΠ½Π΅Π½ΠΈΠ΅ Π°Π²ΡΠΎΡΠ° ΠΎΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠ±Π»ΠΈΠΊΠ°ΡΠΈΠΈ ΠΌΠΎΠΆΠ΅Ρ Π½Π΅ ΡΠΎΠ²ΠΏΠ°Π΄Π°ΡΡ Ρ ΠΌΠ½Π΅Π½ΠΈΠ΅ΠΌ Π°Π΄ΠΌΠΈΠ½ΠΈΡΡΡΠ°ΡΠΈΠΈ Β«Π₯Π΅ΠΊΡΠ»Π΅ΡΠ°Β».
ΠΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΠΎΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΠΉΡΠ΅ΡΡ: Π ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ Π³ΠΎΠ²ΠΎΡΡΡ, ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΡΡΠΎΡΠ½Π½ΠΎ ΡΡΠΈΡΡΡΡ Π΄Π°ΠΆΠ΅ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΏΡΠΎΡΡΠΎ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡΡ Π½Π° ΠΌΠ΅ΡΡΠ΅. Π Π°Π·Π²ΠΈΠ²Π°ΠΉΡΠ΅ΡΡ Ρ Π½Π°ΠΌΠΈ β Π½Π° Π₯Π΅ΠΊΡΠ»Π΅ΡΠ΅ Π΅ΡΡΡ ΡΠΎΡΠ½ΠΈ ΠΊΡΡΡΠΎΠ² ΠΏΠΎ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ Π½Π° ΡΠ°Π·Π½ΡΡ ΡΠ·ΡΠΊΠ°Ρ ΠΈ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡΡ
Π‘ Π½ΡΠ»Ρ Π΄ΠΎ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°. ΠΠΎΠ·Π²ΡΠ°ΡΠ°Π΅ΠΌ Π΄Π΅Π½ΡΠ³ΠΈ, Π΅ΡΠ»ΠΈ Π½Π΅ ΡΠ΄Π°Π»ΠΎΡΡ Π½Π°ΠΉΡΠΈ ΡΠ°Π±ΠΎΡΡ.
Π ΡΠΎΡΠΌΠ°ΡΠ΅ SVG
ΠΠΈΡΠΎΠ²ΡΠ΅ ΡΠΎΡΠΌΠ°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ° (GIF, JPEG, WBMP ΠΈ PNG) ΠΎΠΏΠΈΡΡΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅ΡΠΊΠΈ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. Π€Π°ΠΉΠ»Ρ ΠΏΠΎΠ»ΡΡΠ°ΡΡΡΡ Π±ΠΎΠ»ΡΡΠΈΠΌΠΈ Ρ ΠΎΠ΄Π½ΠΈΠΌ (ΡΠ°ΡΡΠΎ Π½ΠΈΠ·ΠΊΠΈΠΌ) ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΈ Π·Π°Π½ΠΈΠΌΠ°ΡΡ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΡΡ ΡΠ°ΡΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΏΡΡΠΊΠ°Π½ΠΈΡ. Π ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ ΡΡΠΎΠ³ΠΎ, SVG β ΡΡΠΎ Π²Π΅ΠΊΡΠΎΡΠ½ΡΠΉ ΡΠΎΡΠΌΠ°Ρ, ΠΎΠΏΠΈΡΡΠ²Π°ΡΡΠΈΠΉ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΊΠ°ΠΊ ΡΠΈΠ³ΡΡΡ, ΠΊΠΎΠ½ΡΡΡΡ, ΡΠ΅ΠΊΡΡ ΠΈ ΡΡΡΠ΅ΠΊΡΡ ΡΠΈΠ»ΡΡΡΠ°. ΠΠΎΠ»ΡΡΠ΅Π½Π½ΡΠ΅ ΡΠ°ΠΉΠ»Ρ ΠΊΠΎΠΌΠΏΠ°ΠΊΡΠ½Ρ ΠΈ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°ΡΡ ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΡ Π³ΡΠ°ΡΠΈΠΊΡ Π² ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅, Π½Π° ΠΏΠ΅ΡΠ°ΡΠΈ ΠΈ Π΄Π°ΠΆΠ΅ ΠΏΠΎΡΡΠ°ΡΠΈΠ²Π½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ Ρ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΡΠΌΠΈ ΡΠ΅ΡΡΡΡΠ°ΠΌΠΈ. ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΌΠΎΠ³ΡΡ ΡΠ²Π΅Π»ΠΈΡΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ SVG Π½Π° ΡΠΊΡΠ°Π½Π΅ Π±Π΅Π· ΠΏΠΎΡΠ΅ΡΠΈ ΡΠ΅Π·ΠΊΠΎΡΡΠΈ, Π΄Π΅ΡΠ°Π»Π΅ΠΉ ΠΈΠ»ΠΈ ΡΠ΅ΡΠΊΠΎΡΡΠΈ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΡΠΎΡΠΌΠ°Ρ SVG ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΠ΅ΠΊΡΡ ΠΈ ΡΠ²Π΅ΡΠ°, ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ Π²ΡΠ΅Π³Π΄Π° Π²ΠΈΠ΄ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ°ΠΊΠΈΠΌ, ΠΊΠ°ΠΊ ΠΎΠ½ΠΎ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π² ΠΌΠΎΠ½ΡΠ°ΠΆΠ½ΠΎΠΉ ΠΎΠ±Π»Π°ΡΡΠΈ Illustrator.
Π€ΠΎΡΠΌΠ°Ρ SVG ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΎΡΠ½ΠΎΠ²Π°Π½ Π½Π° XML ΠΈ Π΄Π°Π΅Ρ ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ² ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌ ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ. Π‘ ΡΠΎΡΠΌΠ°ΡΠΎΠΌ SVG ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ XML ΠΈ JavaScript Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π²Π΅Π±-Π³ΡΠ°ΡΠΈΠΊΠΈ, ΠΎΡΠ²Π΅ΡΠ°ΡΡΠ΅ΠΉ Π½Π° Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΡΠ°ΠΊΠΈΠΌΠΈ ΡΠ»ΠΎΠΆΠ½ΡΠΌΠΈ ΡΡΡΠ΅ΠΊΡΠ°ΠΌΠΈ, ΠΊΠ°ΠΊ ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠΊΠ°, Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΠ΅ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ, Π·Π²ΡΠΊΠΈ, Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΈ Ρ. ΠΏ.
ΠΠ°ΡΡΡΠΎΠΉΠΊΠΈ ΠΎΠ±ΡΠ΅ΠΊΡΠ° Π² Illustrator Π²Π»ΠΈΡΡΡ Π½Π° ΡΠΎ, ΠΊΠ°ΠΊΠΈΠΌ Π±ΡΠ΄Π΅Ρ ΡΠ°ΠΉΠ» SVG. ΠΠΎΠΌΠ½ΠΈΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΠΈ.
ΠΡΠ»ΠΈ Π½ΡΠΆΠ½ΠΎ, ΡΡΠΎΠ±Ρ ΠΎΠ±ΡΠ΅ΠΊΡΡ Π½Π° ΡΠ°Π·Π½ΡΡ ΡΠ»ΠΎΡΡ Π²ΡΠ³Π»ΡΠ΄Π΅Π»ΠΈ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΠΌΠΈ, ΠΊΠΎΡΡΠ΅ΠΊΡΠΈΡΡΠΉΡΠ΅ Π½Π΅ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΎΠ±ΡΠ΅ΠΊΡΠ°, Π° Π½Π΅ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ»ΠΎΡ. ΠΡΠ»ΠΈ Π½Π΅ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ ΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π½Π° ΡΡΠΎΠ²Π½Π΅ ΡΠ»ΠΎΡ, ΠΈΡΠΎΠ³ΠΎΠ²ΡΠΉ ΡΠ°ΠΉΠ» SVG Π½Π΅ ΠΏΠΎΠΊΠ°ΠΆΠ΅Ρ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ ΠΎΠ½Π° Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π² Illustrator.
Π Π°ΡΡΡΠΎΠ²ΡΠ΅ Π΄Π°Π½Π½ΡΠ΅ Π½Π΅ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΡΡΡΡ Π² ΡΡΠ΅Π΄ΡΡΠ²Π΅ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° SVG ΠΈ Π½Π΅ ΠΌΠΎΠ³ΡΡ ΠΎΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡΡΡ, ΠΊΠ°ΠΊ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ SVG. Π‘ΡΠ°ΡΠ°ΠΉΡΠ΅ΡΡ Π½Π΅ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΎΠ±ΡΠ΅ΠΊΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ΄ΡΡ ΡΠ°ΡΡΡΠΈΡΠΎΠ²Π°ΡΡΡΡ Π² ΡΠ°ΠΉΠ»Π΅ SVG. Π‘Π΅ΡΡΠ°ΡΡΠ΅ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΡ ΠΈ ΠΎΠ±ΡΠ΅ΠΊΡΡ Ρ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ½ΠΎΠΉ Π·Π°Π»ΠΈΠ²ΠΊΠΎΠΉ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠΈΠ΅ ΡΡΡΠ΅ΠΊΡΡ Β«Π Π°ΡΡΡΠΈΡΠΎΠ²Π°ΡΡΒ», Β«ΠΠΌΠΈΡΠ°ΡΠΈΡΒ», Β«Π Π°Π·ΠΌΡΡΠΈΠ΅Β», Β«Π¨ΡΡΠΈΡ ΠΈΒ», Β«ΠΡΠΊΠ°ΠΆΠ΅Π½ΠΈΠ΅Β», Β«ΠΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅Β», Β«Π Π΅Π·ΠΊΠΎΡΡΡΒ», Β«ΠΡΠΊΠΈΠ·Β», Β«Π‘ΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΡΒ», Β«Π’Π΅ΠΊΡΡΡΡΠ°Β» ΠΈ Β«ΠΠΈΠ΄Π΅ΠΎΒ», ΡΠ°ΡΡΡΠΈΡΡΡΡΡΡ ΠΏΡΠΈ ΡΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΠΈ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ SVG. ΠΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΡΠΈΠ»ΠΈ Ρ ΡΡΠΈΠΌΠΈ ΡΡΡΠ΅ΠΊΡΠ°ΠΌΠΈ ΡΠ°ΠΊΠΆΠ΅ Π²ΡΠ·ΡΠ²Π°ΡΡ ΡΠ°ΡΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. ΠΠΎΠ±Π°Π²Π»ΡΡ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΎΠ±ΡΠ΅ΠΊΡΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ SVG, Π½Π΅ Π²ΡΠ·ΡΠ²Π°ΡΡΠΈΠ΅ ΡΠ°ΡΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ.
ΠΠ»Ρ ΠΏΠΎΠ²ΡΡΠ΅Π½ΠΈΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ ΡΠ°ΠΉΠ»Π° SVG ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠΈΠΌΠ²ΠΎΠ»Ρ Π² ΠΎΠ±ΡΠ΅ΠΊΡΠ΅ ΠΈ ΡΠΏΡΠΎΡΠ°ΠΉΡΠ΅ ΠΊΠΎΠ½ΡΡΡΡ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π΅ΡΠ»ΠΈ Π² ΠΏΠ΅ΡΠ²ΡΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ, ΡΡΠ°ΡΠ°ΠΉΡΠ΅ΡΡ Π½Π΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΠΊΠΈΡΡΡΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΡΡ Π±ΠΎΠ»ΡΡΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ Π΄Π°Π½Π½ΡΡ ΠΊΠΎΠ½ΡΡΡΠ° (Β«Π£Π³ΠΎΠ»ΡΠ½ΠΎ-ΡΠ΅ΡΡΠΉΒ», Β«ΠΠ΅ΠΏΠ΅Π»Β», Β«Π ΡΡΠΊΠ°Β»).
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΡ, ΠΊΠ°ΡΡΡ ΡΡΡΠ»ΠΎΠΊ ΠΈ ΡΡΠ΅Π½Π°ΡΠΈΠΈ Π΄Π»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ Π²Π΅Π±-ΡΡΡΠ»ΠΎΠΊ Π² ΡΠ°ΠΉΠ» SVG.
Π―Π·ΡΠΊ ΡΡΠ΅Π½Π°ΡΠΈΠ΅Π² (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, JavaScript) ΠΎΡΠΊΡΡΠ²Π°Π΅Ρ Π½Π΅ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Π΄Π»Ρ ΡΠ°ΠΉΠ»Π° SVG. ΠΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΡΡΡΠΎΡΠ° ΠΈ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ ΠΌΠΎΠ³ΡΡ Π²ΡΠ·Π²Π°ΡΡ ΡΡΠ΅Π½Π°ΡΠ½ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΡΠ΅ΠΊΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ). Π‘ΡΠ΅Π½Π°ΡΠΈΠΈ ΠΌΠΎΠ³ΡΡ ΡΠ°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΎΠ±ΡΠ΅ΠΊΡΠ½ΡΡ ΠΌΠΎΠ΄Π΅Π»Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠ² (DOM) Π΄Π»Ρ ΠΎΠ±ΡΠ°ΡΠ΅Π½ΠΈΡ ΠΊ ΡΠ°ΠΉΠ»Ρ SVG ΠΈ Π²Π½Π΅ΡΠ΅Π½ΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π΄Π»Ρ Π²ΡΡΠ°Π²ΠΊΠΈ ΠΈΠ»ΠΈ ΡΠ΄Π°Π»Π΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² SVG).
ΠΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΡΡΠ΅ΠΊΡΠΎΠ² SVG
ΠΡΡΠ΅ΠΊΡΡ SVG ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ Π² ΠΎΠ±ΡΠ΅ΠΊΡ ΡΠ°ΠΊΠΈΡ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ², ΠΊΠ°ΠΊ ΡΠ΅Π½ΠΈ. ΠΡΡΠ΅ΠΊΡΡ SVG ΠΎΡΠ»ΠΈΡΠ°ΡΡΡΡ ΠΎΡ Π±ΠΈΡΠΎΠ²ΡΡ ΡΠΊΠ²ΠΈΠ²Π°Π»Π΅Π½ΡΠΎΠ² ΡΠ΅ΠΌ, ΡΡΠΎ ΠΎΠ½ΠΈ ΠΎΡΠ½ΠΎΠ²Π°Π½Ρ Π½Π° XML ΠΈ Π½Π΅ Π·Π°Π²ΠΈΡΡΡ ΠΎΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ. Π€Π°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ, ΡΡΡΠ΅ΠΊΡ SVG β ΡΡΠΎ Π½Π΅ ΡΡΠΎ ΠΈΠ½ΠΎΠ΅, ΠΊΠ°ΠΊ ΡΠ΅ΡΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ² XML, ΠΎΠΏΠΈΡΡΠ²Π°ΡΡΠΈΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΠΌΠ°ΡΠ΅ΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΈ. ΠΠΎΠ»ΡΡΠ΅Π½Π½ΡΠΉ ΡΡΡΠ΅ΠΊΡ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠ΅Π»Π΅Π²ΠΎΠ³ΠΎ ΠΎΠ±ΡΠ΅ΠΊΡΠ°, Π° Π½Π΅ Π΄Π»Ρ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΉ Π³ΡΠ°ΡΠΈΠΊΠΈ.
Illustrator ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π½Π°Π±ΠΎΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² SVG ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. ΠΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΡΠ΅ΠΊΡΡ Ρ ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΠΎΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠΎΠ΄ XML Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΈΠ»ΠΈ Π½Π°ΠΏΠΈΡΠ°ΡΡ ΠΊΠΎΠ΄ Π΄Π»Ρ Π½ΠΎΠ²ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² SVG.
ΠΡΠ»ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΡΡΠ΅ΠΊΡ Β«Π€ΠΈΠ»ΡΡΡ SVGΒ», Illustrator ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΡΠ°ΡΡΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Π²Π΅ΡΡΠΈΡ ΡΡΡΠ΅ΠΊΡΠ° Π½Π° ΠΌΠΎΠ½ΡΠ°ΠΆΠ½ΠΎΠΉ ΠΎΠ±Π»Π°ΡΡΠΈ. ΠΠΎΠΆΠ½ΠΎ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΌΠΈΠ½ΠΈΠ°ΡΡΡΡ, ΠΈΠ·ΠΌΠ΅Π½ΡΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ ΡΠ°ΡΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. ΠΡΠ»ΠΈ ΠΎΠ±ΡΠ΅ΠΊΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΡΠ΅ΠΊΡΠΎΠ², ΡΡΡΠ΅ΠΊΡ SVG Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΌ. ΠΡΡΠ³ΠΈΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ, ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π² Π½ΠΈΠΆΠ½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΠΏΠ°Π»ΠΈΡΡΡ Β«ΠΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅Β» (Π½Π°Π΄ Π·Π°ΠΏΠΈΡΡΡ Β«ΠΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡΒ»). ΠΡΠ»ΠΈ SVG-ΡΡΡΠ΅ΠΊΡ ΡΠΎΠΏΡΠΎΠ²ΠΎΠΆΠ΄Π°Π΅ΡΡΡ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΡΡΡΠ΅ΠΊΡΠ°ΠΌΠΈ, Π²ΡΠ²ΠΎΠ΄ SVG Π±ΡΠ΄Π΅Ρ ΠΎΡΡΡΠ΅ΡΡΠ²Π»Π΅Π½ Π² Π²ΠΈΠ΄Π΅ ΡΠ°ΡΡΡΠΎΠ²ΠΎΠ³ΠΎ ΠΎΠ±ΡΠ΅ΠΊΡΠ°.