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

Π Π°Π±ΠΎΡ‚Π° с Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠΌ SVG Π² Illustrator

Π£Π·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ с Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠΌ SVG ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ XML ΠΈ JavaScript для создания Π²Π΅Π±-Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ, ΠΎΡ‚Π²Π΅Ρ‡Π°ΡŽΡ‰Π΅ΠΉ Π½Π° дСйствия ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Ρ‚Π°ΠΊΠΈΠΌΠΈ слоТными эффСктами, ΠΊΠ°ΠΊ подсвСтка, Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки, Π·Π²ΡƒΠΊΠΈ, анимация ΠΈ Ρ‚.Β ΠΏ.

Π‘ΠΈΡ‚ΠΎΠ²Ρ‹Π΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ изобраТСния для Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π° (GIF, JPEG, WBMP ΠΈ PNG) ΠΎΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‚ изобраТСния с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ сСтки пиксСлСй. Π€Π°ΠΉΠ»Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡Π°ΡŽΡ‚ΡΡ большими с ΠΎΠ΄Π½ΠΈΠΌ (часто Π½ΠΈΠ·ΠΊΠΈΠΌ) Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ ΠΈ Π·Π°Π½ΠΈΠΌΠ°ΡŽΡ‚ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ полосы пропускания. Π’ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ этого, SVGΒ β€” это Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹ΠΉ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚, ΠΎΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‰ΠΈΠΉ изобраТСния ΠΊΠ°ΠΊ Ρ„ΠΈΠ³ΡƒΡ€Ρ‹, ΠΊΠΎΠ½Ρ‚ΡƒΡ€Ρ‹, тСкст ΠΈ эффСкты Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°. ΠŸΠΎΠ»ΡƒΡ‡Π΅Π½Π½Ρ‹Π΅ Ρ„Π°ΠΉΠ»Ρ‹ ΠΊΠΎΠΌΠΏΠ°ΠΊΡ‚Π½Ρ‹ ΠΈ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΠ²Π°ΡŽΡ‚ ΠΊΠ°Ρ‡Π΅ΡΡ‚Π²Π΅Π½Π½ΡƒΡŽ Π³Ρ€Π°Ρ„ΠΈΠΊΡƒ Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅, Π½Π° ΠΏΠ΅Ρ‡Π°Ρ‚ΠΈ ΠΈ Π΄Π°ΠΆΠ΅ ΠΏΠΎΡ€Ρ‚Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… устройствах с ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Ρ‹ΠΌΠΈ рСсурсами. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ SVG Π½Π° экранС Π±Π΅Π· ΠΏΠΎΡ‚Π΅Ρ€ΠΈ рСзкости, Π΄Π΅Ρ‚Π°Π»Π΅ΠΉ ΠΈΠ»ΠΈ чСткости. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ SVG ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ тСкст ΠΈ Ρ†Π²Π΅Ρ‚Π°, ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ всСгда видят изобраТСния Ρ‚Π°ΠΊΠΈΠΌ, ΠΊΠ°ΠΊ ΠΎΠ½ΠΎ выглядит Π² ΠΌΠΎΠ½Ρ‚Π°ΠΆΠ½ΠΎΠΉ области Illustrator.

Π€ΠΎΡ€ΠΌΠ°Ρ‚ SVG ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ основан Π½Π° XML ΠΈ Π΄Π°Π΅Ρ‚ ΠΌΠ½ΠΎΠ³ΠΎ прСимущСств Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ. Π‘ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠΌ SVG ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ XML ΠΈ JavaScript для создания Π²Π΅Π±-Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ, ΠΎΡ‚Π²Π΅Ρ‡Π°ΡŽΡ‰Π΅ΠΉ Π½Π° дСйствия ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Ρ‚Π°ΠΊΠΈΠΌΠΈ слоТными эффСктами, ΠΊΠ°ΠΊ подсвСтка, Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки, Π·Π²ΡƒΠΊΠΈ, анимация ΠΈ Ρ‚.Β ΠΏ.

МоТно ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ SVG, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΊΠΎΠΌΠ°Π½Π΄Ρƒ Β«Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒΒ», Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊ, Β«Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ копию» ΠΈΠ»ΠΈ Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ для Web ΠΈ устройств. Для доступа ΠΊ ΠΏΠΎΠ»Π½ΠΎΠΌΡƒ Π½Π°Π±ΠΎΡ€Ρƒ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ² экспорта Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ SVG ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ Β«Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒΒ», Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊ ΠΈΠ»ΠΈ Β«Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ копию». Команда Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ для Web ΠΈ устройств прСдоставляСт ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Ρ‹ΠΉ Π½Π°Π±ΠΎΡ€ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ² экспорта Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ SVG (Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚Π΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅).

Настройки ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° Π² Illustrator Π²Π»ΠΈΡΡŽΡ‚ Π½Π° Ρ‚ΠΎ, ΠΊΠ°ΠΊΠΈΠΌ Π±ΡƒΠ΄Π΅Ρ‚ Ρ„Π°ΠΉΠ» SVG. ΠŸΠΎΠΌΠ½ΠΈΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΈ.

  • Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ слои для добавлСния структуры Π² Ρ„Π°ΠΉΠ» SVG. Если ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ сохраняСтся Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ SVG, ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ слой прСобразуСтся Π² Π³Ρ€ΡƒΠΏΠΏΠΎΠ²ΠΎΠΉ элСмСнт (<g>). (НапримСр, слой Β«Button1Β» становится <gΒ id=»Button1_ver3.0″>.) Π’Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ слои становятся Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΌΠΈ Π³Ρ€ΡƒΠΏΠΏΠ°ΠΌΠΈ SVG, Π° скрытыС слои ΡΠΎΡ…Ρ€Π°Π½ΡΡŽΡ‚ΡΡ со свойством Β«ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅: Π½Π΅Ρ‚Β» стиля SVG.

  • Если Π½ΡƒΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ Π½Π° Ρ€Π°Π·Π½Ρ‹Ρ… слоях выглядСли ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΌΠΈ, ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚ΠΈΡ€ΡƒΠΉΡ‚Π΅ Π½Π΅ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°, Π° Π½Π΅ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ слоя. Если Π½Π΅ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ мСняСтся Π½Π° ΡƒΡ€ΠΎΠ²Π½Π΅ слоя, ΠΈΡ‚ΠΎΠ³ΠΎΠ²Ρ‹ΠΉ Ρ„Π°ΠΉΠ» SVG Π½Π΅ ΠΏΠΎΠΊΠ°ΠΆΠ΅Ρ‚ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ ΠΎΠ½Π° выглядит Π² Illustrator.

  • РастровыС Π΄Π°Π½Π½Ρ‹Π΅ Π½Π΅ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΡŽΡ‚ΡΡ Π² срСдствС просмотра SVG ΠΈ Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΡ‚Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ, ΠΊΠ°ΠΊ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ элСмСнты SVG. Π‘Ρ‚Π°Ρ€Π°ΠΉΡ‚Π΅ΡΡŒ Π½Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°ΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π² Ρ„Π°ΠΉΠ»Π΅ SVG. Π‘Π΅Ρ‚Ρ‡Π°Ρ‚Ρ‹Π΅ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Ρ‹ ΠΈ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ с Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π½ΠΎΠΉ Π·Π°Π»ΠΈΠ²ΠΊΠΎΠΉ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΠ΅ эффСкты Β«Π Π°ΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΒ», Β«Π˜ΠΌΠΈΡ‚Π°Ρ†ΠΈΡΒ», Β«Π Π°Π·ΠΌΡ‹Ρ‚ΠΈΠ΅Β», Β«Π¨Ρ‚Ρ€ΠΈΡ…ΠΈΒ», «ИскаТСниС», Β«ΠžΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅Β», Β«Π Π΅Π·ΠΊΠΎΡΡ‚ΡŒΒ», «Эскиз», «Бтилизация», «ВСкстура» ΠΈ Β«Π’ΠΈΠ΄Π΅ΠΎΒ», Ρ€Π°ΡΡ‚Ρ€ΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΠΏΡ€ΠΈ сохранСнии Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ SVG. ГрафичСскиС стили с этими эффСктами Ρ‚Π°ΠΊΠΆΠ΅ Π²Ρ‹Π·Ρ‹Π²Π°ΡŽΡ‚ растрированиС. Добавляя графичСскиС ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ эффСкты SVG, Π½Π΅ Π²Ρ‹Π·Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ растрирования.

  • Для ΠΏΠΎΠ²Ρ‹ΡˆΠ΅Π½ΠΈΡ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Ρ„Π°ΠΉΠ»Π° SVG ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ символы Π² ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π΅ ΠΈ ΡƒΠΏΡ€ΠΎΡ‰Π°ΠΉΡ‚Π΅ ΠΊΠΎΠ½Ρ‚ΡƒΡ€Ρ‹. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Ссли Π² ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ трСбуСтся ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ, ΡΡ‚Π°Ρ€Π°ΠΉΡ‚Π΅ΡΡŒ Π½Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ кистями, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ производят большоС количСство Π΄Π°Π½Π½Ρ‹Ρ… ΠΊΠΎΠ½Ρ‚ΡƒΡ€Π° («Угольно-сСрый», «ПСпСл», Β«Π ΡƒΡ‡ΠΊΠ°Β»).

  • Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Ρ‹, ΠΊΠ°Ρ€Ρ‚Ρ‹ ссылок ΠΈ сцСнарии для добавлСния Π²Π΅Π±-ссылок Π² Ρ„Π°ΠΉΠ» SVG.

  • Π―Π·Ρ‹ΠΊ сцСнариСв (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, JavaScript) ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ Π½Π΅ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ возмоТности для Ρ„Π°ΠΉΠ»Π° SVG. ΠŸΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π΅Π½ΠΈΡ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ курсора ΠΈ ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ сцСнарныС Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, эффСкты ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ). Π‘Ρ†Π΅Π½Π°Ρ€ΠΈΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π½ΡƒΡŽ модСль Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠ² (DOM) для обращСния ΠΊ Ρ„Π°ΠΉΠ»Ρƒ SVG ΠΈ внСсСния ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, для вставки ΠΈΠ»ΠΈ удалСния элСмСнтов SVG).

Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ SVG ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для добавлСния Π² ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ Ρ‚Π°ΠΊΠΈΡ… графичСских свойств, ΠΊΠ°ΠΊ Ρ‚Π΅Π½ΠΈ. Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ SVG ΠΎΡ‚Π»ΠΈΡ‡Π°ΡŽΡ‚ΡΡ ΠΎΡ‚ Π±ΠΈΡ‚ΠΎΠ²Ρ‹Ρ… эквивалСнтов Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ основаны Π½Π° XML ΠΈ Π½Π΅ зависят ΠΎΡ‚ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ.

ЀактичСски, эффСкт SVGΒ β€” это Π½Π΅ Ρ‡Ρ‚ΠΎ ΠΈΠ½ΠΎΠ΅, ΠΊΠ°ΠΊ сСрия свойств XML, ΠΎΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‰ΠΈΡ… Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ матСматичСскиС ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΈ. ΠŸΠΎΠ»ΡƒΡ‡Π΅Π½Π½Ρ‹ΠΉ эффСкт визуализируСтся для Ρ†Π΅Π»Π΅Π²ΠΎΠ³ΠΎ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°, Π° Π½Π΅ для исходной Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ.

Illustrator прСдоставляСт Π½Π°Π±ΠΎΡ€ эффСктов SVG ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ. МоТно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ эффСкты с ΠΈΡ… свойствами ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, ΠΎΡ‚Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ XML для создания ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… эффСктов ΠΈΠ»ΠΈ Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΊΠΎΠ΄ для Π½ΠΎΠ²Ρ‹Ρ… эффСктов SVG.

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Ρ‹ SVG, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Illustrator ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ тСкстовый Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ для рСдактирования Ρ„Π°ΠΉΠ»Π° Adobe SVG Filters.svg Π² ΠΏΠ°ΠΏΠΊΠ΅ Documents and Settings/<ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³_ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ>/Application Data/Adobe/Adobe Illustrator CS5 Settings/<язык>. МоТно ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΈΠ»ΠΈ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ опрСдСлСния Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π½ΠΎΠ²Ρ‹Π΅.

ΠŸΠ°Π»ΠΈΡ‚Ρ€Π° Β«Π˜Π½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ SVGΒ» (Окно > Π˜Π½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ SVG) ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для добавлСния интСрактивности Π² ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ ΠΏΡ€ΠΈ Π΅Π³ΠΎ экспортС для просмотра Π² Π²Π΅Π±-Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅. НапримСр, создав событиС, Π·Π°ΠΏΡƒΡΠΊΠ°ΡŽΡ‰Π΅Π΅ ΠΊΠΎΠΌΠ°Π½Π΄Ρƒ языка JavaScript, ΠΌΠΎΠΆΠ½ΠΎ быстро ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ Π½Π° Π²Π΅Π±-страницС, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ выполняСт Ρ‚Π°ΠΊΠΎΠ΅ дСйствиС, ΠΊΠ°ΠΊ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ курсора ΠΌΡ‹ΡˆΠΈ Π½Π°Π΄ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠΌ. ΠŸΠ°Π»ΠΈΡ‚Ρ€Π° Β«Π˜Π½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ SVGΒ» позволяСт Ρ‚Π°ΠΊΠΆΠ΅ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ всС события ΠΈ Ρ„Π°ΠΉΠ»Ρ‹ JavaScript, связанныС с Ρ‚Π΅ΠΊΡƒΡ‰ΠΈΠΌ Ρ„Π°ΠΉΠ»ΠΎΠΌ.

Π£Π΄Π°Π»Π΅Π½ΠΈΠ΅ события ΠΈΠ· ΠΏΠ°Π»ΠΈΡ‚Ρ€Ρ‹ Β«Π˜Π½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ SVGΒ»

onfocusin

ЗапускаСт дСйствиС, ΠΊΠΎΠ³Π΄Π° элСмСнт ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ фокус (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ курсором).

onfocusout

ЗапускаСт дСйствиС, ΠΊΠΎΠ³Π΄Π° элСмСнт тСряСт фокус (часто ΠΏΡ€ΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π΅ фокуса Π΄Ρ€ΡƒΠ³ΠΎΠΌΡƒ элСмСнту).

onactivate

ЗапускаСт дСйствиС ΠΏΠΎ Ρ‰Π΅Π»Ρ‡ΠΊΡƒ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΌΡ‹ΡˆΠΈ ΠΈΠ»ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΡŽ клавиши Π² зависимости ΠΎΡ‚ элСмСнта SVG.

onmousedown

ЗапускаСт дСйствиС, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ‚ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΌΡ‹ΡˆΠΈ Π½Π° элСмСнтС.

onmouseup

ЗапускаСт дСйствиС, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ отпускаСт ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΌΡ‹ΡˆΠΈ Π½Π° элСмСнтС.

onclick

ЗапускаСт дСйствиС ΠΏΠΎ Ρ‰Π΅Π»Ρ‡ΠΊΡƒ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΌΡ‹ΡˆΠΈ Π½Π° элСмСнтС.

onmouseover

ЗапускаСт дСйствиС ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π½Π° элСмСнт.

onmousemove

ЗапускаСт дСйствиС, ΠΊΠΎΠ³Π΄Π° курсор находится Π½Π° элСмСнтС.

onmouseout

ЗапускаСт дСйствиС, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΡƒΠ²ΠΎΠ΄ΠΈΡ‚ курсор с элСмСнта.

onkeydown

ЗапускаСт дСйствиС ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ клавиши.

onkeypress

ЗапускаСт дСйствиС, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π΄Π΅Ρ€ΠΆΠΈΡ‚ ΠΊΠ»Π°Π²ΠΈΡˆΡƒ Π½Π°ΠΆΠ°Ρ‚ΠΎΠΉ.

onkeyup

ЗапускаСт дСйствиС, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ отпускаСт ΠΊΠ»Π°Π²ΠΈΡˆΡƒ.

onload

ЗапускаСт дСйствиС послС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ SVG Π±Ρ‹Π» ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΏΡ€ΠΎΠ°Π½Π°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ это событиС для Π²Ρ‹Π·ΠΎΠ²Π° Ρ€Π°Π·ΠΎΠ²Ρ‹Ρ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ ΠΈΠ½ΠΈΡ†ΠΈΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ.

onerror

ЗапускаСт дСйствиС ΠΏΡ€ΠΈ Π½Π΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠΉ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅ элСмСнта ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠΉ ошибкС.

onabort

ЗапускаСт дСйствиС ΠΏΡ€ΠΈ остановкС Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ страницы Π΄ΠΎ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ элСмСнт ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ загруТаСтся.

onunload

ЗапускаСт дСйствиС ΠΏΡ€ΠΈ ΡƒΠ΄Π°Π»Π΅Π½ΠΈΠΈ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° SVG ΠΈΠ· ΠΎΠΊΠ½Π° ΠΈΠ»ΠΈ ΠΊΠ°Π΄Ρ€Π°.

onzoom

ЗапускаСт дСйствиС, ΠΊΠΎΠ³Π΄Π° мСняСтся ΠΌΠ°ΡΡˆΡ‚Π°Π± для Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°.

onresize

ЗапускаСт дСйствиС, ΠΊΠΎΠ³Π΄Π° мСняСтся Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΎΠΊΠ½Π° просмотра Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°.

onscroll

ЗапускаСт дСйствиС ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ ΠΈΠ»ΠΈ ΠΏΠ°Π½ΠΎΡ€Π°ΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ ΠΎΠΊΠ½Π° просмотра Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°.

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ Π½ΠΎΠ²Ρ‹ΠΉ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ экспорта Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ SVG (Π€Π°ΠΉΠ»Β > Экспорт > SVG). Для создания стандартизированных Ρ„Π°ΠΉΠ»ΠΎΠ² SVG, ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… для Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π°, для ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² Π² области Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π° графичСского интСрфСйса ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π½ΠΎΠ²Ρ‹ΠΉ Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ процСсс.

Доступны ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹:

  • Π‘Ρ‚ΠΈΠ»ΠΈ: Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ способ хранСния ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΎ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹Ρ… стилях Π² Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ΅ SVG.
    • Атрибуты ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π°Ρ†ΠΈΠΈ: ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ XML для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ свойства стиля Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ Ρ‚Π΅Π³Π΅ SVG. Π­Ρ‚ΠΎΡ‚ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌ для использования рСсурсов SVG с Android Studio.
    • Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΉ CSS: ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΎΠ΄ΠΈΠ½ Ρ‚Π΅Π³ <style> с классами CSS, раздСляя настройки стиля ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°ΠΌΠΈ, ΠΈΠΌΠ΅ΡŽΡ‰ΠΈΠΌΠΈ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹Π΅ стили. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ привСсти ΠΊ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΡŽ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° Ρ„Π°ΠΉΠ»Π°.
    • ВстроСнный ΡΡ‚ΠΈΠ»ΡŒ: ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΎΠ΄ΠΈΠ½ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ style для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Ρ‚Π΅Π³Π° SVG, содСрТащий всС свойства стиля Ρ‚Π΅Π³Π°, ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½Π΅Π½Π½Ρ‹Π΅ Π² синтаксисС CSS.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅. Π‘Ρ‚ΠΈΠ»ΡŒ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ для SVG ΠΈΠΌΠ΅Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Атрибуты ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π°Ρ†ΠΈΠΈ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΎΠ½ ΡƒΠ»ΡƒΡ‡ΡˆΠ°Π΅Ρ‚ ΡΠΎΠ²ΠΌΠ΅ΡΡ‚ΠΈΠΌΠΎΡΡ‚ΡŒ с распространСнными инструмСнтами Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Android Studio.

  • Π¨Ρ€ΠΈΡ„Ρ‚. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ прСдставлСниС ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Π² Ρ„Π°ΠΉΠ»Π΅ SVG. ΠšΠΎΠ½Ρ‚ΡƒΡ€Ρ‹ ΡΠΎΡ…Ρ€Π°Π½ΡΡŽΡ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π»ΠΈΠ½ΠΈΠΈ Β ΠΈΒ  ΡΠ²Π»ΡΡŽΡ‚ΡΡ самыми совмСстимыми.
  • Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅, Π½ΡƒΠΆΠ½ΠΎ Π»ΠΈ ΠΏΡ€ΠΈ сохранСнии Π²ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ изобраТСния Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ ΠΈΠ»ΠΈ ΠΏΡ€ΠΈΠ²ΡΠ·Π°Ρ‚ΡŒ ΠΈΡ… ΠΊ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Ρƒ.
  • ID ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ². Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ способ назначСния Ρ‚ΠΈΠΏΠΎΠ² ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π° (ΠΈΠΌΠ΅Π½) ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°ΠΌ Π² Ρ„Π°ΠΉΠ»Π΅ SVG. ДоступныС Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹: «ИмСна слоСв», Β«ΠœΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉΒ» ΠΈ Β«Π£Π½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉΒ». Π­Ρ‚ΠΎΡ‚ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ опрСдСляСт способ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹Ρ… ΠΈΠΌΠ΅Π½ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ², Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² Π² экспортируСмом Ρ„Π°ΠΉΠ»Π΅ CSS.
  • ДСсятичноС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ объСм ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Π² зависимости ΠΎΡ‚ Ρ‚Ρ€Π΅Π±ΡƒΠ΅ΠΌΠΎΠΉ точности мСстополоТСния ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ². ΠŸΡ€ΠΈ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠΈ дСсятичного значСния увСличиваСтся Ρ‚ΠΎΡ‡Π½ΠΎΡΡ‚ΡŒ размСщСния ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² ΠΈ, соотвСтствСнно, увСличиваСтся качСство отобраТСния Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·ΠΈΡ€ΡƒΠ΅ΠΌΡ‹Ρ… Ρ„Π°ΠΉΠ»ΠΎΠ² SVG. Однако ΠΏΡ€ΠΈ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠΈ дСсятичного значСния Ρ‚Π°ΠΊΠΆΠ΅ увСличиваСтся Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌΠΎΠ³ΠΎ Π² Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ экспорта Ρ„Π°ΠΉΠ»Π° SVG.
  • Π£ΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒ. ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΡƒΠ΅Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ Ρ„Π°ΠΉΠ»Π° Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ SVG ΠΏΡƒΡ‚Π΅ΠΌ удалСния пустых Π³Ρ€ΡƒΠΏΠΏ ΠΈ ΠΏΡ€ΠΎΠ±Π΅Π»ΠΎΠ². ΠŸΡ€ΠΈ Π²Ρ‹Π±ΠΎΡ€Π΅ этого ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π° Ρ‚Π°ΠΊΠΆΠ΅ сниТаСтся ΡƒΠ΄ΠΎΠ±ΠΎΡ‡ΠΈΡ‚Π°Π΅ΠΌΠΎΡΡ‚ΡŒ ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° SVG.
  • Адаптивный SVG. ΠŸΡ€ΠΈ установкС этого ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π° обСспСчиваСтся ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ созданного SVG Π² ΠΎΠΊΠ½Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°. ΠΠ±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹Π΅ значСния Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ.
  • ΠŸΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΊΠΎΠ΄. ΠžΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ экспортированноС содСрТимоС Π² тСкстовом Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.
  • ΠŸΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ (Π·Π½Π°Ρ‡ΠΎΠΊ). ΠžΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² Π²Π΅Π±-Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.

Π€ΠΎΡ€ΠΌΠ°Ρ‚ SVG: достоинства ΠΈ нСдостатки

ΠœΡ‹ часто встрСчаСм Ρ‚Π°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹, ΠΊΠ°ΠΊ JPG, PNG ΠΈ GIF, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ ΠΊΠ°ΠΊ Π½Π° сайтах, Ρ‚Π°ΠΊ ΠΈ Π² ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… сСтях. Они ΠΏΠΎΠ»ΡƒΡ‡Π°ΡŽΡ‚ΡΡ ΠΏΡƒΡ‚Π΅ΠΌ создания растровой Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ – это Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ, ΡΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚Ρ‹, Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ Ρ„Π°ΠΉΠ»Ρ‹. ВмСстС с этими Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°ΠΌΠΈ Π΅ΡΡ‚ΡŒ Π΅Ρ‰Π΅ ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡ…ΠΎΠΆΠΈΡ…, ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… – SVG.

Он Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для отобраТСния Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ, Π½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π΅ растровой, Π° Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ SVG

SVG (ΠΎΡ‚ Π°Π½Π³Π». Scalable Vector Graphics – ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΠ°Ρ вСкторная Π³Ρ€Π°Ρ„ΠΈΠΊΠ°) – это ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π²ΠΈΠ΄ΠΎΠ² Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ формируСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ гСомСтричСских ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ²: Π»ΠΈΠ½ΠΈΠΉ, ΠΊΡ€ΡƒΠ³ΠΎΠ², ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠΎΠ², ΠΊΡ€ΠΈΠ²Ρ‹Ρ… ΠΈ ΠΏΡ€ΠΎΡ‡ΠΈΡ… элСмСнтов.

Π‘ΠΎΠ²ΠΎΠΊΡƒΠΏΠ½ΠΎΡΡ‚ΡŒ Ρ‚Π°ΠΊΠΈΡ… Π΄Π΅Ρ‚Π°Π»Π΅ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π΄Π°Ρ‚ΡŒ практичСски любоС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. НапримСр, это ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΊΠ° ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠΉ сСти Instagram:

Π’ΠΎΠ»Ρ‡ΠΎΠΊ развития Π΄Π°Π½Π½ΠΎΠΉ языковой Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ΅ Π²ΠΏΠ΅Ρ€Π²Ρ‹Π΅ Π±Ρ‹Π» Π΄Π°Π½ ΠšΠΎΠ½ΡΠΎΡ€Ρ†ΠΈΡƒΠΌΠΎΠΌ ВсСмирной ΠΏΠ°ΡƒΡ‚ΠΈΠ½Ρ‹ (World Wide Web Consortium), ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π² 1999 Π³ΠΎΠ΄Ρƒ Π±Ρ‹Π» Π±ΠΎΠ»Π΅Π΅ извСстСн ΠΊΠ°ΠΊ W3C. W3C Π΄Π°Π» и понятиС SVG – языковая Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° для создания Π΄Π²ΡƒΡ…ΠΌΠ΅Ρ€Π½Ρ‹Ρ… графичСских интСрфСйсов ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.

БСгодня SVG ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π½Π° всСх соврСмСнных сайтах – это ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΊΠ°ΠΊ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… сСтСй, Ρ‚Π°ΠΊ ΠΈ ΠΏΠΎΠ»Π½ΠΎΡ„ΠΎΡ€ΠΌΠ°Ρ‚Π½Ρ‹Π΅ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΈ. Но Ρ‡Π°Ρ‰Π΅ всСго это ΠΈΠΌΠ΅Π½Π½ΠΎ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΡ‹, Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ.

ΠŸΠΎΡ‡Π΅ΠΌΡƒ Ρ‚Π°ΠΊ популярСн Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ SVG – разбСрСмся Π΄Π°Π»Π΅Π΅.

ΠšΠΎΠΌΡŒΡŽΠ½ΠΈΡ‚ΠΈ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π² Π’Π΅Π»Π΅Π³Ρ€Π°ΠΌ

ΠŸΠΎΠ΄ΠΏΠΈΡˆΠΈΡ‚Π΅ΡΡŒ ΠΈ Π±ΡƒΠ΄ΡŒΡ‚Π΅ Π² курсС послСдних IT-новостСй

ΠŸΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ

Достоинства SVG

Одна ΠΈΠ· ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… особСнностСй Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° SVG – это ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΠΎΡΡ‚ΡŒ. Если ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠ΅ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΉ Π² JPG ΠΈ PNG ΠΌΠΎΠΆΠ΅Ρ‚ привСсти ΠΊ ΡƒΡ…ΡƒΠ΄ΡˆΠ΅Π½ΠΈΡŽ качСства, Ρ‚ΠΎ с Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠΌ SVG всС Π±ΡƒΠ΄Π΅Ρ‚Π΅ ΠΎΡΡ‚Π°Π²Π°Ρ‚ΡŒΡΡ Π½Π° ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌ ΡƒΡ€ΠΎΠ²Π½Π΅. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ…ΠΎΡ‚ΡŒ Π² 100 Ρ€Π°Π· – ΠΎΠ½ΠΎ всС Ρ€Π°Π²Π½ΠΎ сохранит ΠΏΡ€Π΅ΠΆΠ½ΠΈΠΉ Π²ΠΈΠ΄. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ SVG-ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ Π² самых Π±ΠΎΠ»ΡŒΡˆΠΈΡ… Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡΡ… Π±Π΅Π· ΠΏΠΎΡ‚Π΅Ρ€ΠΈ качСства ΠΈ просто ΠΈΠ΄Π΅Π°Π»ΡŒΠ½Ρ‹ для Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… сайтов.

Другая ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΡŒ SVG – это Π΅Π³ΠΎ кастомизация. ΠŸΡ€Π΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, Ρ‡Ρ‚ΠΎ Π½Π°ΠΌ Π½Π° сайт Π½ΡƒΠΆΠ½ΠΎ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ ΠΊΡ€Π°ΡΠ½ΡƒΡŽ ΠΈΠΊΠΎΠ½ΠΊΡƒ, Π½ΠΎ ΠΏΠΎΠ΄ Ρ€ΡƒΠΊΠΎΠΉ Π΅ΡΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ чСрная. Если это растровоС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° JPG ΠΈΠ»ΠΈ PNG, Ρ‚ΠΎ потрСбуСтся ΠΏΡ€ΠΈΠ»ΠΎΠΆΠΈΡ‚ΡŒ Π½Π΅ΠΌΠ°Π»ΠΎ усилий, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ ΠΈΠΊΠΎΠ½ΠΊΠΈ. Π’ случаС с SVG достаточно ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ графичСский Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€, ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‰ΠΈΠΉ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Π΅ изобраТСния, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€Β Figma, ΠΈ ΠΏΠΎΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π² ΠΎΠ΄ΠΈΠ½ ΠΊΠ»ΠΈΠΊ. Π’Π°ΠΊ, Π±ΡƒΠ΄Ρ‚ΠΎ Π²Ρ‹ мСняСтС Ρ†Π²Π΅Ρ‚ простому элСмСнту.Β 

Π’Π°ΠΊΠΆΠ΅ SVG-ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ Π² HTML ΠΈ CSS, Π° это Π·Π½Π°Ρ‡ΠΈΡ‚, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ Ρ‡Π΅Ρ€Π΅Π· ΠΊΠΎΠ΄ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΊΠ°ΠΊ сам ΠΎΠ±ΡŠΠ΅ΠΊΡ‚, Ρ‚Π°ΠΊ ΠΈ Π΅Π³ΠΎ Ρ†Π²Π΅Ρ‚.

ВсС эти достоинства закрСпляСт вСс Ρ„Π°ΠΉΠ»Π° – ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ Π½Π° порядок мСньшС любого растрового изобраТСния ΠΏΡ€ΠΈ Ρ€Π°Π²Π½Ρ‹Ρ… характСристиках изобраТСния. Π’Π΄ΠΎΠ±Π°Π²ΠΎΠΊ ΠΊ этому Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ JavaScript, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°Ρ‚ΠΈΡ‡Π½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ с ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΎΠΉ.

НСдостатки SVG

Как Ρ‚Π°ΠΊΠΎΠ²Ρ‹Ρ… нСдостатков Ρƒ SVG Π½Π΅Ρ‚, Π½ΠΎ Π΅ΡΡ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΌΠ΅Π½Ρ‚Ρ‹, ΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… стоит Π·Π½Π°Ρ‚ΡŒ:

  • SVG Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ использован для Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΉ. Π’ Ρ‚Π΅ΠΎΡ€ΠΈΠΈ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΡŽ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ SVG, Π½ΠΎ Ρ‚Π°ΠΊΠΎΠΉ Ρ„Π°ΠΉΠ» Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‡Π΅Π½ΡŒ большим. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, файл останСтся Ρ‚Π΅ΠΌ ΠΆΠ΅ растровым ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠΊΡ€Ρ‹Ρ‚ΠΎ ΠΎΠ±ΠΎΠ»ΠΎΡ‡ΠΊΠΎΠΉ SVG.
  • НС поддСрТиваСтся старыми Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ.

Π’ ΠΎΠ±Ρ‰Π΅ΠΌ, SVG-Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ – это Π½Π°ΠΈΠ»ΡƒΡ‡ΡˆΠΈΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ для использования ΠΈΠΊΠΎΠ½ΠΎΠΊ, Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… элСмСнтов ΠΈ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΉ Π½Π° сайтС.

Π‘Π°Π·ΠΎΠ²Ρ‹Π΅ Ρ„ΠΎΡ€ΠΌΡ‹ SVG

ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ SVG-Ρ„Π°ΠΉΠ» ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΡΡ‚ΠΎΡΡ‚ΡŒ ΠΈΠ· Ρ‚Π°ΠΊΠΈΡ… элСмСнтов, ΠΊΠ°ΠΊ:

  • простая линия;
  • ломаная линия;
  • ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ;
  • ΠΎΠΊΡ€ΡƒΠΆΠ½ΠΎΡΡ‚ΡŒ;
  • эллипс;
  • ΠΌΠ½ΠΎΠ³ΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ.

ВсС эти Ρ„ΠΈΠ³ΡƒΡ€Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Π½Ρ‹ ΠΊΠ°ΠΊ ΠΏΠΎΠΎΠ΄ΠΈΠ½ΠΎΡ‡ΠΊΠ΅, Ρ‚Π°ΠΊ ΠΈ Π² совокупности, создавая любоС ΠΏΠΎΠ»Π½ΠΎΡ„ΠΎΡ€ΠΌΠ°Ρ‚Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅:Β Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊΠ°, Π³ΠΎΡ€ΠΎΠ΄Π°, ΠΏΠ΅ΠΉΠ·Π°ΠΆΠ°.Β ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊ ΠΌΠΎΠ³ΡƒΡ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Π΅ изобраТСния, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ‚ΡƒΡ‚. Β 

Π“Π΄Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с SVG-Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠΉ

Как я ΡƒΠΆΠ΅ ΡƒΠΏΠΎΠΌΠΈΠ½Π°Π» Π²Ρ‹ΡˆΠ΅, Π² качСствС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ для рСдактирования Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠ³ΠΎ изобраТСния ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ использована Figma. Π’ Π½Π΅ΠΉ ΠΌΠΎΠΆΠ½ΠΎ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΡƒΠΆΠ΅ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ SVG-Ρ„Π°ΠΉΠ», Π½ΠΎ ΠΈ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒΒ ΡΠΎΠ±ΡΡ‚Π²Π΅Π½Π½Ρ‹ΠΉ с нуля. Для этого Π΅ΡΡ‚ΡŒ Ρ‚Π°ΠΊΠΈΠ΅ инструмСнты, ΠΊΠ°ΠΊ ΠΏΠ΅Ρ€ΠΎ, ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚, линия, стрСлка, эллипс, Ρ‚Ρ€Π΅ΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ ΠΈ Π·Π²Π΅Π·Π΄ΠΎΡ‡ΠΊΠ°.

Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠΎΠ·Π΄Π°ΡŽΡ‚ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ элСмСнты. НапримСр, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Shaper ΠΌΠΎΠΆΠ½ΠΎ Π² ΠΎΠ΄ΠΈΠ½ ΠΊΠ»ΠΈΠΊ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ Π½Π΅ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Π΅ Ρ„ΠΈΠ³ΡƒΡ€Ρ‹:

Π›ΡŽΠ±ΡƒΡŽ ΠΈΠ· этих Ρ„ΠΈΠ³ΡƒΡ€ ΠΌΠΎΠΆΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ ΡΠΊΡΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ SVG:

Π­Ρ‚ΠΎ лишь ΠΎΠ΄ΠΈΠ½ ΠΈΠ· способов создания SVG-элСмСнта. Π’ Ρ†Π΅Π»ΠΎΠΌ, Figma Π½Π΅ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π° для ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ рСдактирования Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΎΠ½Π°Β ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡΒ Π΄Π»Ρ создания ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² ΠΈ интСрфСйсов сайтов, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π΅ΡΡ‚ΡŒ SVG.

Если Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΎ ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠΌ ПО, Ρ‚ΠΎ это:

  • CorelDraw – самый популярный графичСский Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ срСди Π»ΡŽΠ±ΠΈΡ‚Π΅Π»Π΅ΠΉ, Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ… профСссионалов ΠΈ ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚Ρ‹Ρ… Ρ…ΡƒΠ΄ΠΎΠΆΠ½ΠΈΠΊΠΎΠ².
  • Adobe Illustrator – ΠΌΠΈΡ€ΠΎΠ²ΠΎΠΉ стандарт для отрасли ΠΏΠΎΠ»ΠΈΠ³Ρ€Π°Ρ„ΠΈΠΈ. ИмСнно Illustrator позволяСт качСствСнно ΠΏΠ΅Ρ€Π΅Π½ΠΎΡΠΈΡ‚ΡŒ изобраТСния ΠΈΠ· ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π° Π½Π° Π±ΡƒΠΌΠ°Π³Ρƒ ΠΈΠ»ΠΈ любой Π΄Ρ€ΡƒΠ³ΠΎΠΉ Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒ. ΠŸΡ€Π΅Π΄ΡƒΡΠΌΠΎΡ‚Ρ€Π΅Π½ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡ Π΄ΠΎ 64000%.
  • Gravit Designer – ΠΏΠΎΠ»Π½ΠΎΡ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹ΠΉ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€. Он ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для Π»ΡŽΠ±Ρ‹Ρ… Π·Π°Π΄Π°Ρ‡ – ΠΎΡ‚ Π΄ΠΈΠ·Π°ΠΉΠ½Π° интСрфСйсов ΠΈ ΠΈΠΊΠΎΠ½ΠΎΠΊ Π΄ΠΎ Ρ€Π°Π±ΠΎΡ‚Ρ‹ с прСзСнтациями, ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΡΠΌΠΈ ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ.

Π’Π°ΠΊΠΆΠ΅ Π½Π° просторах ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π° Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΉΡ‚ΠΈ ΠΌΠ½ΠΎΠ³ΠΎ бСсплатных сСрвисов для быстрого рСдактирования SVG-Ρ„Π°ΠΉΠ»ΠΎΠ².

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

SVG-Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ поддСрТиваСтся всСми соврСмСнными Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ, Π·Π° ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ΠΌ Internet Explorer 8. Но ΠΈ это ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ исправлСно использованиСм JavaScript-Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈΒ Raphael.js. ΠšΠΎΠ½Π²Π΅Ρ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ SVG-Ρ„Π°ΠΉΠ» Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ этой Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π½Π° сайтС ReadySetRaphael.

Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅

БСгодня ΠΌΡ‹ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠ»ΠΈ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ прСдставляСт собой SVG-Π³Ρ€Π°Ρ„ΠΈΠΊΠ° ΠΈ Π³Π΄Π΅ с Π½Π΅ΠΉ ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ. ΠšΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ особСнности SVG – нСбольшой вСс ΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΠΎΡΡ‚ΡŒ, ΠΏΡ€ΠΈ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ качСство ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π½ΠΈΠΊΠ°ΠΊ Π½Π΅ измСняСтся.

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ SVG-Π³Ρ€Π°Ρ„ΠΈΠΊΡƒ Π½Π° сайтах, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ страниц, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ восприятиС ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌΠΈ. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° SVG Π»Π΅Π³ΠΊΠΎ Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΡƒΡŽΡ‚ΡΡ, ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΌΡ‹ΡˆΠΈ, Π° Ρ‚Π°ΠΊΠΆΠ΅ Ρ…ΠΎΡ€ΠΎΡˆΠΎ подходят для Ρ€Π°Π·Π»ΠΈΡ‡Π½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.

ОписаниС ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ стандартных Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ 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 Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° ⇛

Как ΠΈ Ρ‡Π΅ΠΌ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ SVG Π½Π° ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π΅ ΠΈΠ»ΠΈ Π½ΠΎΡƒΡ‚Π±ΡƒΠΊΠ΅

Π€ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠ² для ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ сущСствуСт ΠΎΡ‡Π΅Π½ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ, Π½ΠΎ всС ΠΎΠ½ΠΈ дСлятся Π½Π° Π΄Π²Π° Π±ΠΎΠ»ΡŒΡˆΠΈΡ… класса – растровыС ΠΈ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Π΅. ΠŸΠ΅Ρ€Π²Ρ‹Π΅ Π² основном ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для Ρ€Π°Π·Π»ΠΈΡ‡Π½ΠΎΠΉ слоТной ΠΈ Π΄Π΅Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ. Π’ Π½ΠΈΡ… ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ пиксСль – ΠΌΠ΅Π»ΡŒΡ‡Π°ΠΉΡˆΠΈΠΉ элСмСнт – ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ собствСнный Ρ†Π²Π΅Ρ‚, ΠΈ Π² Ρ„Π°ΠΉΠ»Π΅, Π² ΠΎΠ±Ρ‰Π΅ΠΌ, просто ΡΠΎΡ…Ρ€Π°Π½ΡΡŽΡ‚ΡΡ Ρ†Π²Π΅Ρ‚Π° для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠΈ изобраТСния. ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Ρ€Π°Π·Π½Ρ‹Π΅ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΆΠ°Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ, ΠΈ ΠΎΡ‚ этого происходит ΠΌΠ½ΠΎΠ³ΠΎ растровых Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠ² – BMP, PNG, IPG ΠΈ ΠΏΡ€ΠΎΡ‡ΠΈΠ΅. ΠžΠ±Ρ‹Ρ‡Π½ΠΎ Π½Π°ΠΈΠ»ΡƒΡ‡ΡˆΡƒΡŽ ΡΡ„Ρ„Π΅ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ IPG, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ получаСтся нСбольшой Ρ„Π°ΠΉΠ» ΠΏΡ€ΠΈ достаточно Ρ…ΠΎΡ€ΠΎΡˆΠ΅ΠΉ Π΄Π΅Ρ‚Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ. Но Ρƒ Π½Π΅Π³ΠΎ Π΅ΡΡ‚ΡŒ нСдостаток – потСря ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΏΡ€ΠΈ сТатии. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ, Ссли ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ Ρ„Π°ΠΉΠ»Π°, происходит ΡƒΡ…ΡƒΠ΄ΡˆΠ΅Π½ΠΈΠ΅ изобраТСния.

Π”Π° ΠΈ ΠΏΡ€ΠΈ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠΈ Ρ‚Π°ΠΊΠΈΡ… Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΉ становятся Π²ΠΈΠ΄Π½Ρ‹ пиксСли. Π’Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Π΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ совсСм ΠΏΠΎ Π΄Ρ€ΡƒΠ³ΠΎΠΌΡƒ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΡƒ. Они ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Π»ΠΈΠ½ΠΈΠΈ, ΠΎΡ‚Ρ€Π΅Π·ΠΊΠΈ, Ρ„ΠΈΠ³ΡƒΡ€Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‚ΡΡ матСматичСскими Ρ„ΠΎΡ€ΠΌΡƒΠ»Π°ΠΌΠΈ. Π›ΡŽΠ±ΠΎΠ΅ пространство, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΈΠΌΠΈ ограничиваСтся, ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π»ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ΠΎΠΌ ΠΈΠ»ΠΈ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠΌ. Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ получаСтся ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π½Π΅ привязанноС ΠΊ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΠΌ – Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ ΡΠΆΠ°Ρ‚ΡŒ ΠΈΠ»ΠΈ Ρ€Π°ΡΡ‚ΡΠ½ΡƒΡ‚ΡŒ Π΄ΠΎ ΠΎΠ³Ρ€ΠΎΠΌΠ½Ρ‹Ρ… Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² Π±Π΅Π· ΠΏΠΎΡ‚Π΅Ρ€ΠΈ качСства. Одним ΠΈΠ· Ρ‚Π°ΠΊΠΈΡ… Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Ρ… Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠ² ΠΈ являСтся SVG. И ΠΎΠ½ становится всё популярнСС, особСнно Π² срСдС Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ.

ΠžΠ±Ρ‰Π΅Π΅ описаниС Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ

Π’ΠΈΠΏ Ρ„Π°ΠΉΠ»Π° SVG – сокращСниС ΠΎΡ‚ Scalable Vector Graphics, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΠ°Ρ вСкторная Π³Ρ€Π°Ρ„ΠΈΠΊΠ°. Для описания изобраТСния ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ языки Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ VML ΠΈ PGML. По сути, это тСкстовый Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Ρ„ΠΈΠ³ΡƒΡ€Ρ‹ описаны ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ Π²Π΅Ρ€ΡˆΠΈΠ½ ΠΈ Π»ΠΈΠ½ΠΈΠΉ, проходящих Ρ‡Π΅Ρ€Π΅Π· Π½ΠΈΡ…, Π° Ρ‚Π°ΠΊΠΆΠ΅ Ρ†Π²Π΅Ρ‚Π° Ρ€Π°Π·Π½Ρ‹Ρ… элСмСнтов. ΠŸΠ΅Ρ€Π²Π°Ρ вСрсия этого Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° Π²Ρ‹ΡˆΠ»Π° Π² 2001 Π³ΠΎΠ΄Ρƒ, ΠΈ сСйчас Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎ разрабатываСтся вторая вСрсия. Π’ΠΎ Π΅ΡΡ‚ΡŒ ΠΎΠ½ являСтся пСрспСктивным ΠΈ развиваСтся. Одно ΠΈΠ· достоинств – ΠΌΠ°Π»Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ Ρ„Π°ΠΉΠ»Π°, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ сохранСны довольно слоТныС рисунки. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ сСйчас всё большС ΠΈΠΊΠΎΠ½ΠΎΠΊ, ΠΏΠΈΠΊΡ‚ΠΎΠ³Ρ€Π°ΠΌΠΌ, Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠΎΠ² ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… элСмСнтов сайтов ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΈΠΌΠ΅Π½Π½ΠΎ Π² этом Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅, Π° Π½Π΅ Π² растровых. Π­Ρ‚ΠΎ ускоряСт Π·Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ сайта. К ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌ возмоТностям Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° SVG относятся ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ ΠΈ анимация. ΠŸΠ΅Ρ€Π²Π°Ρ позволяСт ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅ Ρ€Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° дСйствия ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π½Π° ΠΊΠ»ΠΈΠΊ ΠΌΡ‹ΡˆΠΊΠΎΠΉ ΠΈΠ»ΠΈ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ ΠΊΠ°ΠΊΠΈΡ…-Ρ‚ΠΎ элСмСнтов. Анимация позволяСт ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ довольно слоТныС сцСнарии. Всё вмСстС позволяСт ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΎΡ‡Π΅Π½ΡŒ красивыС ΠΈ ΠΆΠΈΠ²Ρ‹Π΅ графичСскиС элСмСнты для сайтов. Π˜Ρ… Π΄Π°ΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ Π² ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Π΅ растровыС изобраТСния Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°Ρ… PNG, IPG ΠΈ ΠΏΡ€ΠΎΡ‡ΠΈΡ….

Π§Π΅ΠΌ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ Ρ„Π°ΠΉΠ» SVG

Π’ Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ мноТСство Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ Π½Π° фотостоках, Π² Ρ‚ΠΎΠΌ числС бСсплатных. Π‘ΠΎΠ·Π΄Π°ΡŽΡ‚ΡΡ ΠΎΠ½ΠΈ Π² графичСских Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π°Ρ… Adobe Photoshop, Illustrator, Corel Draw ΠΈ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π΄Ρ€ΡƒΠ³ΠΈΡ…. Но Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ‚ вопрос – Ρ‡Π΅ΠΌ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ SVG. Π’Π΅Π΄ΡŒ встроСнныС срСдства Windows Π½Π΅ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚, ΠΊΠ°ΠΊΠΈΠ΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π² Π½ΠΈΡ… содСрТатся. Π₯отя Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ SVG ΠΌΠΎΠΆΠ½ΠΎ Π΄Π°ΠΆΠ΅ Π² тСкстовом Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π² Π‘Π»ΠΎΠΊΠ½ΠΎΡ‚Π΅, вСдь это тСкстовый Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚, Π½ΠΎ для этого Π½ΡƒΠΆΠ½ΠΎ ΠΈΠΌΠ΅Ρ‚ΡŒ Π½Π΅ΠΌΠ°Π»Ρ‹Π΅ знания Π² языках Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ. ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ Ρ„Π°ΠΉΠ» SVG ΠΌΠΎΠΆΠ½ΠΎ Π»ΠΈΠ±ΠΎ Π² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ΅, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΎΠ½ создавался, Π»ΠΈΠ±ΠΎ Π² ΠΊΠ°ΠΊΠΎΠΌ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ Π΄Ρ€ΡƒΠ³ΠΎΠΌ графичСском Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅, ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‰Π΅ΠΌ этот Ρ„ΠΎΡ€ΠΌΠ°Ρ‚.

БущСствуСт довольно ΠΏΡ€ΠΈΠ»ΠΈΡ‡Π½Ρ‹ΠΉ ΠΏΠ΅Ρ€Π΅Ρ‡Π΅Π½ΡŒ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌ ΠΈ сСрвисов, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΡ… Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с Ρ„Π°ΠΉΠ»Π°ΠΌΠΈ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° SVG.

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

Если ΠΆΠ΅ Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ нСпосрСдствСнно ΠΎ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½Ρ‹Ρ… Ρ€Π΅ΡˆΠ΅Π½ΠΈΡΡ… ΠΈ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… сСрвисах, Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‰ΠΈΡ… Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ ΠΎΠ½Π»Π°ΠΉΠ½, Ρ‚ΠΎ Ρ‚ΡƒΡ‚ ΠΌΠΎΠΆΠ½ΠΎ привСсти ΠΎΠ±ΡˆΠΈΡ€Π½Ρ‹ΠΉ список Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Ρ… Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ².

Для удобства ΠΎΠ½ΠΈ Π±Ρ‹Π»ΠΈ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Ρ‹ Π½Π° нСсколько ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΉ.

Для ОБ Windows ΠΈ Mac OS

НСльзя ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚ΡŒ Ρ‚ΠΎΡ‚ Ρ„Π°ΠΊΡ‚, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ΄Π°Π²Π»ΡΡŽΡ‰Π΅Π΅ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€ΠΎΠ² ΠΈ Π½ΠΎΡƒΡ‚Π±ΡƒΠΊΠΎΠ² Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ ΠΈΠΌΠ΅Π½Π½ΠΎ Π½Π° Π±Π°Π·Π΅ ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… систСм, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½Π½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠ΅ΠΉ Microsoft.

Π‘Π°ΠΌΠΎΠΉ Π°ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½ΠΎΠΉ выступаСт ОБ Windows 10, Π½ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΡŽΠ·Π΅Ρ€Ρ‹ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°ΡŽΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Windows 8, Windows 7 ΠΈ Π±ΠΎΠ»Π΅Π΅ старыми вСрсиями ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΎΠ½ΠΊΠΈ.

Если ΠΈ Ρƒ вас установлСна ΠΎΠ΄Π½Π° ΠΈΠ· ОБ сСрии Windows, для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Ρ„Π°ΠΉΠ»Π°ΠΌΠΈ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° SVG ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌΠΈ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°ΠΌΠΈ:

  1. Inkscape. ЯвляСтся кроссплатформСнной бСсплатной ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΎΠΉ. Π­Ρ‚ΠΎ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ, ΠΈΠΌΠ΅ΡŽΡ‰ΠΈΠΉ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΉ исходный ΠΊΠΎΠ΄. Π‘Ρ‚ΠΎΠΈΡ‚ ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ‚ Π²Π½ΡƒΡˆΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ Π½Π°Π±ΠΎΡ€ΠΎΠΌ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ ΠΈ встроСнных инструмСнтов. ΠžΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΡŒ Π΅Ρ‘ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ½Π° способна Π² качСствС собствСнного SVG Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΉ стандарт Π½Π° Π±Π°Π·Π΅ XML. Π‘ΠΎΡ„Ρ‚ считаСтся ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΌ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹ΠΌ графичСским Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ΠΎΠΌ. Помимо Windows, Ρ‚Π°ΠΊΠΆΠ΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π½Π° ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π½Ρ‹Ρ… устройствах Π½Π° Π±Π°Π·Π΅ ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… систСм Linux ΠΈ Mac OS.
  2. GIMP. Π•Ρ‰Ρ‘ ΠΎΠ΄ΠΈΠ½ бСсплатный, Π½ΠΎ ΠΌΠ½ΠΎΠ³ΠΎΡ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΈ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ графичСский Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€. Π‘ Π΅Π³ΠΎ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ растровыС изобраТСния, ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ. Π—Π΄Π΅ΡΡŒ ΠΏΡ€ΠΈΡΡƒΡ‚ΡΡ‚Π²ΡƒΡŽΡ‚ ΠΈ стандартныС инструмСнты, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠΉ. ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° прСдлагаСтся Π² Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π°Ρ… исполнСния для Ρ€Π°Π·Π½Ρ‹Ρ… ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… систСм, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Windows. Π’Π°ΠΊΠΆΠ΅ Π΅ΡΡ‚ΡŒ вСрсии для Linux ΠΈ Mac OS. Для GIMP прСдлагаСтся мноТСство Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠΉ ΠΈ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ², ΡƒΠ»ΡƒΡ‡ΡˆΠ°ΡŽΡ‰ΠΈΡ… возмоТности ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹.
  3. IrfanView. ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°, Ρ€Π°ΡΠΏΡ€ΠΎΡΡ‚Ρ€Π°Π½ΡΡŽΡ‰Π°ΡΡΡ Π½Π° бСсплатной основС. Π Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π½Π° ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… систСмах Windows. Но Π·Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ Π΅Ρ‘ ΠΌΠΎΠΆΠ½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° ОБ Windows начиная с вСрсии XP. Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚ позволяСт ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ ΠΈ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ изобраТСния. ΠœΠΎΠΆΠ΅Ρ‚ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π°ΡΡ‚Ρ€ΠΎΠ²ΡƒΡŽ Π³Ρ€Π°Ρ„ΠΈΠΊΡƒ, ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Ρ‹ ΠΈ эффСкты.
  4. Visio Standard. ΠœΠ½ΠΎΠ³ΠΎΡ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠΉ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ» Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° SVG, Π½ΠΎ ΠΈ ΠΎΡΡƒΡ‰Π΅ΡΡ‚Π²Π»ΡΡ‚ΡŒ ΠΎΠ±ΡˆΠΈΡ€Π½Ρ‹ΠΉ ΠΏΠ΅Ρ€Π΅Ρ‡Π΅Π½ΡŒ дСйствий, связанных с растровой ΠΈ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠΉ. ΠŸΡ€Π΅Π²ΠΎΡΡ…ΠΎΠ΄Π½Ρ‹ΠΉ инструмСнт. Но Π΅ΡΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½ сущСствСнный нСдостаток для ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Ρ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ. ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° платная. ΠŸΡ€ΠΈΡ‡Ρ‘ΠΌ Π΅Ρ‘ Ρ†Π΅Π½Π° довольно Π²Π½ΡƒΡˆΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ. А ΠΏΠΎΡ‚ΠΎΠΌΡƒ просто для открытия SVG Ρ„Π°ΠΉΠ»ΠΎΠ² ΠΏΠ»Π°Ρ‚ΠΈΡ‚ΡŒ порядка 250–300 Π΄ΠΎΠ»Π»Π°Ρ€ΠΎΠ² вряд Π»ΠΈ ΠΊΡ‚ΠΎ-Ρ‚ΠΎ Ρ€Π΅ΡˆΠΈΡ‚ΡΡ. Если ΠΆΠ΅ стоят Π±ΠΎΠ»Π΅Π΅ ΡΠ΅Ρ€ΡŒΡ‘Π·Π½Ρ‹Π΅ Π·Π°Π΄Π°Ρ‡ΠΈ, Ρ‚ΠΎΠ³Π΄Π° Π·Π°Ρ‚Ρ€Π°Ρ‚Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ сСбя ΠΎΠΏΡ€Π°Π²Π΄Π°Ρ‚ΡŒ Ρ‚Π΅ΠΌΠΈ возмоТностями, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Visio Standard.
  5. Adobe Illustrator. Π­Ρ‚ΠΎ условно бСсплатная ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°. ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΠ΅Ρ‚ собой ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹ΠΉ графичСский Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹ΠΉ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€. Π’ Π½Ρ‘ΠΌ имССтся ΡˆΠΈΡ€ΠΎΠΊΠΈΠΉ Π½Π°Π±ΠΎΡ€ встроСнных ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… инструмСнтов, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΡ… Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ, Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с Ρ†Π²Π΅Ρ‚Π°ΠΌΠΈ ΠΈ тСкстами. Π’Ρ…ΠΎΠ΄ΠΈΡ‚ Π² состав ΠΏΠ»Π°Ρ‚Π½ΠΎΠ³ΠΎ ΠΏΠ°ΠΊΠ΅Ρ‚Π° ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Creative Cloud. БСсплатная вСрсия прСдлагаСтся для ознакомлСния с Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΌΠΈ возмоТностями прилоТСния. Π­Ρ‚Π° ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° доступна для установки Π½Π° ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Ρ‹ ΠΈ Π½ΠΎΡƒΡ‚Π±ΡƒΠΊΠΈ ΠΏΠΎΠ΄ ΡƒΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ OS Windows ΠΈ Mac OS.
  6. Adobe InDesign. Как ΠΈ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅Π΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, являСтся условно бСсплатным. Π­Ρ‚ΠΎ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°, прСдназначСнная для вёрстки ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² для ΠΏΠ΅Ρ‡Π°Ρ‚Π½Ρ‹Ρ… ΠΈΠ·Π΄Π°Π½ΠΈΠΉ, элСктронных ΠΊΠ½ΠΈΠ³, ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠ². ΠžΠ±Π»Π°Π΄Π°Π΅Ρ‚ ΡˆΠΈΡ€ΠΎΠΊΠΈΠΌΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΌΠΈ возмоТностями. ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅ Ρ„Π°ΠΉΠ»ΠΎΠ² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° SVG – лишь ΠΎΠ΄ΠΈΠ½ ΠΈΠ· приятных Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… бонусов ΠΊ основному Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»Ρƒ. МоТно бСсплатно ΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ возмоТности софта, Π½ΠΎ имССтся ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ использования Ρ‚Π°ΠΊΠΎΠΉ вСрсии. ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° доступна для ОБ Windows, Π° Ρ‚Π°ΠΊΠΆΠ΅ для ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€ΠΎΠ² ΠΈ Π½ΠΎΡƒΡ‚Π±ΡƒΠΊΠΎΠ² с Mac OS.
  7. CorelDRAW Graphics Suite. Π¦Π΅Π»Ρ‹ΠΉ ΠΏΠ°ΠΊΠ΅Ρ‚ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ…, Π½ΠΎ взаимосвязанных ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΡΡŽΡ‰ΠΈΡ… Π΄Ρ€ΡƒΠ³ Π΄Ρ€ΡƒΠ³Π° графичСских ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌ. Π­Ρ‚ΠΎ Π½Π°Π±ΠΎΡ€ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… инструмСнтов ΠΈ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π°Ρ†Π΅Π»Π΅Π½Ρ‹ Π½Π° ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½ΡƒΡŽ Ρ€Π°Π±ΠΎΡ‚Ρƒ с растровой ΠΈ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠΉ, Ρ†ΠΈΡ„Ρ€ΠΎΠ²Ρ‹ΠΌΠΈ Ρ„ΠΎΡ‚ΠΎ ΠΈ ΠΏΡ€. ΠŸΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ΡΡ Π½Π° ΠΏΠ»Π°Ρ‚Π½ΠΎΠΉ основС. Но ΠΏΠΎΠ»Π½ΠΎΡ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ бСсплатно сроком Π½Π° 15 Π΄Π½Π΅ΠΉ. Помимо Windows, Ρ‚Π°ΠΊΠΆΠ΅ доступна ΠΈ для Mac OS.
  8. Corel Paint Shop Pro. ΠžΡ‚Π»ΠΈΡ‡Π½Π°Ρ ΠΌΠ½ΠΎΠ³ΠΎΡ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Π°Ρ условно бСсплатная ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°, Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‰Π°Ρ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π½ΠΎΠΌ ΠΎΠ±ΠΎΡ€ΡƒΠ΄ΠΎΠ²Π°Π½ΠΈΠΈ с установлСнной ОБ Windows. ΠŸΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ‚ ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ, Π·Π°Π½ΠΈΠΌΠ°Ρ‚ΡŒΡΡ вопросами графичСскими Π΄ΠΈΠ·Π°ΠΉΠ½Π°ΠΌΠΈ. Экономичная вСрсия для Photoshop. ΠŸΡ€ΠΈ этом софт ΠΈΠΌΠ΅Π΅Ρ‚ Π² своём распоряТСнии инструмСнты ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ уровня. РаспространяСтся Π½Π° ΠΏΠ»Π°Ρ‚Π½ΠΎΠΉ основС, Π½ΠΎ с Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒΡŽ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Π±Π΅ΡΠΏΠ»Π°Ρ‚Π½ΡƒΡŽ Π΄Π΅ΠΌΠΎ-Π²Π΅Ρ€ΡΠΈΡŽ с ΠΏΠΎΠ»Π½Ρ‹ΠΌ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΠΎΠΌ Π½Π° 30 Π΄Π½Π΅ΠΉ.
  9. ABViewer. Π­Ρ‚ΠΎ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹ΠΉ инструмСнт, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠΉ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ Ρ‡Π΅Ρ€Ρ‚Π΅ΠΆΠ°ΠΌΠΈ. Π‘Π΅Π· ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ SVG Ρ„Π°ΠΉΠ»Ρ‹, Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΡƒΠ΅Ρ‚, просматриваСт, ΠΏΠ΅Ρ‡Π°Ρ‚Π°Π΅Ρ‚ ΠΈ ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Ρ‹. ΠŸΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ΡΡ Π½Π° ΠΏΠ»Π°Ρ‚Π½Ρ‹Ρ… условиях. Но доступна Π΄Π΅ΠΌΠΎ-вСрсия, Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½ΠΈΡ€ΡƒΡŽΡ‰Π°Ρ Π² Ρ‚Π΅Ρ‡Π΅Π½ΠΈΠ΅ 45 Π΄Π½Π΅ΠΉ.

Для ОБ Linux

ΠžΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΎΠ½Π½Π°Ρ систСма Linux ΠΏΠΎ ΡƒΡ€ΠΎΠ²Π½ΡŽ своСго распространСния уступаСт Π»ΠΈΠ΄Π΅Ρ€Π°ΠΌ Π² Π»ΠΈΡ†Π΅ Windows ΠΈ Mac OS.

Но ОБ всё Ρ€Π°Π²Π½ΠΎ являСтся вострСбованной, Π² Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ Ρ‡Π΅Π³ΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ³ΠΎ обСспСчСния ΡΡ‡ΠΈΡ‚Π°ΡŽΡ‚ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹ΠΌ Π²Ρ‹ΠΏΡƒΡΠΊΠ°Ρ‚ΡŒ ПО для этой ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹.

Π§Ρ‚ΠΎ ΠΆΠ΅ касаСтся Ρ„Π°ΠΉΠ»ΠΎΠ² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° SVG, Ρ‚ΠΎ здСсь ΠΈΡ… ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π°ΠΊΠΈΡ… рассмотрСнных ΡƒΠΆΠ΅ инструмСнтов ΠΊΠ°ΠΊ Inkscape, Π° Ρ‚Π°ΠΊΠΆΠ΅ GIMP.

Но Π΅Ρ‰Ρ‘ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Linux доступна такая интСрСсная программная Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° ΠΊΠ°ΠΊ KolourPaint.

ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ, Π½ΠΎ ΠΎΡ‡Π΅Π½ΡŒ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠΉ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠΉ, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΡƒΡŽ ΠΈ Ρ€Π°ΡΡ‚Ρ€ΠΎΠ²ΡƒΡŽ. ΠŸΠΎΠ΄ΠΎΠΉΠ΄Ρ‘Ρ‚ Π΄Π°ΠΆΠ΅ Π½ΠΎΠ²ΠΈΡ‡ΠΊΠ°ΠΌ.

Π”Π°, ΠΏΠΎ ΠΌΠ΅Ρ€ΠΊΠ°ΠΌ соврСмСнных вСрсий Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌ этот инструмСнт выглядит ΡƒΡΡ‚Π°Ρ€Π΅Π²ΡˆΠΈΠΌ. Но Π² ΠΏΠ»Π°Π½Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… возмоТностСй ΠΊ Π½Π΅ΠΌΡƒ Π½Π΅Ρ‚ Π½ΠΈΠΊΠ°ΠΊΠΈΡ… сущСствСнных ΠΏΡ€Π΅Ρ‚Π΅Π½Π·ΠΈΠΉ.

Π“Π»Π°Π²Π½ΠΎΠ΅ прСимущСство Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² бСсплатности этой ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹. НичСго ΠΏΠ»Π°Ρ‚ΠΈΡ‚ΡŒ Π·Π° использованиС ΡˆΠΈΡ€ΠΎΠΊΠΈΡ… возмоТностСй софта Π½Π΅ придётся.

Онлайн сСрвисы

ΠžΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ стоит Π²Π·Π³Π»ΡΠ½ΡƒΡ‚ΡŒ Π½Π° нСсколько ΠΎΠ½Π»Π°ΠΉΠ½ сСрвисов, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ»Ρ‹ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° SVG.

К ΠΈΡ… числу относятся Ρ‚Π°ΠΊΠΈΠ΅ ΠΎΠ½Π»Π°ΠΉΠ½ инструмСнты:

  1. Google Диск. НС всС Π·Π½Π°ΡŽΡ‚, Π½ΠΎ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· самых популярных ΠΎΠ½Π»Π°ΠΉΠ½ сСрвисов для хранСния Ρ„Π°ΠΉΠ»ΠΎΠ² Π½Π° самом Π΄Π΅Π»Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ ΠΎΠ³Ρ€ΠΎΠΌΠ½Ρ‹ΠΉ ΠΏΠ΅Ρ€Π΅Ρ‡Π΅Π½ΡŒ Ρ€Π°Π·Π½Ρ‹Ρ… Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠ². Π’ ΠΈΡ… числС ΠΈ SVG. ΠŸΡ€ΠΈ этом Π½ΠΈΡ‡Π΅Π³ΠΎ ΠΏΠ»Π°Ρ‚ΠΈΡ‚ΡŒ Π·Π° использованиС инструмСнта Π½Π΅ придётся.
  2. Autodesk Tinkercad. БСсплатноС ΠΎΠ½Π»Π°ΠΉΠ½ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰Π΅Π΅ Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ 3D ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹ ΠΈ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ. ΠŸΡ€Π΅ΠΊΡ€Π°ΡΠ½ΠΎΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ для ΡƒΡ‡ΠΈΡ‚Π΅Π»Π΅ΠΉ ΠΈ ΠΏΡ€Π΅ΠΏΠΎΠ΄Π°Π²Π°Ρ‚Π΅Π»Π΅ΠΉ. Π’Π°ΠΊΠΆΠ΅ эта ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° ΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ спросом срСди ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Ρ‰ΠΈΠΊΠΎΠ², школьников, студСнтов ΠΈ настоящих энтузиастов.
  3. UnitePDF. Π­Ρ‚ΠΎ ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚Π΅Ρ€, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠΉ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΠ· Ρ„Π°ΠΉΠ»Π° Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° SVG Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ PDF.
  4. Boxy SVG. ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ сСрвис, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ доступСн Π² Π²ΠΈΠ΄Π΅ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΠ½Π»Π°ΠΉΠ½ инструмСнта. Π’ Π½Ρ‘ΠΌ прСдусмотрСны простыС, Π½ΠΎ эффСктивныС срСдства для рисования ΠΈ рСдактирования.
  5. Vectr. Достаточно ΠΊΡ€ΡƒΠΏΠ½Ρ‹ΠΉ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΡ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΎΠ½Π»Π°ΠΉΠ½ сСрвис. Π’ΡƒΡ‚, кстати, Ρ‚ΠΎΠΆΠ΅ Π΅ΡΡ‚ΡŒ ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½ΠΎΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ для установки ΠΈ запуска Π½Π° ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π΅. Онлайн Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ Vectr отличаСтся простотой Ρ€Π°Π±ΠΎΡ‚Ρ‹, Π΄Ρ€ΡƒΠΆΠ΅Π»ΡŽΠ±Π½Ρ‹ΠΌ интСрфСйсом. ΠŸΡ€Π΅ΠΊΡ€Π°ΡΠ½ΠΎΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ для Π½ΠΎΠ²ΠΈΡ‡ΠΊΠΎΠ².

ΠŸΠ΅Ρ€Π΅Ρ‡ΠΈΡΠ»Π΅Π½Π½Ρ‹Π΅ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹, сСрвисы ΠΈ прилоТСния наглядно ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚, Ρ‡Ρ‚ΠΎ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ ΠΈ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ»Ρ‹ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° SVG ΠΌΠΎΠΆΠ½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ большого числа Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ.

Вопрос лишь Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠΌΡƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ.

ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, этими названиями список ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌ для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠΉ Π½Π΅ исчСрпываСтся. Π˜Ρ… ΠΎΡ‡Π΅Π½ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ, Π² Ρ‚ΠΎΠΌ числС ΠΈ самый популярный Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ Adobe Photoshop ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΡ…Ρ€Π°Π½ΡΡ‚ΡŒ изобраТСния ΠΊΠ°ΠΊ Π²Π΅ΠΊΡ‚ΠΎΡ€Ρ‹ ΠΈ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΏΠ»Π°Π³ΠΈΠ½ для ΠΈΡ… открытия. НС стоит Π·Π°Π±Ρ‹Π²Π°Ρ‚ΡŒ ΠΈ ΠΏΡ€ΠΎ ΠΏΠΎΠΏΡƒΠ»ΡΡ€Π½Π΅ΠΉΡˆΠΈΠΉ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ Corel Draw, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°Π·Π²Π°Ρ‚ΡŒ самым популярным.

Π§Ρ‚ΠΎ Π΅Ρ‰Ρ‘ ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π·Ρ‹Π²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ с Ρ„Π°ΠΉΠ»ΠΎΠΌ

ΠžΠ±Ρ‹Ρ‡Π½Ρ‹ΠΌΠΈ срСдствами Windows, Π΄Π° ΠΈ ΠΌΠ½ΠΎΠ³ΠΈΡ… Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… систСм, Ρ„Π°ΠΉΠ»Ρ‹ SVG Π½Π΅ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‚ΡΡ. Π§Ρ‚ΠΎΠ±Ρ‹ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΈΡ… содСрТимоС ΠΈ Ρ‚Π΅ΠΌ Π±ΠΎΠ»Π΅Π΅ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ…, Π½ΡƒΠΆΠ½ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ любой графичСский Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ с ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΎΠΉ этого Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°.

SVG: руководство ΠΏΠΎ написанию ΠΊΠΎΠ΄Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ (с ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°ΠΌΠΈ)

Π₯ΠΎΡ‡Π΅ΡˆΡŒ Π·Π½Π°Ρ‚ΡŒ большС ΠΏΡ€ΠΎ Π²Π΅Π±?

Подпишись Π½Π° наш Ρ‚Π΅Π»Π΅Π³Ρ€Π°ΠΌ-ΠΊΠ°Π½Π°Π» TechRocks WEB-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ°?

ΠŸΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ

Γ—

Π‘Ρ‹Π²Π°Π»ΠΎ Ρƒ вас ΠΊΠΎΠ³Π΄Π°-Π½ΠΈΠ±ΡƒΠ΄ΡŒ Ρ‚Π°ΠΊΠΎΠ΅, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ΅Π½ Π·Π½Π°Ρ‡ΠΎΠΊ для сайта, Π° подходящий Π½Π°ΠΉΡ‚ΠΈ Π½Π΅ получаСтся? Или, ΠΌΠΎΠΆΠ΅Ρ‚, Π²Ρ‹ Ρ…ΠΎΡ‚Π΅Π»ΠΈ ΠΈΠΌΠ΅Ρ‚ΡŒ Π½Π° сайтС простой Π³Ρ€Π°Ρ„ΠΈΠΊ, Π½ΠΎ Π½Π΅ Ρ…ΠΎΡ‚Π΅Π»ΠΈ ΠΈΠ·ΡƒΡ‡Π°Ρ‚ΡŒ Ρ†Π΅Π»ΡƒΡŽ Π½ΠΎΠ²ΡƒΡŽ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для этого?

Π§Ρ‚ΠΎ ΠΆ, Ρ…ΠΎΡ€ΠΎΡˆΠΈΠ΅ новости: Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ всС это ΠΈ Π΄Π°ΠΆΠ΅ большС, Π΄Π°ΠΆΠ΅ Π½Π΅ покидая Π»ΡŽΠ±ΠΈΠΌΡ‹ΠΉ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ ΠΊΠΎΠ΄Π° ΠΈ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ сторонниС инструмСнты ΠΈΠ»ΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ.

ПослС Π²Ρ‹Ρ…ΠΎΠ΄Π° HTML5 ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ SVG-изобраТСния Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ HTML. Для этого Π΄Π°ΠΆΠ΅ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π΅Π³ изобраТСния, ΡΡΡ‹Π»Π°ΡŽΡ‰ΠΈΠΉΡΡ Π½Π° ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ Ρ„Π°ΠΉΠ». ΠœΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π²ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΊΠΎΠ΄ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ прямо Π² HTML, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ синтаксис SVG ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΡ…ΠΎΠΆ Π½Π° HTML.

Π­Ρ‚ΠΎ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ мноТСство интСрСсных возмоТностСй. Π’Π½Π΅Π·Π°ΠΏΠ½ΠΎ оказываСтся, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ доступ ΠΊ частям изобраТСния ΠΈΠ· JavaScript ΠΈΠ»ΠΈ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΡΡ‚ΠΈΠ»ΡŒ ΠΈΠ· CSS. ΠœΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ части изобраТСния с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ JavaScript ΠΈΠ»ΠΈ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΅Π³ΠΎ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌ. А ΠΌΠΎΠΆΠ½ΠΎ ΠΈ Π½Π°ΠΎΠ±ΠΎΡ€ΠΎΡ‚ β€” ΡΠ³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π³Ρ€Π°Ρ„ΠΈΠΊΡƒ ΠΈΠ· ΠΊΠΎΠ΄Π°.

Для Π±ΠΎΠ»Π΅Π΅ слоТных ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π²Ρ‹ всС Ρ€Π°Π²Π½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ дизайнСрский инструмСнт. Но ΠΊΠΎΠ³Π΄Π° Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Ρ€Π°Π· Π²Π°ΠΌ понадобится простой Π·Π½Π°Ρ‡ΠΎΠΊ, Π³Ρ€Π°Ρ„ΠΈΠΊ ΠΈΠ»ΠΈ анимация, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Ρ‹ смоТСтС сами Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΊΠΎΠ΄.

Π’Π°ΠΊ ΠΊΠ°ΠΊ ΠΆΠ΅ SVG выглядят ΠΈΠ·Π½ΡƒΡ‚Ρ€ΠΈ? Π’ этом руководствС ΠΌΡ‹ рассмотрим исходный ΠΊΠΎΠ΄ Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… SVG-ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ…Π²Π°Ρ‚ΠΈΡ‚ΡŒ основы.

Π’Π΅Π³ SVG

Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, ΠΌΡ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΎ самом Ρ‚Π΅Π³Π΅ svg. Π­Ρ‚ΠΎΡ‚ Ρ‚Π΅Π³ содСрТит элСмСнты изобраТСния ΠΈ опрСдСляСт Ρ€Π°ΠΌΠΊΡƒ нашСй ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ. Он устанавливаСт Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΉ ΠΈ внСшний Ρ€Π°Π·ΠΌΠ΅Ρ€ изобраТСния.

Бвойства width ΠΈ height ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚, сколько мСста ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅. Π’Π°ΠΊΠΆΠ΅ часто примСняСтся свойство viewBox. Оно опрСдСляСт систСму ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚ для элСмСнтов Π²Π½ΡƒΡ‚Ρ€ΠΈ изобраТСния.

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ всС эти свойства ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€, это ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠ±ΠΈΠ²Π°Ρ‚ΡŒ с Ρ‚ΠΎΠ»ΠΊΡƒ. Но Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ width ΠΈ height SVG β€” это внСшний Ρ€Π°Π·ΠΌΠ΅Ρ€, Π° viewBox β€” Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΉ.

Π Π°Π·ΠΌΠ΅Ρ€, опрСдСляСмый ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ width ΠΈ height, β€” это Ρ‚ΠΎ, ΠΊΠ°ΠΊ ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠΉ HTML прСдставляСт ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ насколько большим ΠΎΠ½ΠΎ отобраТаСтся Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅. Π Π°Π·ΠΌΠ΅Ρ€, опрСдСляСмый viewBox, β€” это Ρ‚ΠΎ, ΠΊΠ°ΠΊ элСмСнты изобраТСния ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ это ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² Ρ†Π΅Π»ΠΎΠΌ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΡƒΡŽΡ‚ сСбя Π²Π½ΡƒΡ‚Ρ€ΠΈ Π½Π΅Π³ΠΎ.

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Ρƒ нас Π΅ΡΡ‚ΡŒ Ρ‚Ρ€ΠΈ SVG с ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΌ содСрТаниСм. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ circle ΠΈΠΌΠ΅ΡŽΡ‚ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹Π΅ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ Ρ†Π΅Π½Ρ‚Ρ€Π° ΠΈ радиус. Но Π²ΠΈΠ΄ ΠΈΡ… ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ Ρ€Π°Π·Π½Ρ‹ΠΉ.

Π’ Ρ†Π΅Π½Ρ‚Ρ€Π°Π»ΡŒΠ½ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€, ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ width ΠΈ height, совпадаСт с Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ, ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ viewBox.

Π’ ΠΏΠ΅Ρ€Π²ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ Π²ΠΈΠ΄ΠΈΠΌ, Ρ‡Ρ‚ΠΎ происходит, ΠΊΠΎΠ³Π΄Π° width ΠΈ height мСньшС. Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ попросту сТимаСтся, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ всС ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹, ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ Π²Π½ΡƒΡ‚Ρ€ΠΈ изобраТСния, всС Ρ€Π°Π²Π½ΠΎ Ρ€Π°Π²Π½ΡΡŽΡ‚ΡΡ ΠΏΠΎ viewBox.

Π’ послСднСм ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ Π²ΠΈΠ΄ΠΈΠΌ, Ρ‡Ρ‚ΠΎ происходит, Ссли viewBox фокусируСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° части изобраТСния. Π’ этом случаС ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅ становится большС, Π½ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€ самого изобраТСния ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ опрСдСляСтся свойствами width ΠΈ height.

Бвойство viewBox Ρ‚Π°ΠΊΠΆΠ΅ опрСдСляСт Ρ†Π΅Π½Ρ‚Ρ€ систСмы ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ элСмСнты изобраТСния.

ΠŸΠ΅Ρ€Π²Ρ‹Π΅ Π΄Π²Π° числа ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΡƒΠ³Π»Π° изобраТСния. ЗначСния ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚ растут Π²ΠΏΡ€Π°Π²ΠΎ ΠΈ Π²Π½ΠΈΠ·. Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ систСмы ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚ 0,0 всСгда Π±ΡƒΠ΄Π΅Ρ‚ Π² Ρ†Π΅Π½Ρ‚Ρ€Π΅ изобраТСния.

И Π΅Ρ‰Π΅ ΠΎΠ΄Π½ΠΎ. Π₯отя ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π²ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ SVG-изобраТСния Π² HTML-Ρ„Π°ΠΉΠ», это Π½Π΅ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ свободно ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π»ΡŽΠ±Ρ‹Π΅ Ρ‚Π΅Π³ΠΈ SVG с Π»ΡŽΠ±Ρ‹ΠΌΠΈ Ρ‚Π΅Π³Π°ΠΌΠΈ HTML.

Π’Π΅Π³ SVG прСдставляСт Ρ„Ρ€Π΅ΠΉΠΌ изобраТСния. ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ SVG-элСмСнт Π΄ΠΎΠ»ΠΆΠ΅Π½ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ‚Π΅Π³Π° SVG. И Π½Π°ΠΎΠ±ΠΎΡ€ΠΎΡ‚: HTML-Ρ‚Π΅Π³ΠΈ Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ‚Π΅Π³Π° SVG, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Π½Π΅ ΠΌΠΎΠΆΠ΅ΠΌ Π²Π·ΡΡ‚ΡŒ ΠΈ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π² SVG Ρ‚Π΅Π³ div ΠΈΠ»ΠΈ header. Но Π½Π΅ Π²ΠΎΠ»Π½ΡƒΠΉΡ‚Π΅ΡΡŒ: Π²Π°ΠΌ Π±ΡƒΠ΄ΡƒΡ‚ доступны ΠΏΠΎΡ…ΠΎΠΆΠΈΠ΅ Ρ‚Π΅Π³ΠΈ.

Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ Π΅Π»ΠΎΡ‡Π½ΡƒΡŽ ΠΈΠ³Ρ€ΡƒΡˆΠΊΡƒ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ SVG

НачнСм с ΠΏΡ€ΠΎΡΡ‚Π΅Π½ΡŒΠΊΠΎΠ³ΠΎ: с Π΅Π»ΠΎΡ‡Π½ΠΎΠ³ΠΎ ΡˆΠ°Ρ€ΠΈΠΊΠ°. ΠœΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ простыС Ρ„ΠΎΡ€ΠΌΡ‹: ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ ΠΈ Π΄Π²Π° ΠΊΡ€ΡƒΠ³Π°.

Π Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ ΠΈ ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ эти элСмСнты ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ². Для ΠΊΡ€ΡƒΠ³Π° ΠΌΡ‹ опрСдСляСм ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ Ρ†Π΅Π½Ρ‚Ρ€Π°, ΠΈ для ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ° β€” Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ Π»Π΅Π²Ρ‹ΠΉ ΡƒΠ³ΠΎΠ». Π­Ρ‚ΠΈ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ всСгда ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹, ΠΎΠ½ΠΈ ΠΏΡ€ΠΈΠ²ΡΠ·Ρ‹Π²Π°ΡŽΡ‚ΡΡ ΠΊ систСмС ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚, ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ viewBox.

<html>
  <svg viewBox="-100 -100 200 200”>
    <circle cx="0" cy="20" r="70" fill="#D1495B" />
    <circle
      cx="0"
      cy="-75"
      r="12"
      fill="none"
      stroke="#F79257"
      stroke-width="2"
    />
    <rect x="-17. 5" y="-65" fill="#F79257" />
  </svg>
</html>

НС Π·Π°Π±Ρ‹Π²Π°ΠΉΡ‚Π΅: ΠΌΡ‹ сдвинули Ρ†Π΅Π½Ρ‚Ρ€ систСмы ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚ ΠΊ сСрСдинС изобраТСния, ΠΏΡ€ΠΈ этом значСния ΠΏΠΎ оси X растут Π²ΠΏΡ€Π°Π²ΠΎ, Π° ΠΏΠΎ оси Y β€” Π²Π½ΠΈΠ·.

Π£ нас Ρ‚Π°ΠΊΠΆΠ΅ Π΅ΡΡ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ для стилизации Π½Π°ΡˆΠΈΡ… Ρ„ΠΎΡ€ΠΌ. Π’ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ HTML, для установки Ρ†Π²Π΅Ρ‚Π° Ρ„ΠΈΠ³ΡƒΡ€Ρ‹ ΠΌΡ‹ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ свойство background-color. ВмСсто Π½Π΅Π³ΠΎ примСняСтся Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ fill (Β«Π·Π°Π»ΠΈΠ²ΠΊΠ°Β»).

А Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°Π΄Π°Ρ‚ΡŒ ΠΊΠΎΠ½Ρ‚ΡƒΡ€ Ρ„ΠΈΠ³ΡƒΡ€Ρ‹, Ρƒ нас Π΅ΡΡ‚ΡŒ ΠΎΠ±Π²ΠΎΠ΄ΠΊΠ° β€” stroke ΠΈ stroke-width. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ элСмСнт circle ΠΊΠ°ΠΊ для отрисовки ΠΊΠΎΠ»ΡŒΡ†Π°, Ρ‚Π°ΠΊ ΠΈ для отрисовки ΡˆΠ°Ρ€ΠΈΠΊΠ°, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ примСняСм Ρ€Π°Π·Π½Ρ‹Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹.

Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ новогоднюю Π΅Π»ΠΎΡ‡ΠΊΡƒ

ΠŸΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΠΌ ΠΊ Π΅Π»ΠΊΠ΅. ВсСгда ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ простыми Ρ„ΠΈΠ³ΡƒΡ€Π°ΠΌΠΈ для составлСния ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π½Π΅ получится. Π‘Π°ΠΌΡ‹ΠΉ простой способ Π½Π°Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ Ρ„ΠΈΠ³ΡƒΡ€Ρƒ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ»ΡŒΠ½ΠΎΠΉ Ρ„ΠΎΡ€ΠΌΡ‹ β€” ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ polygon (ΠΌΠ½ΠΎΠ³ΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ). Π—Π΄Π΅ΡΡŒ ΠΌΡ‹ устанавливаСм список Ρ‚ΠΎΡ‡Π΅ΠΊ, связанных прямыми линиями.

<html>
  <svg viewBox="-100 -100 200 200">
    <polygon points="0,0 80,120 -80,120" fill="#234236" />
    <polygon points="0,-40 60,60 -60,60" fill="#0C5C4C" />
    <polygon points="0,-80 40,0 -40,0" fill="#38755B" />
    <rect x="-20" y="120" fill="brown" />
  </svg>
</html>

ВСроятно, Π²Ρ‹ Π·Π°Π΄Π°Π΅Ρ‚Π΅ΡΡŒ вопросом, ΠΎΡ‚ΠΊΡƒΠ΄Π° ΠΌΡ‹ Π·Π½Π°Π΅ΠΌ, ΠΊΠ°ΠΊΠΈΠΌΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹.

ЧСстно говоря, это Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ Ρ‚ΠΎΠ»ΠΈΠΊΠΈ вообраТСния. Для Π½Π°Ρ‡Π°Π»Π° ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ набросок Π½Π° Π±ΡƒΠΌΠ°Π³Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠΊΠΈΠ½ΡƒΡ‚ΡŒ, Π³Π΄Π΅ Ρ‡Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚. Или ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ выстрСл Π½Π°ΡƒΠ³Π°Π΄ ΠΈ Π·Π°Ρ‚Π΅ΠΌ ΠΏΠΎΠ΄Π³ΠΎΠ½ΡΡ‚ΡŒ значСния, ΠΏΠΎΠΊΠ° Π½Π΅ Π΄ΠΎΠ±ΡŒΠ΅Ρ‚Π΅ΡΡŒ ΠΆΠ΅Π»Π°Π΅ΠΌΠΎΠ³ΠΎ Π²ΠΈΠ΄Π°.

Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ пряничного Ρ‡Π΅Π»ΠΎΠ²Π΅Ρ‡ΠΊΠ°

ΠŸΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΠΌ ΠΊ пряникам. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ наш SVG Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΆΠΈΠ²Π΅Ρ‚ Π²Π½ΡƒΡ‚Ρ€ΠΈ HTML-Ρ„Π°ΠΉΠ»Π°, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π½Π°Π·Π½Π°Ρ‡ΠΈΡ‚ΡŒ CSS-классы для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Ρ‚Π΅Π³Π° ΠΈ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ Π² CSS.

Но это касаСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ², связанных с внСшним Π²ΠΈΠ΄ΠΎΠΌ. ΠŸΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½Π½Ρ‹Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹, ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‰ΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΡƒ, Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΎΡΡ‚Π°Ρ‚ΡŒΡΡ Π² HTML. А Π²ΠΎΡ‚ Ρ†Π²Π΅Ρ‚Π°, ΠΊΠΎΠ½Ρ‚ΡƒΡ€Ρ‹ ΠΈ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ±Ρ€ΠΎΡΠΈΡ‚ΡŒ Π² CSS.

<svg viewBox="-100 -100 200 200">
  <circle cx="0" cy="-50" r="30" />
  <circle cx="-12" cy="-55" r="3" />
  <circle cx="12" cy="-55" r="3" />
  <rect x="-10" y="-40" rx="2" />
  <line x1="-40" y1="-10" x2="40" y2="-10" />
  <line x1="-25" y1="50" x2="0" y2="-15" />
  <line x1="25" y1="50" x2="0" y2="-15" />
  <circle cx="0" cy="-10" r="5" />
  <circle cx="0" cy="10" r="5" />
</svg>
. gingerbread .body {
  fill: #cd803d;
}
.gingerbread .eye {
  fill: white;
}
.gingerbread .mouth {
  fill: none;
  stroke: white;
  stroke-width: 2px;
}
.gingerbread .limb {
  stroke: #cd803d;
  stroke-width: 35px;
  stroke-linecap: round;
}

ΠœΡ‹ ΡƒΠΆΠ΅ Π·Π½Π°ΠΊΠΎΠΌΡ‹ с fill ΠΈ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ свойствами stroke. Π”Π°Π²Π°ΠΉΡ‚Π΅ познакомимся с Π΅Ρ‰Π΅ ΠΎΠ΄Π½ΠΈΠΌ β€” stroke-linecap. Π­Ρ‚ΠΎΡ‚ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ управляСт способом ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ. Π‘ Π΅Π³ΠΎ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΠΎΠ½Ρ†Ρ‹ Π»ΠΈΠ½ΠΈΠΉ Π·Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹ΠΌΠΈ.

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Ρ€ΡƒΠΊΠΈ ΠΈ Π½ΠΎΠ³ΠΈ Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊΠ° β€” простыС Π»ΠΈΠ½ΠΈΠΈ. Если ΠΌΡ‹ ΡƒΠ΄Π°Π»ΠΈΠΌ Π·Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½ΠΈΠ΅ ΠΊΠΎΠ½Ρ†ΠΎΠ² ΠΈ установим мСньшСС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ stroke-width, ΠΌΡ‹ это Π·Π°ΠΌΠ΅Ρ‚ΠΈΠΌ. Π—Π° счСт Ρ‚ΠΎΠ»Ρ‰ΠΈΠ½Ρ‹ Π»ΠΈΠ½ΠΈΠΈ ΠΈ скруглСния ΠΊΠΎΠ½Ρ†ΠΎΠ² ΠΌΡ‹ ΠΏΡ€ΠΈΠ΄Π°Π΅ΠΌ линиям Π²ΠΈΠ΄ Ρ€ΡƒΠΊ ΠΈ Π½ΠΎΠ³ нашСй Ρ„ΠΈΠ³ΡƒΡ€ΠΊΠΈ.

Π•Ρ‰Π΅ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° свойство rx Π² ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ΅. Оно опрСдСляСт Ρ€ΠΎΡ‚ Ρ‡Π΅Π»ΠΎΠ²Π΅Ρ‡ΠΊΠ°. Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этого свойства задаСтся радиус x ΡƒΠ³Π»ΠΎΠ² ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ° ΠΈ ΡΠΎΠ·Π΄Π°ΡŽΡ‚ΡΡ ΠΎΠΊΡ€ΡƒΠ³Π»Ρ‹Π΅ ΡƒΠ³Π»Ρ‹. Если Π²Π°ΠΌ Ρ‚Π°ΠΊ ΠΏΡ€ΠΈΠ²Ρ‹Ρ‡Π½Π΅Π΅, ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ это border-radius.

Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ Π·Π²Π΅Π·Π΄Ρƒ

ΠŸΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΠΌ ΠΊ Π·Π²Π΅Π·Π΄ΠΎΡ‡ΠΊΠ΅. Π—Π²Π΅Π·Π΄Π° β€” простая Ρ„ΠΎΡ€ΠΌΠ°, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ Π΅Π΅ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… ΠΌΠ½ΠΎΠ³ΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠΎΠ² (polygon), задавая ΠΊΠ°ΠΆΠ΄ΡƒΡŽ Ρ‚ΠΎΡ‡ΠΊΡƒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ. Но для этого Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π·Π½Π°Ρ‚ΡŒ всС ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹.

ВмСсто этого ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ просто ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½ Π»ΡƒΡ‡ Π·Π²Π΅Π·Π΄Ρ‹ ΠΊΠ°ΠΊ Π³Ρ€ΡƒΠΏΠΏΡƒ, Π° Π·Π°Ρ‚Π΅ΠΌ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΠΈΡ‚ΡŒ Π΅Π΅ ΠΏΡΡ‚ΡŒ Ρ€Π°Π· с ΠΏΠΎΠ²ΠΎΡ€ΠΎΡ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Ρ„ΠΎΡ€ΠΌΡƒ Π·Π²Π΅Π·Π΄Ρ‹. Для установки ΠΏΠΎΠ²ΠΎΡ€ΠΎΡ‚Π° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ transform.

<svg viewBox="-100 -100 200 200">      
  <g transform="translate(0 5)">
    <g>
      <polygon points="0,0 36,-50 0,-100" fill="#EDD8B7" />
      <polygon points="0,0 -36,-50 0,-100" fill="#E5C39C" />
    </g>
    <g transform="rotate(72)">
      <polygon points="0,0 36,-50 0,-100" fill="#EDD8B7" />
      <polygon points="0,0 -36,-50 0,-100" fill="#E5C39C" />
    </g>
    <g transform="rotate(-72)">
      <polygon points="0,0 36,-50 0,-100" fill="#EDD8B7" />
      <polygon points="0,0 -36,-50 0,-100" fill="#E5C39C" />
    </g>
    <g transform="rotate(144)">
      <polygon points="0,0 36,-50 0,-100" fill="#EDD8B7" />
      <polygon points="0,0 -36,-50 0,-100" fill="#E5C39C" />
    </g>
    <g transform="rotate(-144)">
      <polygon points="0,0 36,-50 0,-100" fill="#EDD8B7" />
      <polygon points="0,0 -36,-50 0,-100" fill="#E5C39C" />
    </g>
  </g>
</svg>

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Π»ΡƒΡ‡ состоит ΠΈΠ· Π΄Π²ΡƒΡ… ΠΌΠ½ΠΎΠ³ΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠΎΠ². Они Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π²Ρ€Π°Ρ‰Π°Ρ‚ΡŒΡΡ вмСстС, поэтому ΠΌΡ‹ Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΡƒΠ΅ΠΌ ΠΈΡ… ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ Ρ‚Π΅Π³Π° g, Π° Π·Π°Ρ‚Π΅ΠΌ примСняСм rotate ΠΊ ΠΎΠ±ΠΎΠΈΠΌ сразу.

ΠœΠΎΠΆΠ΅Ρ‚Π΅ ΡΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Ρ‚Π΅Π³ g β€” Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π²Ρ€ΠΎΠ΄Π΅ div Π² HTML. Π‘Π°ΠΌ ΠΏΠΎ сСбС ΠΎΠ½ Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ прСдставляСт. Но ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ элСмСнты ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹, ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ для Π³Ρ€ΡƒΠΏΠΏΡ‹ ΠΈ примСняСмыС для всСх Π΅Π³ΠΎ ΠΏΠΎΡ‚ΠΎΠΌΠΊΠΎΠ².

Π“Ρ€ΡƒΠΏΠΏΡ‹ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ встроСнными. ΠŸΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ внСшнСй Π³Ρ€ΡƒΠΏΠΏΡ‹ ΠΌΡ‹ translate (ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Π΅ΠΌ) всю Π·Π²Π΅Π·Π΄Ρƒ Π½Π° 5 ΡŽΠ½ΠΈΡ‚ΠΎΠ² Π²Π½ΠΈΠ·.

Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ снСТинку

Π“Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ элСмСнтов β€” ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ ΠΏΡ€ΠΈΠ΅ΠΌ, Π½ΠΎ Π½Π°ΠΌ приходится ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΉ ΠΊΠΎΠ΄ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π»ΡƒΡ‡Π° ΠΏΡΡ‚ΡŒ Ρ€Π°Π·.

ВмСсто многочислСнных ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΠΎΠ² ΠΊΠΎΠ΄Π° ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ для Ρ„ΠΈΠ³ΡƒΡ€Ρ‹ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π΅ Π·Π°Π½ΠΎΠ²ΠΎ, ΠΎΠ±Ρ€Π°Ρ‰Π°ΡΡΡŒ ΠΏΠΎ id. Π—Π΄Π΅ΡΡŒ ΠΌΡ‹ опрСдСляСм Π»ΡƒΡ‡ снСТинки, Π° Π·Π°Ρ‚Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ Π΅Π³ΠΎ ΡˆΠ΅ΡΡ‚ΡŒ Ρ€Π°Π· с Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ ΠΏΠΎΠ²ΠΎΡ€ΠΎΡ‚Π°ΠΌΠΈ.

<svg viewBox="-100 -100 200 200">
  <defs>
    <path
     
      d="
        M 0 0 L 0 -90
        M 0 -20 L 20 -34
        M 0 -20 L -20 -34
        M 0 -40 L 20 -54
        M 0 -40 L -20 -54
        M 0 -60 L 20 -74
        M 0 -60 L -20 -74"
      stroke="#E5C39C"
      stroke-width="5"
    />
  </defs>
  <use href="#branch" />
  <use href="#branch" transform="rotate(60)" />
  <use href="#branch" transform="rotate(120)" />
  <use href="#branch" transform="rotate(180)" />
  <use href="#branch" transform="rotate(240)" />
  <use href="#branch" transform="rotate(300)" />
</svg>

Π›ΡƒΡ‡ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ ΠΊΠ°ΠΊ path. Π’ΠΎΠΎΠ±Ρ‰Π΅, path (Β«ΠΏΡƒΡ‚ΡŒΒ») β€” самый ΠΌΠΎΡ‰Π½Ρ‹ΠΉ Ρ‚Π΅Π³ SVG. Π‘ Π΅Π³ΠΎ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΎΡ‡Π΅Π½ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ всСго, ΠΈ Ссли Π²Ρ‹ ΠΎΡ‚ΠΊΡ€ΠΎΠ΅Ρ‚Π΅ любой SVG-Ρ„Π°ΠΉΠ», Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ практичСски ΠΎΠ΄Π½ΠΈ path.

Π€ΠΎΡ€ΠΌΠ° path ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π° Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠΌ d. Π—Π΄Π΅ΡΡŒ ΠΌΡ‹ опрСдСляСм нСсколько ΠΊΠΎΠΌΠ°Π½Π΄ рисования. Команда всСгда начинаСтся с Π±ΡƒΠΊΠ²Ρ‹, ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‰Π΅ΠΉ Ρ‚ΠΈΠΏ ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹, ΠΈ заканчиваСтся ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Π°ΠΌΠΈ.

Π£ нас всСго Π΄Π²Π΅ простыС ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹: Β«ΡΠ΄Π²ΠΈΠ½ΡƒΡ‚ΡŒ к…» (move to, M) ΠΈ «провСсти линию к…» (line to, L). Команда move to ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Π΅Ρ‚ курсор ΠΊ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠ΅ Π±Π΅Π· рисования Π»ΠΈΠ½ΠΈΠΈ, Π° ΠΊΠΎΠΌΠ°Π½Π΄Π° line to рисуСт Ρ€ΠΎΠ²Π½ΡƒΡŽ линию ΠΈΠ· ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΉ Ρ‚ΠΎΡ‡ΠΊΠΈ.

Π›ΡŽΠ±Π°Ρ ΠΊΠΎΠΌΠ°Π½Π΄Π° всСгда ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°Π΅Ρ‚ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΡƒΡŽ, поэтому ΠΏΡ€ΠΈ рисовании Π»ΠΈΠ½ΠΈΠΈ ΠΌΡ‹ опрСдСляСм Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊΠΎΠ½Π΅Ρ‡Π½ΡƒΡŽ Ρ‚ΠΎΡ‡ΠΊΡƒ. ΠΠ°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠΎΠΉ Π±ΡƒΠ΄Π΅Ρ‚ конСчная Ρ‚ΠΎΡ‡ΠΊΠ° ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΉ ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹.

Π­Ρ‚ΠΎΡ‚ path Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π½Π΅ΠΎΠ±Ρ‹Ρ‡Π΅Π½, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π² Π½Π΅ΠΌ Π΅ΡΡ‚ΡŒ нСсколько ΠΊΠΎΠΌΠ°Π½Π΄ move to для отрисовки Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ Π»ΡƒΡ‡Π° ΠΈ Ρ‚Π°ΠΊΠΎΠΉ ΠΆΠ΅ path для отрисовки Π±ΠΎΠΊΠΎΠ²Ρ‹Ρ….

Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ Π²ΠΎΠ»Π½ΠΈΡΡ‚ΡƒΡŽ Π΅Π»ΠΎΡ‡ΠΊΡƒ

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ path проявляСт свою ΠΌΠΎΡ‰ΡŒ Π½Π° ΠΏΠΎΠ»Π½ΡƒΡŽ силу, ΠΊΠΎΠ³Π΄Π° ΠΌΡ‹ Π½Π°Ρ‡ΠΈΠ½Π°Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΡ€ΠΈΠ²Ρ‹Π΅. НапримСр, ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ΠΈΡ‡Π½ΡƒΡŽ ΠΊΡ€ΠΈΠ²ΡƒΡŽ Π‘Π΅Π·ΡŒΠ΅, которая опрСдСляСт Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊΠΎΠ½Π΅Ρ‡Π½ΡƒΡŽ Ρ‚ΠΎΡ‡ΠΊΡƒ сСгмСнта, Π½ΠΎ ΠΈ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒΠ½ΡƒΡŽ Ρ‚ΠΎΡ‡ΠΊΡƒ. ΠšΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒΠ½Π°Ρ Ρ‚ΠΎΡ‡ΠΊΠ° β€” это Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΡ‹Π΅ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹, Π² сторону ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… линия искривляСтся. ΠŸΡ€ΠΈ этом искривлСнная линия самой ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒΠ½ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠΈ Π½Π΅ касаСтся.

<svg viewBox="-100 -200 200 400">
  <path
    d="
      M 0 -80
      Q 5 -75 0 -70
      Q -10 -65 0 -60
      Q 15 -55 0 -50
      Q -20 -45 0 -40
      Q 25 -35 0 -30
      Q -30 -25 0 -20
      Q 35 -15 0 -10
      Q -40 -5 0 0
      Q 45 5 0 10
      Q -50 15 0 20
      Q 55 25 0 30
      Q -60 35 0 40
      Q 65 45 0 50
      Q -70 55 0 60
      Q 75 65 0 70
      Q -80 75 0 80
      Q 85 85 0 90
      Q -90 95 0 100
      Q 95 105 0 110
      Q -100 115 0 120
      L 0 140
      L 20 140
      L -20 140"
    fill="none"
    stroke="#0C5C4C"
    stroke-width="5"
  />
</svg>

Π—Π΄Π΅ΡΡŒ Ρƒ нас сСрия ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ΠΈΡ‡Π½Ρ‹Ρ… ΠΊΡ€ΠΈΠ²Ρ‹Ρ… Π‘Π΅Π·ΡŒΠ΅ (Q), Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒΠ½Π°Ρ Ρ‚ΠΎΡ‡ΠΊΠ° всС удаляСтся ΠΈ удаляСтся ΠΎΡ‚ Ρ†Π΅Π½Ρ‚Ρ€Π° Π΄Π΅Ρ€Π΅Π²Π° ΠΏΠΎ ΠΌΠ΅Ρ€Π΅ Ρ‚ΠΎΠ³ΠΎ ΠΊΠ°ΠΊ path опускаСтся Π²Π½ΠΈΠ·.

Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ ΠΊΠΎΠ»ΠΎΠΊΠΎΠ»ΡŒΡ‡ΠΈΠΊ

Π₯отя квадратичная кривая Π‘Π΅Π·ΡŒΠ΅ (Q) ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для искривлСния Π»ΠΈΠ½ΠΈΠΉ, часто ΠΎΠ½Π° нСдостаточно Π³ΠΈΠ±ΠΊΠ°.

А Π²ΠΎΡ‚ Π² кубичСской ΠΊΡ€ΠΈΠ²ΠΎΠΉ Π‘Π΅Π·ΡŒΠ΅ (C) Ρƒ нас появляСтся Π½Π΅ ΠΎΠ΄Π½Π° ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒΠ½Π°Ρ Ρ‚ΠΎΡ‡ΠΊΠ°, Π° Π΄Π²Π΅. ΠŸΠ΅Ρ€Π²Π°Ρ устанавливаСт Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΊΡ€ΠΈΠ²ΠΎΠΉ, Π° вторая опрСдСляСт, с ΠΊΠ°ΠΊΠΎΠΉ стороны кривая Π΄ΠΎΠ»ΠΆΠ½Π° ΠΏΠΎΠΏΠ°ΡΡ‚ΡŒ Π² свою ΠΊΠΎΠ½Π΅Ρ‡Π½ΡƒΡŽ Ρ‚ΠΎΡ‡ΠΊΡƒ.

Если эти направлСния ΡΠΎΠ²ΠΏΠ°Π΄Π°ΡŽΡ‚ с направлСниями Π»ΠΈΠ½ΠΈΠΈ Π΄ΠΎ ΠΈ послС искривлСния, ΠΌΡ‹ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ ΠΏΠ»Π°Π²Π½Ρ‹ΠΉ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ ΠΌΠ΅ΠΆΠ΄Ρƒ сСгмСнтами ΠΏΡƒΡ‚ΠΈ.

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ создаСм Ρ„ΠΎΡ€ΠΌΡƒ ΠΊΠΎΠ»ΠΎΠΊΠΎΠ»ΡŒΡ‡ΠΈΠΊΠ°, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΈ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ΠΈΡ‡Π½Ρ‹Π΅, ΠΈ кубичСскиС ΠΊΡ€ΠΈΠ²Ρ‹Π΅ Π‘Π΅Π·ΡŒΠ΅.

Низ ΠΊΠΎΠ»ΠΎΠΊΠΎΠ»ΡŒΡ‡ΠΈΠΊΠ° опрСдСляСтся прямыми линиями. Π—Π°Ρ‚Π΅ΠΌ начинаСтся квадратичная кривая Π‘Π΅Π·ΡŒΠ΅ (Ρ„ΠΎΡ€ΠΌΠΈΡ€ΡƒΠ΅Ρ‚ ΠΈΠ·Π³ΠΈΠ± стСнки ΠΊΠΎΠ»ΠΎΠΊΠΎΠ»ΡŒΡ‡ΠΈΠΊΠ°), которая ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ Π² ΠΊΡƒΠ±ΠΈΡ‡Π΅ΡΠΊΡƒΡŽ (для формирования ΠΊΡƒΠΏΠΎΠ»Π°). Π—Π°Ρ‚Π΅ΠΌ ΠΌΡ‹ достигаСм Π½ΠΈΠΆΠ½Π΅ΠΉ части, Π³Π΄Π΅ ΠΈΠ΄Π΅Ρ‚ Π΅Ρ‰Π΅ ΠΎΠ΄Π½Π° квадратичная кривая.

Π˜Ρ‚ΠΎΠ³ΠΈ

Π’ΠΎ, Ρ‡Ρ‚ΠΎ находится ΠΏΠΎΠ΄ ΠΊΠ°ΠΏΠΎΡ‚ΠΎΠΌ SVG, ΠΏΠΎΠ½Π°Ρ‡Π°Π»Ρƒ каТСтся нСпонятным. ΠšΡƒΡ‡Π° ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚, Π±ΡƒΠΊΠ²Ρ‹ ΠΈ странныС ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹. Но ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Ρ€Π°Π·Π±Π΅Ρ€Π΅Ρ‚Π΅ΡΡŒ Π² основах, Π²Ρ‹ смоТСтС ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ SVG-изобраТСния ΠΈ ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΊΠΎΠ΄ для Π½ΠΈΡ….

Π­Ρ‚Π° ΡΡ‚Π°Ρ‚ΡŒΡ β€” лишь вступлСниС. Если Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊ SVG Π΅Ρ‰Π΅ ΠΈ JavaScript, ΠΌΡ‹ Π²Ρ‹ΠΉΠ΄Π΅ΠΌ Π½Π° качСствСнно Π½ΠΎΠ²Ρ‹ΠΉ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ.

Если Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ большС ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² создания SVG-ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ ΠΊΠΎΠ΄Π°, Π²ΠΎΡ‚ Π²Π°ΠΌ Π²ΠΈΠ΄Π΅ΠΎ:

ΠŸΠ΅Ρ€Π΅Π²ΠΎΠ΄ ΡΡ‚Π°Ρ‚ΡŒΠΈ Β«SVG Tutorial – How to Code Images with 7 ExamplesΒ».

Ρ‡Ρ‚ΠΎ это Ρ‚Π°ΠΊΠΎΠ΅ ΠΈ ΠΊΠ°ΠΊ ΠΈΡ… ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ Ρ„Π°ΠΉΠ» SVG?

Растр ΠΏΡ€ΠΎΡ‚ΠΈΠ² Π²Π΅ΠΊΡ‚ΠΎΡ€Π°

Как Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Ρ„Π°ΠΉΠ»Ρ‹ SVG

ΠŸΡ€Π΅ΠΈΠΌΡƒΡ‰Π΅ΡΡ‚Π²Π° Ρ„Π°ΠΉΠ»ΠΎΠ² SVG

1 БСсконСчная ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΠΎΡΡ‚ΡŒ

2 Настройка

3 Π‘ΠΎΠ²ΠΌΠ΅ΡΡ‚ΠΈΠΌΠΎΡΡ‚ΡŒ сцСнариСв

4 Π”ΠΎΡΡ‚ΡƒΠΏΠ½ΠΎΡΡ‚ΡŒ ΠΈ поисковая оптимизация

5 МСньшиС Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ Ρ„Π°ΠΉΠ»ΠΎΠ²

Для Ρ‡Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Ρ„Π°ΠΉΠ»Ρ‹ SVG?

Иконки

Π›ΠΎΠ³ΠΎΡ‚ΠΈΠΏΡ‹

Π˜Π»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΈ

Анимации ΠΈ элСмСнты интСрфСйса

Π˜Π½Ρ„ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠ° ΠΈ визуализация Π΄Π°Π½Π½Ρ‹Ρ…

Как Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с Ρ„Π°ΠΉΠ»Π°ΠΌΠΈ SVG

Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ Ρ„Π°ΠΉΠ» SVG

Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΈΠ»ΠΈ ΠΎΡ‚Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ» SVG

Π”ΠΈΠ·Π°ΠΉΠ½ для ΠΌΠ°ΡΡˆΡ‚Π°Π±Π°

Π’ процСссС Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΡƒΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ Π²Π΅Π±-сайта Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΡ‚ΠΎΠ»ΠΊΠ½ΡƒΡ‚ΡŒΡΡ с Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ трудностями с изобраТСниями, особСнно с ΠΈΡ… Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ. ΠšΠ°Ρ‡Π΅ΡΡ‚Π²ΠΎ изобраТСния Π²Π°ΠΆΠ½ΠΎ для ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ³ΠΎ – мСньшС Π²Π΅Ρ‰Π΅ΠΉ выглядит Π½Π° страницС ΠΌΠ΅Π½Π΅Π΅ ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ, Ρ‡Π΅ΠΌ искаТСнный, ΠΏΠ»ΠΎΡ…ΠΎ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ, Π·Π½Π°Ρ‡ΠΎΠΊ ΠΈΠ»ΠΈ фотография.

И эта ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° усугубляСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ. ΠŸΠΎΡΠ΅Ρ‚ΠΈΡ‚Π΅Π»ΠΈ ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°ΡŽΡ‚ ваш ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΊΠ°ΠΊ Π½Π° Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π°Ρ…, Ρ‚Π°ΠΊ ΠΈ Π½Π° смартфонах, поэтому, наряду с ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠΉ Ρ‡Π°ΡΡ‚ΡŒΡŽ вашСго ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, ваши изобраТСния Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Ρ‹ нСзависимо ΠΎΡ‚ устройства. Π Π°Π·Π²Π΅ Π½Π΅ Π±Ρ‹Π»ΠΎ Π±Ρ‹ Ρ…ΠΎΡ€ΠΎΡˆΠΎ, Ссли Π±Ρ‹ сущСствовал Ρ†ΠΈΡ„Ρ€ΠΎΠ²ΠΎΠΉ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ изобраТСния выглядСли Π²Π΅Π»ΠΈΠΊΠΎΠ»Π΅ΠΏΠ½ΠΎ, нСзависимо ΠΎΡ‚ ΠΈΡ… Ρ€Π°Π·ΠΌΠ΅Ρ€Π°?

Как оказалось, Π΅ΡΡ‚ΡŒ. Он называСтся Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠΌ SVG ΠΈ идСально ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для нСфотографичСских ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° Π²Π΅Π±-сайтах.

SVG – это своСго Ρ€ΠΎΠ΄Π° Π²ΠΎΠ»ΡˆΠ΅Π±Π½Ρ‹ΠΉ Ρ‚Ρ€ΡŽΠΊ Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ Π²Π΅Π±-сайтов: ΠΎΠ½ΠΈ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΡŽΡ‚ Ρ‡Π΅Ρ‚ΠΊΡƒΡŽ Π³Ρ€Π°Ρ„ΠΈΠΊΡƒ Π² любом ΠΌΠ°ΡΡˆΡ‚Π°Π±Π΅, Π½ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Ρ‹ для SEO, ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΡƒΡŽΡ‚ΡΡ, часто мСньшС, Ρ‡Π΅ΠΌ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹, ΠΈ способны ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π΄ΠΈΠ½Π°ΠΌΠΈΡ‡Π΅ΡΠΊΡƒΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ. Π•ΡΡ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ Ρ‡Π΅Π³ΠΎ Ρ€Π°ΡΠΏΠ°ΠΊΠΎΠ²Π°Ρ‚ΡŒ ΠΈ ΡƒΠ·Π½Π°Ρ‚ΡŒ.

Π’ этом руководствС я расскаТу ΠΎΠ±ΠΎ всСх основах, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π·Π½Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°Ρ‡Π°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ с SVG. Π― объясню, Ρ‡Ρ‚ΠΎ это Π·Π° Ρ„Π°ΠΉΠ»Ρ‹, ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚, ΠΊΠΎΠ³Π΄Π° ΠΈΡ… ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ ΠΊΠ°ΠΊ Π½Π°Ρ‡Π°Ρ‚ΡŒ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ»Ρ‹ SVG ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ Ρ„Π°ΠΉΠ» SVG?

Π€Π°ΠΉΠ» SVG, сокращСниС ΠΎΡ‚ Ρ„Π°ΠΉΠ»Π° ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΠΎΠΉ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ, прСдставляСт собой стандартный Ρ‚ΠΈΠΏ графичСского Ρ„Π°ΠΉΠ»Π°, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΉ для Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π° Π΄Π²ΡƒΡ…ΠΌΠ΅Ρ€Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅.

Π’ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ Π΄Ρ€ΡƒΠ³ΠΈΡ… популярных Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠ² Ρ„Π°ΠΉΠ»ΠΎΠ² ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ SVG Ρ…Ρ€Π°Π½ΠΈΡ‚ изобраТСния ΠΊΠ°ΠΊ Π²Π΅ΠΊΡ‚ΠΎΡ€Ρ‹. Π’ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ‚ вопрос: Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ вСкторная Π³Ρ€Π°Ρ„ΠΈΠΊΠ°?

Растр ΠΏΡ€ΠΎΡ‚ΠΈΠ² Π²Π΅ΠΊΡ‚ΠΎΡ€Π°

БСгодня Π² сСти ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ нСсколько Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠ² Ρ„Π°ΠΉΠ»ΠΎΠ² ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚ΡŒ Π½Π° Π΄Π²Π΅ ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΈ: растровая Π³Ρ€Π°Ρ„ΠΈΠΊΠ° ΠΈ вСкторная Π³Ρ€Π°Ρ„ΠΈΠΊΠ°.

Π’Ρ‹, Π½Π°Π²Π΅Ρ€Π½ΠΎΠ΅, Π·Π½Π°ΠΊΠΎΠΌΡ‹ с распространСнными Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°ΠΌΠΈ PNG ΠΈ JPEG. Π­Ρ‚ΠΎ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ растровой Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ, Ρ‡Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ хранят ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎΠ± ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ Π² Π²ΠΈΠ΄Π΅ сСтки Ρ†Π²Π΅Ρ‚Π½Ρ‹Ρ… ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ΠΎΠ², Ρ‚Π°ΠΊΠΆΠ΅ Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌΠΎΠΉ растровым ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ. ΠšΠ²Π°Π΄Ρ€Π°Ρ‚Ρ‹ Π½Π° этом растровом ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΡŽΡ‚ΡΡ, образуя связноС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΡ…ΠΎΠΆΠ΅Π΅ Π½Π° пиксСли Π½Π° экранС ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π°.

Растровая Π³Ρ€Π°Ρ„ΠΈΠΊΠ° Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ с высокой Π΄Π΅Ρ‚Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠ΅ΠΉ, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ‚ΠΎΡ‡Π½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ пиксСля. РастровыС изобраТСния ΠΈΠΌΠ΅ΡŽΡ‚ фиксированноС Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅, поэтому ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠ΅ ΠΈΡ… Ρ€Π°Π·ΠΌΠ΅Ρ€Π° сниТаСт качСство изобраТСния.

Π’Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Π΅ графичСскиС Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ SVG ΠΈ PDF, Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ ΠΏΠΎ-Ρ€Π°Π·Π½ΠΎΠΌΡƒ. Π­Ρ‚ΠΈ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ хранят изобраТСния ΠΊΠ°ΠΊ Π½Π°Π±ΠΎΡ€ Ρ‚ΠΎΡ‡Π΅ΠΊ ΠΈ Π»ΠΈΠ½ΠΈΠΉ ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌΠΈ. ΠœΠ°Ρ‚Π΅ΠΌΠ°Ρ‚ΠΈΡ‡Π΅ΡΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΡƒΠ»Ρ‹ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ располоТСниС ΠΈ Ρ„ΠΎΡ€ΠΌΡƒ этих Ρ‚ΠΎΡ‡Π΅ΠΊ ΠΈ Π»ΠΈΠ½ΠΈΠΉ ΠΈ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ ΠΈΡ… пространствСнныС ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡ ΠΏΡ€ΠΈ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠΈ ΠΈΠ»ΠΈ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±Π° изобраТСния. Π€Π°ΠΉΠ»Ρ‹ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ Ρ‚Π°ΠΊΠΆΠ΅ хранят ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ Ρ†Π²Π΅Ρ‚Π΅ ΠΈ Π΄Π°ΠΆΠ΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ тСкст.

Как Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Ρ„Π°ΠΉΠ»Ρ‹ SVG

Π€Π°ΠΉΠ»Ρ‹ SVG написаны Π½Π° XML, языкС Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для хранСния ΠΈ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡ΠΈ Ρ†ΠΈΡ„Ρ€ΠΎΠ²ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ. Код XML Π² Ρ„Π°ΠΉΠ»Π΅ SVG опрСдСляСт всС Ρ„ΠΎΡ€ΠΌΡ‹, Ρ†Π²Π΅Ρ‚Π° ΠΈ тСкст, ΡΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.

Π”Π°Π²Π°ΠΉΡ‚Π΅ посмотрим Π½Π° нСсколько ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ². Начну с рисования простого ΠΊΡ€ΡƒΠ³Π° SVG:

Когда я ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°ΡŽ Ρ„Π°ΠΉΠ» этого ΠΊΡ€ΡƒΠ³Π° Π² тСкстовом Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅, появляСтся этот XML-ΠΊΠΎΠ΄:

Как Π²ΠΈΠ΄ΠΈΡ‚Π΅, ΠΊΠΎΠ΄Π° здСсь Π½Π΅ Ρ‚Π°ΠΊ ΠΌΠ½ΠΎΠ³ΠΎ. Нам Π½ΡƒΠΆΠ½Π° всСго ΠΎΠ΄Π½Π° строка ΠΊΠΎΠ΄Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ ΠΊΡ€ΡƒΠ³. Π­Ρ‚ΠΎ ΠΏΠΎΡ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ XML Π΄Π΅Π»Π°Π΅Ρ‚ Π·Π° нас Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Ρ‚Π΅Π³Π°ΠΌΠΈ. Π’ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π²Ρ‹ΡˆΠ΅ ΠΊΠΎΠ΄Π΅ Ρ‚Π΅Π³ΠΈ ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ‹ Ρ€ΠΎΠ·ΠΎΠ²Ρ‹ΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠΌ Π² ΡƒΠ³Π»ΠΎΠ²Ρ‹Ρ… скобках.

Π§Ρ‚ΠΎΠ±Ρ‹ Π½Π°Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ ΠΊΡ€ΡƒΠ³, XML-ΠΊΠΎΠ΄ опрСдСляСт Ρ„ΠΎΡ€ΠΌΡƒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π΅Π³Π° , Π΅Π³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² ΠΈ с Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°ΠΌΠΈ cx ΠΈ cy, радиус с Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠΌ r ΠΈ Ρ†Π²Π΅Ρ‚ Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ‚Π΅Π³Π° . # f4795b – это ΡˆΠ΅ΡΡ‚Π½Π°Π΄Ρ†Π°Ρ‚Π΅Ρ€ΠΈΡ‡Π½Ρ‹ΠΉ ΠΊΠΎΠ΄ Ρ†Π²Π΅Ρ‚Π° для Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΎΡ‚Ρ‚Π΅Π½ΠΊΠ° ΠΎΡ€Π°Π½ΠΆΠ΅Π²ΠΎΠ³ΠΎ.

Когда прСдоставляСтся Ρ„Π°ΠΉΠ» SVG, ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹ΠΉ этому, Π²Π΅Π±-Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ (ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅) ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ эту ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ XML, ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚ Π΅Π΅ ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ Π½Π° экранС Π² Π²ΠΈΠ΄Π΅ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠ³ΠΎ изобраТСния. ВсС соврСмСнныС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·ΠΈΡ€ΡƒΡŽΡ‚ SVG Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΊΠ°ΠΊ ΠΈ спСциализированноС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ΅ обСспСчСниС для рСдактирования Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ.

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

ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, с Π²Π΅ΠΊΡ‚ΠΎΡ€Π°ΠΌΠΈ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π³ΠΎΡ€Π°Π·Π΄ΠΎ большС, Ρ‡Π΅ΠΌ с простыми ΠΊΡ€ΡƒΠ³Π°ΠΌΠΈ. Π”Π°Π²Π°ΠΉΡ‚Π΅ посмотрим Π½Π° Π±ΠΎΠ»Π΅Π΅ слоТноС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ Π·Π²Π΅Π·Π΄ΠΎΡ‡ΠΊΠΈ HubSpot:

Π­Ρ‚ΠΎΡ‚ простой Π·Π½Π°Ρ‡ΠΎΠΊ состоит ΠΈΠ· 30 Π»ΠΈΠ½ΠΈΠΉ, соСдинСнных 30 Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌΠΈ:

ΠžΡ‚ΠΊΡ€ΠΎΠ΅ΠΌ этот SVG-Ρ„Π°ΠΉΠ» Π² тСкстовом Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅:

Π₯ΠΎΡ€ΠΎΡˆΠΎ, здСсь происходит Π΅Ρ‰Π΅ ΠΊΠΎΠ΅-Ρ‡Ρ‚ΠΎ. Но концСпция Ρ‚Π° ΠΆΠ΅. Π£ нас всС Π΅Ρ‰Π΅ Π΅ΡΡ‚ΡŒ Ρ‚Π΅Π³ , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ сообщаСт Π½Π°ΠΌ Ρ†Π²Π΅Ρ‚. ВмСсто Ρ‚Π΅Π³Π° , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠ΄Π°Ρ‚ΡŒ Π½Π°ΠΌ Ρ„ΠΎΡ€ΠΌΡƒ, Ρƒ нас Π΅ΡΡ‚ΡŒ Ρ‚Π΅Π³ . ВсС значСния Π² этом Ρ‚Π΅Π³Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ Ρ‚ΠΎΡ‡ΠΊΠΈ изобраТСния ΠΈ Π»ΠΈΠ½ΠΈΠΈ ΠΌΠ΅ΠΆΠ΄Ρƒ этими Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌΠΈ.

ΠŸΡ€Π΅ΠΈΠΌΡƒΡ‰Π΅ΡΡ‚Π²Π° Ρ„Π°ΠΉΠ»ΠΎΠ² SVG

XML-ΠΊΠΎΠ΄ – это Π½Π΅ просто красиво – ΠΎΠ½ Π΄Π΅Π»Π°Π΅Ρ‚ Ρ„Π°ΠΉΠ»Ρ‹ SVG ΠΎΡ‡Π΅Π½ΡŒ ΠΌΠΎΡ‰Π½Ρ‹ΠΌΠΈ ΠΈ ΠΏΡ€Π°ΠΊΡ‚ΠΈΡ‡Π½Ρ‹ΠΌΠΈ для Π²Π΅Π±-сайтов ΠΈ Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, ΠΎ Ρ‡Π΅ΠΌ ΠΌΡ‹ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ Π² этом Ρ€Π°Π·Π΄Π΅Π»Π΅.

1 БСсконСчная ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΠΎΡΡ‚ΡŒ

Π­Ρ‚ΠΎ прямо Π² Π½Π°Π·Π²Π°Π½ΠΈΠΈ: SVG ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Ρ‚ΡŒ ΠΈΠ»ΠΈ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Ρ‚ΡŒ Π΄ΠΎ любого Ρ€Π°Π·ΠΌΠ΅Ρ€Π° Π±Π΅Π· ΠΏΠΎΡ‚Π΅Ρ€ΠΈ качСства. Π Π°Π·ΠΌΠ΅Ρ€ изобраТСния ΠΈ Ρ‚ΠΈΠΏ отобраТСния Π½Π΅ ΠΈΠΌΠ΅ΡŽΡ‚ значСния для SVG – ΠΎΠ½ΠΈ всСгда выглядят ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ.

Π­Ρ‚ΠΎ Π²Π°ΠΆΠ½ΠΎ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€ Π²Π΅Π±-ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ зависит ΠΎΡ‚ зритСля, Π² зависимости ΠΎΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, устройства, ΠΌΠ°ΡΡˆΡ‚Π°Π±Π°, ΠΌΠ°ΠΊΠ΅Ρ‚Π° сайта ΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π’Π°ΡˆΠΈ изобраТСния Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Π°Π½Π½Ρ‹ΠΌΠΈ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ зритСля, ΠΈ SVG Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΠΏΡ€ΠΎΡ‰Π°ΡŽΡ‚ это.

Π‘Π½ΠΎΠ²Π° рассмотрим Π·Π²Π΅Π·Π΄ΠΎΡ‡ΠΊΡƒ HubSpot. Π’ΠΎΡ‚ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ SVG ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ 100 пиксСлСй:

А Π²ΠΎΡ‚ Ρ‚Π°ΠΊΠΎΠΉ ΠΆΠ΅ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ PNG, Ρ‚ΠΎΠΆΠ΅ ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ 100 пиксСлСй:

БСйчас ΠΎΠ½ΠΈ выглядят ΠΏΠΎΡ‡Ρ‚ΠΈ Π½Π΅ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠΌΠΎ, Π½ΠΎ Ρ€Π°Π·Π½ΠΈΡ†Π° Π² качСствС ΠΎΡ‡Π΅Π²ΠΈΠ΄Π½Π°, ΠΊΠΎΠ³Π΄Π° я ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΡŽ ΠΊΠ°ΠΆΠ΄ΡƒΡŽ Π΄ΠΎ пяти Ρ€Π°Π· большС:

Если SVG Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Ρ€Π°ΡΡˆΠΈΡ€ΠΈΡ‚ΡŒ ΠΈΠ»ΠΈ ΡΠΆΠ°Ρ‚ΡŒ, ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°, Ρ‡ΠΈΡ‚Π°ΡŽΡ‰Π°Ρ Ρ„Π°ΠΉΠ», ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚ΠΈΡ€ΡƒΠ΅Ρ‚ Ρ‚ΠΎΡ‡ΠΊΠΈ ΠΈ Π»ΠΈΠ½ΠΈΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Ρ‡Π΅Ρ‚ΠΊΠΈΠ΅ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΈ ΡΠΏΠ»ΠΎΡˆΠ½Ρ‹Π΅ Ρ†Π²Π΅Ρ‚Π°.

РастровыС изобраТСния, Π½Π°ΠΏΡ€ΠΎΡ‚ΠΈΠ², каТутся ΠΏΠΈΠΊΡΠ΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ ΠΏΡ€ΠΈ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠΈ Π½Π° Π½Π°ΡˆΠΈΡ… экранах. Π₯отя Π΅ΡΡ‚ΡŒ ΠΎΠ±Ρ…ΠΎΠ΄Π½Ρ‹Π΅ ΠΏΡƒΡ‚ΠΈ для этой ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹, Π·Π°ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‰ΠΈΠ΅ΡΡ Π² сохранСнии Ρ„ΠΎΡ€ΠΌΡƒΠ»Ρ‹ растра – Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, использованиС Ρ€Π°Π·Π½Ρ‹Ρ… Ρ„Π°ΠΉΠ»ΠΎΠ² ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°ΡŽΡ‰Π΅Π³ΠΎΡΡ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° для ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈ Ρ‚ΠΎΠ³ΠΎ ΠΆΠ΅ изобраТСния – ΠΎΠ½ΠΈ Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ большС Ρ€Π°Π±ΠΎΡ‚Ρ‹ ΠΈ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Π²Π΅Ρ€ΠΆΠ΅Π½Ρ‹ эрозии. Π’ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΌ ΠΈΡ‚ΠΎΠ³Π΅ растровыС изобраТСния Π½Π΅ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π°Π»ΠΈΡΡŒ для ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡ.

Однако Π΅ΡΡ‚ΡŒ компромисс Π² ΠΏΠΎΠ»ΡŒΠ·Ρƒ Π»ΡƒΡ‡ΡˆΠ΅ΠΉ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΠΎΡΡ‚ΠΈ: ΠΏΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ SVG Π½Π΅ Ρ…Π²Π°Ρ‚Π°Π΅Ρ‚ Π΄Π΅Ρ‚Π°Π»Π΅ΠΉ растровых ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ΅ количСство Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΈΠ· Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ систСмы, Ρ‚ΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ растровый Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ изобраТСния Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ Π΄Π΅Ρ‚Π°Π»ΡŒΠ½ΠΎ, насколько позволяСт растровоС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. Π›ΡŽΠ±Π°Ρ ΠΏΠΎΠΏΡ‹Ρ‚ΠΊΠ° идСально ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Ρ‹ΠΉ PNG (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΡŽ) Π² Π²ΠΈΠ΄Π΅ Π²Π΅ΠΊΡ‚ΠΎΡ€Π° ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Ρ‚ ΠΊ созданию массивного ΠΈ Π½Π΅ΠΏΡ€Π°ΠΊΡ‚ΠΈΡ‡Π½ΠΎΠ³ΠΎ Ρ„Π°ΠΉΠ»Π° SVG.

Π˜Ρ‚Π°ΠΊ, ΠΎΠ±Π° Ρ‚ΠΈΠΏΠ° Ρ„Π°ΠΉΠ»ΠΎΠ² ΠΈΠΌΠ΅ΡŽΡ‚ своС мСсто Π² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ PNG, JPEG ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ растровыС Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ для Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΉ ΠΈ ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ SVG для Ρ‡Π΅Π³ΠΎ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ ΠΌΠ΅Π½Π΅Π΅ Π΄Π΅Ρ‚Π°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ.

2 Настройка

SVG Π΄Π°Π΅Ρ‚ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°ΠΌ ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ свой внСшний Π²ΠΈΠ΄. ВмСсто Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ„Π°ΠΉΠ»Ρ‹ нСпосрСдствСнно Π² тСкстовом Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ΄Π½Ρƒ ΠΈΠ· ΠΌΠ½ΠΎΠ³ΠΈΡ… SVG-совмСстимых ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌ рСдактирования для измСнСния Π²Π°ΡˆΠΈΡ… Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Ρ… Ρ„ΠΎΡ€ΠΌ, Ρ†Π²Π΅Ρ‚ΠΎΠ², тСкста ΠΈ Π΄Π°ΠΆΠ΅ Π΄Ρ€ΡƒΠ³ΠΈΡ… Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹Ρ… эффСктов, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹Π΅ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Ρ‹ ΠΈ Ρ‚Π΅Π½ΠΈ.

3 Π‘ΠΎΠ²ΠΌΠ΅ΡΡ‚ΠΈΠΌΠΎΡΡ‚ΡŒ сцСнариСв

Π€ΠΎΡ€ΠΌΠ°Ρ‚ Ρ„Π°ΠΉΠ»Π° SVG Π±Ρ‹Π» Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ ΠšΠΎΠ½ΡΠΎΡ€Ρ†ΠΈΡƒΠΌΠΎΠΌ World Wide Web ΠΊΠ°ΠΊ стандартизованный Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ для Π²Π΅Π±-Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ, ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π½Ρ‹ΠΉ для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ Π²Π΅Π±-соглашСниями, Ρ‚Π°ΠΊΠΈΠΌΠΈ ΠΊΠ°ΠΊ HTML, CSS, JavaScript ΠΈ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π½Π°Ρ модСль Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°.

Благодаря этой совмСстимости изобраТСниями SVG ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ скриптов. Π­Ρ‚ΠΎ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ Π΄Π²Π΅Ρ€ΠΈ для ΠΎΠ³Ρ€ΠΎΠΌΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° возмоТностСй динамичСского отобраТСния, ΠΎΡ‚ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π΄ΠΎ динамичСских Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌ ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств. Π’Π°ΠΊΠΎΠΉ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ управлСния внСшним Π²ΠΈΠ΄ΠΎΠΌ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ΅Π½ с Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°ΠΌΠΈ JPEG ΠΈ PNG.

4 Π”ΠΎΡΡ‚ΡƒΠΏΠ½ΠΎΡΡ‚ΡŒ ΠΈ поисковая оптимизация

Π€Π°ΠΉΠ»Ρ‹ SVG ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ собой тСкстовыС Ρ„Π°ΠΉΠ»Ρ‹, ΠΈ это само ΠΏΠΎ сСбС Π΄Π°Π΅Ρ‚ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ прСимущСства ΠΏΠ΅Ρ€Π΅Π΄ растровыми Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°ΠΌΠΈ. Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, ΠΊΠ°ΠΊ ΠΌΡ‹ ΡƒΠΆΠ΅ Π³ΠΎΠ²ΠΎΡ€ΠΈΠ»ΠΈ, программисты ΠΌΠΎΠ³ΡƒΡ‚ Π²Π·Π³Π»ΡΠ½ΡƒΡ‚ΡŒ Π½Π° ΠΊΠΎΠ΄ XML ΠΈ быстро Π΅Π³ΠΎ ΠΏΠΎΠ½ΡΡ‚ΡŒ.

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Ссли ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ SVG содСрТит тСкст, тСкстовая информация сохраняСтся Π² Ρ„Π°ΠΉΠ»Π΅ ΠΊΠ°ΠΊ Π±ΡƒΠΊΠ²Π°Π»ΡŒΠ½Ρ‹ΠΉ тСкст (Π° Π½Π΅ ΠΊΠ°ΠΊ Ρ„ΠΈΠ³ΡƒΡ€Ρ‹). Π­Ρ‚ΠΎ позволяСт ΠΈΠ½Ρ‚Π΅Ρ€ΠΏΡ€Π΅Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ SVG ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°ΠΌΠΈ чтСния с экрана, помогая Ρ‚Π΅ΠΌ, ΠΊΡ‚ΠΎ испытываСт трудности ΠΏΡ€ΠΈ взаимодСйствии с Ρ†ΠΈΡ„Ρ€ΠΎΠ²Ρ‹ΠΌ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ.

НаконСц, Ρ„Π°ΠΉΠ»Ρ‹ SVG ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΠ½Π΄Π΅ΠΊΡΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ поисковыми систСмами, Ρ‚Π°ΠΊΠΈΠΌΠΈ ΠΊΠ°ΠΊ Google. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π½Π° своСй страницС ΠΈΠ½Ρ„ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΡƒ с большим количСством тСкста ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠΉ дисплСй SVG, Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ тСкста ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… слов Π² ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΌΠΎΡ‡ΡŒ вашСй страницС Π² Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³Π΅ ΠΈ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ SEO. Π’ этом ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠΈ PNG ΠΈ JPEG ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Ρ‹ ΠΌΠ΅Ρ‚Π°Π΄Π°Π½Π½Ρ‹ΠΌΠΈ ΠΈ Π·Π°ΠΌΠ΅Ρ‰Π°ΡŽΡ‰ΠΈΠΌ тСкстом.

5 МСньшиС Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ Ρ„Π°ΠΉΠ»ΠΎΠ²

Π€Π°ΠΉΠ»Ρ‹ SVG, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, хранят изобраТСния Π±ΠΎΠ»Π΅Π΅ эффСктивно, Ρ‡Π΅ΠΌ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Π΅ растровыС Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹, Ссли ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ слишком Π΄Π΅Ρ‚Π°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½ΠΎ. Π€Π°ΠΉΠ»Ρ‹ SVG содСрТат достаточно ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ для отобраТСния Π²Π΅ΠΊΡ‚ΠΎΡ€ΠΎΠ² Π² любом ΠΌΠ°ΡΡˆΡ‚Π°Π±Π΅, Ρ‚ΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ растровыС изобраТСния Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ Π±ΠΎΠ»ΡŒΡˆΠΈΡ… Ρ„Π°ΠΉΠ»ΠΎΠ² для ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½Π½Ρ‹Ρ… вСрсий ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ – большСС количСство пиксСлСй Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ большС мСста Π² Ρ„Π°ΠΉΠ»Π΅.

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

Однако это Π½Π΅ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ всС изобраТСния Π² SVG. Π”Π°Π²Π°ΠΉΡ‚Π΅ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ посмотрим, ΠΊΠ°ΠΊ Π²Π΅Π±-сайты ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ SVG.

Для Ρ‡Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Ρ„Π°ΠΉΠ»Ρ‹ SVG?

Как я ΡƒΠΆΠ΅ ΡƒΠΏΠΎΠΌΠΈΠ½Π°Π», Ρ„Π°ΠΉΠ»Ρ‹ SVG Π»ΡƒΡ‡ΡˆΠ΅ всСго подходят для ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ содСрТат мСньшС Π΄Π΅Ρ‚Π°Π»Π΅ΠΉ, Ρ‡Π΅ΠΌ фотография. Π­Ρ‚ΠΎ всС Π΅Ρ‰Π΅ довольно ΡˆΠΈΡ€ΠΎΠΊΠΎ, поэтому Π΄Π°Π²Π°ΠΉΡ‚Π΅ обсудим Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠ· Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ распространСнных способов использования SVG Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅.

Иконки

Π‘ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ΠΈΠΊΠΎΠ½ΠΎΠΊ Ρ…ΠΎΡ€ΠΎΡˆΠΎ пСрСводятся Π² Π²Π΅ΠΊΡ‚ΠΎΡ€Ρ‹, учитывая ΠΈΡ… простоту ΠΈ Ρ‡Π΅Ρ‚ΠΊΠΎ ΠΎΡ‡Π΅Ρ€Ρ‡Π΅Π½Π½Ρ‹Π΅ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹. Иконки для Ρ‚Π°ΠΊΠΈΡ… элСмСнтов страницы, ΠΊΠ°ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ экранов, Π° это Π·Π½Π°Ρ‡ΠΈΡ‚, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ идСально ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΡ‹ΠΌΠΈ.

Π›ΠΎΠ³ΠΎΡ‚ΠΈΠΏΡ‹

Π€ΠΎΡ€ΠΌΠ°Ρ‚ SVG особСнно Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΡΠ²Π»ΡΡŽΡ‚ΡΡ Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°Ρ… Π²Π΅Π±-сайтов, элСктронных ΠΏΠΈΡΡŒΠΌΠ°Ρ… ΠΈ ΠΏΠ΅Ρ‡Π°Ρ‚Π°ΡŽΡ‚ΡΡ Π½Π° Ρ‡Π΅ΠΌ ΡƒΠ³ΠΎΠ΄Π½ΠΎ, ΠΎΡ‚ Π±Ρ€ΠΎΡˆΡŽΡ€ Π΄ΠΎ толстовок ΠΈ Ρ€Π΅ΠΊΠ»Π°ΠΌΠ½Ρ‹Ρ… Ρ‰ΠΈΡ‚ΠΎΠ². ΠžΠΏΡΡ‚ΡŒ ΠΆΠ΅, Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΡ‹, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, ΠΏΡ€ΠΎΡ‰Π΅ ΠΏΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ, Ρ‡Ρ‚ΠΎ Ρ…ΠΎΡ€ΠΎΡˆΠΎ сочСтаСтся с Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠΌ SVG.

Π˜Π»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΈ

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

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ изобраТСния

Анимации ΠΈ элСмСнты интСрфСйса

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

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ изобраТСния

Π˜Π½Ρ„ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠ° ΠΈ визуализация Π΄Π°Π½Π½Ρ‹Ρ…

Π‘ΡƒΠ΄Π΅Ρ‚ Π»ΠΈ Π½Π° вашСм сайтС Π²Ρ‹Π³ΠΎΠ΄Π° ΠΎΡ‚ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… дисплССв, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ ΠΈΠ½Ρ„ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠ° ΠΈΠ»ΠΈ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Π½Π°Ρ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΠ°? Π­Ρ‚ΠΎ Π΅Ρ‰Π΅ ΠΎΠ΄Π½ΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ для SVG. Π’Π°ΡˆΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹ Π±ΡƒΠ΄ΡƒΡ‚ Π»Π΅Π³ΠΊΠΎ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ, Π° тСкст Π² Ρ„Π°ΠΉΠ»Π΅ SVG ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ½Π΄Π΅ΠΊΡΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ.

Π’Ρ‹ Π΄Π°ΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹ Π² Π²ΠΈΠ΄Π΅ SVG, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ±Π½ΠΎΠ²Π»ΡΡŽΡ‚ΡΡ динамичСски Π½Π° основС Π²Π²ΠΎΠ΄Π° Π΄Π°Π½Π½Ρ‹Ρ… Π² Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΌ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ. НапримСр, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π²Π΅ΠΊΡ‚ΠΎΡ€ Β«ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€ выполнСния» для сборщика срСдств, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ заполняСтся ΠΏΠΎ ΠΌΠ΅Ρ€Π΅ увСличСния суммы ΠΏΠΎΠΆΠ΅Ρ€Ρ‚Π²ΠΎΠ²Π°Π½ΠΈΠΉ.

Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ SVG-Ρ„Π°ΠΉΠ»Ρ‹ часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π½Π° ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… сайтах для Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Π΄Π°Π½Π½Ρ‹Ρ… ΠΈ ΠΊΠ°Ρ€Ρ‚:

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ изобраТСния

Как Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с Ρ„Π°ΠΉΠ»Π°ΠΌΠΈ SVG

Если Π²Ρ‹ Π½Π΅ слишком Π² восторгС ΠΎΡ‚ всСй XML-стороны SVG, это Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ изобраТСния SVG, Π½Π΅ касаясь ΠΊΠΎΠ΄Π°. Π’ΠΎΡ‚ ΠΊΠ°ΠΊ:

Как ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ Ρ„Π°ΠΉΠ» SVG

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ просто ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ SVG, Π½Π΅ рСдактируя Π΅Π³ΠΎ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ это прямо Π² своСм Π²Π΅Π±-Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Ρ‹ для ΠΈΠ½Ρ‚Π΅Ρ€ΠΏΡ€Π΅Ρ‚Π°Ρ†ΠΈΠΈ ΠΈ отобраТСния SVG. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ SVG Π² ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠΉ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ΅ рСдактирования, ΠΎ Ρ‡Π΅ΠΌ ΠΌΡ‹ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ дальшС.

Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΈΠ»ΠΈ ΠΎΡ‚Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ» SVG

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

  • Adobe Illustrator, ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° Adobe для создания ΠΈ рСдактирования Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΊΡΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹ Adobe ΠΊΠ°ΠΊ SVG ΠΈΠ»ΠΈ Π² нСсколько растровых Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠ².
  • Microsoft Visio, Π±Π»ΠΎΠΊ-схСма, Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΠ° ΠΈ ΡΠΎΠ·Π΄Π°Ρ‚Π΅Π»ΡŒ ΠΈΠ½Ρ„ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠΈ.
  • CorelDRAW, Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ спСциализированный Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ.
  • GIMP (GNU Image Manipulation Program), бСсплатная, популярная ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° для рСдактирования ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ исходным ΠΊΠΎΠ΄ΠΎΠΌ.
  • Google Docs – Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΊΡΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ рисунки, созданныС Π² Google docs, Π² SVG.
  • Inkscape, бСсплатный Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹ΠΉ инструмСнт для рисования ΠΈ тСкста.

Π§Ρ‚ΠΎΠ±Ρ‹ Π½Π°Ρ‡Π°Ρ‚ΡŒ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ SVG с нуля, Π²Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ Π½ΠΈΡ‡Π΅Π³ΠΎ Π·Π½Π°Ρ‚ΡŒ ΠΎ XML ΠΈΠ»ΠΈ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ свои Π²Π΅ΠΊΡ‚ΠΎΡ€Ρ‹ Π² ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌ, пСрСчислСнных Π²Ρ‹ΡˆΠ΅, ΠΈ ΡΠΊΡΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ… Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ SVG.

КаТдая ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° ΠΈΠΌΠ΅Π΅Ρ‚ свои ограничСния ΠΈ ΠΊΡ€ΠΈΠ²ΡƒΡŽ обучСния. Если Π²Ρ‹ ΠΏΠ»Π°Π½ΠΈΡ€ΡƒΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚ΡŒ ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅ SVG, ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ нСсколько Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² ΠΈ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΡŒΡ‚Π΅ΡΡŒ с доступными инструмСнтами, ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ бСсплатный ΠΈΠ»ΠΈ ΠΏΠ»Π°Ρ‚Π½Ρ‹ΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚.

Π”ΠΈΠ·Π°ΠΉΠ½ для ΠΌΠ°ΡΡˆΡ‚Π°Π±Π°

ΠœΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΠ°Ρ вСкторная Π³Ρ€Π°Ρ„ΠΈΠΊΠ° пригодится Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ… Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… сцСнариях. Они ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹, ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹, ΠΈ ΠΈΡ… Π»Π΅Π³ΠΊΠΎ Π½Π°Ρ‡Π°Ρ‚ΡŒ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ графичСского Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π° ΠΈ Π½Π΅Π±ΠΎΠ»ΡŒΡˆΠΈΡ… дизайнСрских Π½ΠΎΡƒ-Ρ…Π°Ρƒ. ИмСя SVG Π² своСм арсСналС инструмСнтов Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Π²Π°ΠΌ большС Π½Π΅ придСтся Π±Π΅ΡΠΏΠΎΠΊΠΎΠΈΡ‚ΡŒΡΡ ΠΎ Π³Ρ€Π°Ρ„ΠΈΠΊΠ΅ – ΠΏΠΎ ΠΊΡ€Π°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅Ρ€Π΅, Π½Π΅ для Π²Π°ΡˆΠΈΡ… основных ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. Для Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΉ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ PNG ΠΈ JPEG.

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ записи: https://blog.hubspot.com

β€” SVG: ΠœΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΠ°Ρ вСкторная Π³Ρ€Π°Ρ„ΠΈΠΊΠ°

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ Π±Π΅Ρ€Π΅Ρ‚ ΡƒΠ·Π»Ρ‹ ΠΈΠ· Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° SVG ΠΈ Π΄ΡƒΠ±Π»ΠΈΡ€ΡƒΠ΅Ρ‚ ΠΈΡ… Π² Π΄Ρ€ΡƒΠ³ΠΎΠΌ мСстС.

 html,
Ρ‚Π΅Π»ΠΎ,
свг {
  высота: 100%;
}
 
  w3.org/2000/svg">
  
  
  
  

 

Π­Ρ„Ρ„Π΅ΠΊΡ‚ Ρ‚Π°ΠΊΠΎΠΉ ΠΆΠ΅, ΠΊΠ°ΠΊ Ссли Π±Ρ‹ ΡƒΠ·Π»Ρ‹ Π±Ρ‹Π»ΠΈ Π³Π»ΡƒΠ±ΠΎΠΊΠΎ ΠΊΠ»ΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Ρ‹ Π² Π½Π΅Π΄ΠΎΡΡ‚ΡƒΠΏΠ½ΡƒΡŽ модСль DOM, Π° Π·Π°Ρ‚Π΅ΠΌ вставлСны Ρ‚ΡƒΠ΄Π°, Π³Π΄Π΅ находится элСмСнт с использованиСм , ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎ ΠΊΠ»ΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌ элСмСнтам шаблона.

Π‘ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² Π² ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ , Π° Π½Π΅ , Π° Π½Π΅ , ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹, ΡƒΠΆΠ΅ ΠΈΠΌΠ΅ΡŽΡ‰ΠΈΠ΅ΡΡ Π² элСмСнтС , Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ссылаСтся , с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ , ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰Π΅Π³ΠΎ . (Π­Ρ‚ΠΎ отличаСтся ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ стиля CSS ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ Ρ‚Π΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±Ρ‹Π»ΠΈ установлСны Β«Ρ€Π°Π½Π΅Π΅Β» Π² каскадС). Волько Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ x , y , ΡˆΠΈΡ€ΠΈΠ½Π° , height ΠΈ href Π½Π° элСмСнтС use замСнят Ρ‚Π΅, Ρ‡Ρ‚ΠΎ установлСны Π½Π° элСмСнтС, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΡΡΡ‹Π»Π°ΡŽΡ‚ΡΡ. Однако Π»ΡŽΠ±Ρ‹Π΅ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ , Π½Π΅ установлСнныС для элСмСнта , Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ дСлаСтся ссылка, Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ ΠΊ элСмСнту использования .

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΊΠ»ΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ ΡƒΠ·Π»Ρ‹ Π½Π΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΎΠ±Π»ΡŽΠ΄Π°Ρ‚ΡŒ ΠΎΡΡ‚ΠΎΡ€ΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΏΡ€ΠΈ использовании CSS для стилизации элСмСнта use ΠΈ Π΅Π³ΠΎ ΠΊΠ»ΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… ΠΏΠΎΡ‚ΠΎΠΌΠΊΠΎΠ². НаслСдованиС свойств CSS ΠΊΠ»ΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠΉ модСлью DOM Π½Π΅ гарантируСтся, Ссли Π²Ρ‹ явно Π½Π΅ запроситС ΠΈΡ… с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ наслСдования CSS.

Из сообраТСний бСзопасности Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΏΠΎΠ»ΠΈΡ‚ΠΈΠΊΡƒ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈ Ρ‚ΠΎΠ³ΠΎ ΠΆΠ΅ источника ΠΊ элСмСнтам , ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ элСмСнты ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΡ‚ΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ URL-адрСс ΠΈΠ· Ρ€Π°Π·Π½Ρ‹Ρ… источников Π² Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π΅ href . Π’ настоящСС врСмя Π½Π΅ сущСствуСт ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ способа установки ΠΏΠΎΠ»ΠΈΡ‚ΠΈΠΊΠΈ пСрСкрСстного происхоТдСния для элСмСнтов с использованиСм .

ΠŸΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΠ΅: Начиная с SVG 2, Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ xlink:href устарСл Π² ΠΏΠΎΠ»ΡŒΠ·Ρƒ href . Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ см. Π½Π° страницС xlink:href .

ссылка

URL-адрСс элСмСнта/Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡ€ΠΎΠ΄ΡƒΠ±Π»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Π’ΠΈΠΏ значСния : ; Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ : Π½Π΅Ρ‚; Анимация : Π΄Π°

ссылка: href

УстарСло: Π­Ρ‚Π° функция большС Π½Π΅ рСкомСндуСтся. Π₯отя Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΠΎΠ½ ΡƒΠΆΠ΅ ΡƒΠ΄Π°Π»Π΅Π½ ΠΈΠ· ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… Π²Π΅Π±-стандартов, ΠΌΠΎΠΆΠ΅Ρ‚ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Π² процСссС ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ ΠΈΠ»ΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ сохранСн Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² цСлях совмСстимости. Π˜Π·Π±Π΅Π³Π°ΠΉΡ‚Π΅ Π΅Π³ΠΎ использования ΠΈ обновляйтС ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄, Ссли это Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ; см. Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ совмСстимости Π²Π½ΠΈΠ·Ρƒ этой страницы, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠ½ΡΡ‚ΡŒ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅. Π˜ΠΌΠ΅ΠΉΡ‚Π΅ Π² Π²ΠΈΠ΄Ρƒ, Ρ‡Ρ‚ΠΎ эта функция ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠ΅Ρ€Π΅ΡΡ‚Π°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π² любой ΠΌΠΎΠΌΠ΅Π½Ρ‚.

Бсылка Π½Π° элСмСнт/Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡ€ΠΎΠ΄ΡƒΠ±Π»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Π’ΠΈΠΏ значСния : ; Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ : Π½Π΅Ρ‚; Анимация : Π΄Π°
Ρ…

ΠšΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Π° x ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠΎΠ³ΠΎ элСмСнта. Π’ΠΈΠΏ значСния : <ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Π°> ; Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ : 0 ; Анимация : Π΄Π°

Π³

ΠšΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Π° Y ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠΎΠ³ΠΎ элСмСнта. Π’ΠΈΠΏ значСния : <ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Π°> ; Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ : 0 ; Анимация : Π΄Π°

ΡˆΠΈΡ€ΠΈΠ½Π°

Π¨ΠΈΡ€ΠΈΠ½Π° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠΎΠ³ΠΎ элСмСнта. Π’ΠΈΠΏ значСния : <Π΄Π»ΠΈΠ½Π°> ; Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ : 0 ; Анимация : Π΄Π°

высота

Высота ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠΎΠ³ΠΎ элСмСнта. Π’ΠΈΠΏ значСния : <Π΄Π»ΠΈΠ½Π°> ; Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ : 0 ; Анимация : Π΄Π°

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: ΡˆΠΈΡ€ΠΈΠ½Π° ΠΈ высота Π½Π΅ Π²Π»ΠΈΡΡŽΡ‚ Π½Π° использованиС элСмСнтов , Ссли Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹ΠΉ элСмСнт Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ viewBox — Ρ‚.Π΅. ΠΎΠ½ΠΈ Π΄Π΅ΠΉΡΡ‚Π²ΡƒΡŽΡ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊΠΎΠ³Π΄Π° использованиС относится ΠΊ элСмСнту svg ΠΈΠ»ΠΈ символа .

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅. Начиная с SVG2, x , y , ΡˆΠΈΡ€ΠΈΠ½Π° ΠΈ высота ΡΠ²Π»ΡΡŽΡ‚ΡΡ свойствами Π³Π΅ΠΎΠΌΠ΅Ρ‚Ρ€ΠΈΠΈ , Ρ‡Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ эти Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π² качСствС свойств CSS для этого элСмСнта.

Π“Π»ΠΎΠ±Π°Π»ΡŒΠ½Ρ‹Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹

ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹

Π’ частности: id , tabindex

Атрибуты стиля
класс , ΡΡ‚ΠΈΠ»ΡŒ
Атрибуты условной ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ

Π’ частности: requiredExtensions , systemLanguage

Атрибуты события

Π“Π»ΠΎΠ±Π°Π»ΡŒΠ½Ρ‹Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ событий, ГрафичСскиС Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ событий

Атрибуты ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π°Ρ†ΠΈΠΈ

Π’ частности: clip-path , clip-rule , color , Color-Interpolation , Π¦Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ Π Π΅Π½Π΄Ρ€ΠΈΠ½Π³ , Cursor , Display , Fill , Fill-opbity , -rule , Filter , MASK , opulation , , , , . , . Pointer-EVENTS , Π Π΅Π½Π΄Π΅Π½Ρ€ΠΈΠ½Π³ Ρ„ΠΎΡ€ΠΌΡ‹ , Ρ…ΠΎΠ΄ , Ρ…ΠΎΠ΄-Dasharray , Drashoffset , Shuck-LineCap , , ΡˆΠΈΡ€ΠΈΠ½Π° ΡˆΡ‚Ρ€ΠΈΡ…Π° , ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ , Π²Π΅ΠΊΡ‚ΠΎΡ€-эффСкт , Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ

Атрибуты ARIA

Aria-ActiveDescendendend , ARIA-Atomic , ARIA-AutocOpplite , Aria-Busy , , провСрСнная Aria , Aria-Colcount , Aria-Colindex , 4, , , , , 4, , , , , 4, , , , , 4, , , . aria-controls , aria-current , aria-describedby , Aria-Details , Aria-Disabled , Aria-Dropeffefce , Aria-Errormessage , Aria-Expeded , Aria-Flowto , Aria-Crabbed , Aria-hastpupupupupupupupupupupupupupupupupupupupupupupupupupupupupupupupupupupupupupupupupupupupupupupupupupupupupupupupup Aria-Hidden , Aria-Invalid , Aria-Keyshortcuts , Aria-Label , Aria-Labelledby , -ΡƒΡ€ΠΎΠ²Π½ΠΈ , Aria-Live , 4. -многострочный , ария-мноТСствСнный Π²Ρ‹Π±ΠΎΡ€ , Ария-ориСнтация , Aria-Onwans , Aria-Placeholder , Aria-Posinset , Aria-Pressed , Aria-readly , Aria-Ρ€Π΅Π»Π΅ , Aria-Required , -Ρ€Π΅Π»Π΅Π²Π°Π½Ρ‚ , , Aria-recquired, , , , , , , , , , , , , , , , , , . Aria-Roledescription , Aria-Rowcount , Aria-Rowindex , Aria-rowsspan , , выбранная Aria , -levize , ARIA-Soart , -Valemax , 4. -Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌΠΈΠ½ , aria-valuenow , aria-valuetext , Ρ€ΠΎΠ»ΡŒ

Атрибуты XLink
xlink:href , xlink:title

ΠšΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΈ ГрафичСский элСмСнт, ГрафичСский элСмСнт ссылки, Π‘Ρ‚Ρ€ΡƒΠΊΡ‚ΡƒΡ€Π½Ρ‹ΠΉ элСмСнт
Π Π°Π·Ρ€Π΅ΡˆΠ΅Π½Π½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π›ΡŽΠ±ΠΎΠ΅ количСство ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… элСмСнтов Π² любом порядкС:
ΠžΠΏΠΈΡΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ 39 9 АнимационныС элСмСнты
443
Specification
Scalable Vector Graphics (SVG) 1. 1 (Second Edition)
# UseElement

BCD tables only load in the browser with JavaScript enabled. Π’ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅ JavaScript для просмотра Π΄Π°Π½Π½Ρ‹Ρ….

ПослСднСС ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅: , участниками MDN

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ Ρ„Π°ΠΉΠ» SVG (ΠΈ ΠΊΠ°ΠΊ Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ)?

ΠœΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΠ°Ρ вСкторная Π³Ρ€Π°Ρ„ΠΈΠΊΠ° (SVG) β€” это ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ изобраТСния. Π’ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ Π΄Ρ€ΡƒΠ³ΠΈΡ… разновидностСй, SVG Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ пиксСли для создания ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ Π²ΠΈΠ΄ΠΈΡ‚Π΅. ВмСсто этого ΠΎΠ½ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Β«Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Π΅Β» Π΄Π°Π½Π½Ρ‹Π΅.

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ SVG, Π²Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚Π΅ изобраТСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΄ΠΎ любого Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ, Ρ‡Ρ‚ΠΎ ΡƒΠ΄ΠΎΠ±Π½ΠΎ для Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° срСди мноТСства Π΄Ρ€ΡƒΠ³ΠΈΡ… Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² использования. Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ Π·Π°Π΄Π°Π΄ΠΈΠΌ вопрос: Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ Ρ„Π°ΠΉΠ» SVG? Π—Π°Ρ‚Π΅ΠΌ ΠΌΡ‹ Π½Π°ΡƒΡ‡ΠΈΠΌ вас ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ этот Ρ„ΠΎΡ€ΠΌΠ°Ρ‚.

Π”Π°Π²Π°ΠΉΡ‚Π΅ приступим!

ΠŸΠΎΠ΄ΠΏΠΈΡˆΠΈΡ‚Π΅ΡΡŒ Π½Π° наш ΠΊΠ°Π½Π°Π» Youtube

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ Ρ„Π°ΠΉΠ» SVG?

SVG β€” это Π³Ρ€Π°Ρ„ΠΈΠΊΠ°, построСнная с использованиСм Π²Π΅ΠΊΡ‚ΠΎΡ€ΠΎΠ². Для нСпосвящСнных Π²Π΅ΠΊΡ‚ΠΎΡ€ β€” это элСмСнт с ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ Π²Π΅Π»ΠΈΡ‡ΠΈΠ½ΠΎΠΉ ΠΈ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ. ВСорСтичСски Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ практичСски любой Ρ‚ΠΈΠΏ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡŽ Π²Π΅ΠΊΡ‚ΠΎΡ€ΠΎΠ². Π’ΠΎΠ·ΡŒΠΌΠΈΡ‚Π΅ это ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ синСго ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ° с Ρ‡Π΅Ρ€Π½ΠΎΠΉ Ρ€Π°ΠΌΠΊΠΎΠΉ ΠΈ Ρ‚Π΅Π½ΡŒΡŽ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

Π­Ρ‚ΠΎ Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ Π²ΠΈΠ΄ Ρ„Π°ΠΉΠ»Π° изобраТСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ называСтся пСрСносимой сСтСвой Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠΉ (PNG) ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΉ ΠΈ рисунков. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ воспроизвСсти Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ, Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΡΠ³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ это с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ XML-ΠΊΠΎΠ΄Π° (Ρ‚ΠΎΡ‚ ΠΆΠ΅ самый, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для ΠΊΠ°Ρ€Ρ‚ сайта). Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄ ΠΌΠΎΠΆΠ΅Ρ‚ Π΄Π°Ρ‚ΡŒ Ρ‚ΠΎΡ‚ ΠΆΠ΅ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

.
 
 w3.org/2000/svg" вСрсия="1.1"
baseProfile="ΠΏΠΎΠ»Π½Ρ‹ΠΉ" > 


 

ВСорСтичСски, Ссли Π²Ρ‹ Π²ΠΎΠ·ΡŒΠΌΠ΅Ρ‚Π΅ этот ΠΊΠΎΠ΄ ΠΈ помСститС Π΅Π³ΠΎ Π² HTML-Ρ„Π°ΠΉΠ», Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ Π½Π°Π±ΠΎΡ€ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠΎΠ², Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½Ρ‹ΠΉ PNG, Ссли ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΉ Π²Π°ΠΌΠΈ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Ρ„Π°ΠΉΠ»Ρ‹ SVG. Π₯отя ΠΎΠ±Π° изобраТСния выглядят ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ, Ρ„Π°ΠΉΠ»Ρ‹ SVG ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽΡ‚ Ρ†Π΅Π»Ρ‹ΠΉ ряд прСимущСств, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π½Π΅Ρ‚ Π² Π΄Ρ€ΡƒΠ³ΠΈΡ… Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°Ρ…. НапримСр, SVG способны ΡΠΎΡ…Ρ€Π°Π½ΡΡ‚ΡŒ качСство изобраТСния ΠΏΡ€ΠΈ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠΈ ΠΈΠ»ΠΈ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±Π°.

Если Π²Ρ‹ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ PNG, Π²Ρ‹ Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ Π² ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ ΠΌΠΎΠΌΠ΅Π½Ρ‚ Π΅Π³ΠΎ качСство Π½Π°Ρ‡ΠΈΠ½Π°Π΅Ρ‚ ΡƒΡ…ΡƒΠ΄ΡˆΠ°Ρ‚ΡŒΡΡ. Π‘ Π±ΠΎΠ»Π΅Π΅ слоТной пиксСльной Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠΉ дСградация становится ΠΎΡ‡Π΅Π²ΠΈΠ΄Π½ΠΎΠΉ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ быстрСС. Однако SVG Ρ…ΠΎΡ€ΠΎΡˆΠΎ выглядят практичСски ΠΏΡ€ΠΈ любом Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΈ.

Π—Π°Ρ‡Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ» SVG?

МногиС Π²Π΅Π±-сайты ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Ρ‚Π°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹, ΠΊΠ°ΠΊ PNG ΠΈ JPEG, ΠΏΠΎΡ‡Ρ‚ΠΈ взаимозамСняСмо. Однако SVG Π½Π΅ Ρ‚Π°ΠΊ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹. Если Π²Ρ‹ ΠΏΠΎΠΏΡ‹Ρ‚Π°Π΅Ρ‚Π΅ΡΡŒ Π²ΠΎΡΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΡΠ»ΠΎΠΆΠ½ΡƒΡŽ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΡŽ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π²Π΅ΠΊΡ‚ΠΎΡ€ΠΎΠ², Π²Ρ‹, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ массивныС ΠΈ Π½Π΅ΠΏΡ€ΠΈΠ³ΠΎΠ΄Π½Ρ‹Π΅ для использования Ρ„Π°ΠΉΠ»Ρ‹ SVG.

Π€ΠΎΡ€ΠΌΠ°Ρ‚ SVG β€” ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ для Ρ†Π΅Π»ΠΎΠ³ΠΎ ряда Π΄Ρ€ΡƒΠ³ΠΈΡ… сцСнариСв:

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

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

НаконСц, Ρ„Π°ΠΉΠ»Ρ‹ SVG, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ мСньшС, Ρ‡Π΅ΠΌ эквивалСнты высокого Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ Π² Π΄Ρ€ΡƒΠ³ΠΈΡ… Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°Ρ…. На Π±ΡƒΠΌΠ°Π³Π΅ это ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… страниц ΠΈ ΡΠΎΠΊΡ€Π°Ρ‚ΠΈΡ‚ΡŒ врСмя Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ. Однако, Ссли Π²Ρ‹ Π½Π΅ ΠΏΠ»Π°Π½ΠΈΡ€ΡƒΠ΅Ρ‚Π΅ ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ своих ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² SVG, прирост ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ, вСроятно, Π±ΡƒΠ΄Π΅Ρ‚ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΌ.

Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ» SVG (2 способа)

БущСствуСт Π΄Π²Π° ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π° ΠΊ Ρ„Π°ΠΉΠ»Π°ΠΌ SVG. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΈΡ… с нуля ΠΈΠ»ΠΈ Π²Π·ΡΡ‚ΡŒ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ. НачнСм с Ρ€ΡƒΡ‡Π½ΠΎΠ³ΠΎ ΠΌΠ΅Ρ‚ΠΎΠ΄Π°.

1. Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ Ρ„Π°ΠΉΠ» SVG Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Ρ„Π°ΠΉΠ»Π° SVG ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Π½Π΅ Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ Π²Π²ΠΎΠ΄Π° ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΎ Π²Π΅ΠΊΡ‚ΠΎΡ€Π΅, ΠΊΠ°ΠΊ это Π±Ρ‹Π»ΠΎ сдСлано Ρ€Π°Π½Π΅Π΅. Π­Ρ‚ΠΎ Π±Ρ‹Π» просто ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΡŽ. ВмСсто этого Π²Ρ‹ создаСтС SVG, ΠΊΠ°ΠΊ ΠΈ Π»ΡŽΠ±ΡƒΡŽ Π΄Ρ€ΡƒΠ³ΡƒΡŽ Π³Ρ€Π°Ρ„ΠΈΠΊΡƒ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ сохраняя Ρ„Π°ΠΉΠ» ΠΊΠ°ΠΊ SVG. МногиС соврСмСнныС инструмСнты графичСского Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ SVG Β«ΠΈΠ· ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈΒ». НСкоторыС Π»ΡƒΡ‡ΡˆΠΈΠ΅ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ Π² сСбя:

  • Adobe Illustrator, Photoshop, Animate ΠΈ InDesign
  • Microsoft Visio
  • ИнкскСйп
  • Π“Π˜ΠœΠŸ

Π”Π²Π° послСдних Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π° Π² этом спискС ΡΠ²Π»ΡΡŽΡ‚ΡΡ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡΠΌΠΈ с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ исходным ΠΊΠΎΠ΄ΠΎΠΌ. Π­Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ ΠΈΡ… ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΌ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠΌ для экспСримСнтов с созданиСм SVG Π±Π΅Π· ΠΎΠΏΠ»Π°Ρ‚Ρ‹ ΠΏΡ€Π΅ΠΌΠΈΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ³ΠΎ обСспСчСния. На самом Π΄Π΅Π»Π΅, ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ всСм, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ.

Если Ρƒ вас Π½Π΅Ρ‚ ΠΎΠΏΡ‹Ρ‚Π° Ρ€Π°Π±ΠΎΡ‚Ρ‹ с графичСским Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ, созданиС собствСнных Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠΎΠ² ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… элСмСнтов для вашСго Π²Π΅Π±-сайта Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠΎΠΉ. Π’ этом случаС Π»ΡƒΡ‡ΡˆΠ΅ всСго Π²Π·ΡΡ‚ΡŒ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ изобраТСния ΠΈ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ… Π² SVG.

2. ΠŸΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² SVG

БущСствуСт мноТСство бСсплатных инструмСнтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для прСобразования ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈΠ· Π΄Ρ€ΡƒΠ³ΠΈΡ… Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠ² Π² SVG. Π‘ΠΎΠ»ΡŒΡˆΠ°Ρ Ρ‡Π°ΡΡ‚ΡŒ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ³ΠΎ обСспСчСния, упомянутого Π² ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΌ Ρ€Π°Π·Π΄Π΅Π»Π΅, позволяСт ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ изобраТСния ΠΈ ΡΠΎΡ…Ρ€Π°Π½ΡΡ‚ΡŒ ΠΈΡ… Π² Π²ΠΈΠ΄Π΅ Ρ„Π°ΠΉΠ»ΠΎΠ² SVG.

Если Π²Ρ‹ Π½Π΅ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ΅ обСспСчСниС, Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ½Π»Π°ΠΉΠ½-инструмСнты прСобразования β€” сущСствуСт мноТСство сСрвисов, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚ΡŒΡΡ. Одним ΠΈΠ· ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² являСтся Vector Magic, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для прСобразования всСх Ρ‚ΠΈΠΏΠΎΠ² Ρ„Π°ΠΉΠ»ΠΎΠ² Π² SVG:

Нам нравится этот ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΉ инструмСнт, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΎΠ½ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π²Π°ΠΌ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ просмотр вашСго Ρ„Π°ΠΉΠ»Π° SVG ΠΏΠ΅Ρ€Π΅Π΄ Π΅Π³ΠΎ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΎΠΉ. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ встроСнный Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€, Ρ‡Ρ‚ΠΎΠ±Ρ‹ внСсти нСбольшиС измСнСния ΠΈ исправлСния ΠΏΠ΅Ρ€Π΅Π΄ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΎΠΉ Ρ„Π°ΠΉΠ»Π°:

ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, это Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ². Π”Ρ€ΡƒΠ³ΠΈΠ΅ сСрвисы ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚Π°Ρ†ΠΈΠΈ PNG ΠΈ JPG Π² SVG Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ Convertio ΠΈ Img2Go. Π’Ρ‹ Π·Π°Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ провСсти Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ исслСдованиС, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΠΉΡ‚ΠΈ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ подходящСС Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ для Π²Π°ΡˆΠΈΡ… Π½ΡƒΠΆΠ΄.

По Π½Π°ΡˆΠ΅ΠΌΡƒ ΠΎΠΏΡ‹Ρ‚Ρƒ, Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚Π΅Ρ€ΠΎΠ² SVG Π΄Π°ΡŽΡ‚ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠ³ΠΎ качСства. Для достиТСния Π½Π°ΠΈΠ»ΡƒΡ‡ΡˆΠΈΡ… Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Ρ… Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΉ Π²Π°ΠΌΠΈ ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚Π΅Ρ€ Π½Π΅ Ρ‚Π°ΠΊ Π²Π°ΠΆΠ΅Π½, ΠΊΠ°ΠΊ Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹Π΅ Π²Π°ΠΌΠΈ изобраТСния.

Как ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ SVG ΠΈΠΌΠ΅Π΅Ρ‚ смысл ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для «простых» ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ с Ρ‡Π΅Ρ‚ΠΊΠΈΠΌΠΈ Π³Ρ€Π°Π½ΠΈΡ†Π°ΠΌΠΈ ΠΈ Ρ‡Π΅Ρ‚ΠΊΠΈΠΌΠΈ линиями. Π§Π΅ΠΌ слоТнСС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Ρ‚Π΅ΠΌ большС Π²Π΅Ρ€ΠΎΡΡ‚Π½ΠΎΡΡ‚ΡŒ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ массивный SVG-Ρ„Π°ΠΉΠ», ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ слоТно Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ ΠΈΠ»ΠΈ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ.

Как ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ» SVG (Π² WordPress ΠΈ Π²Π½Π΅ Π΅Π³ΠΎ)

SVG Π½Π΅ Ρ‚Π°ΠΊ ΡƒΠΆ слоТны Π² использовании. Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ„Π°ΠΉΠ» SVG Π½Π° свой Π²Π΅Π±-сайт Ρ‚Π°ΠΊ ΠΆΠ΅ просто, ΠΊΠ°ΠΊ Π²Π·ΡΡ‚ΡŒ Π΅Π³ΠΎ ΠΊΠΎΠ΄ ΠΈ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π² HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ Ρ‚ΡƒΠ΄Π°, ΠΊΡƒΠ΄Π° Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠΌΠ΅Ρ‰Π°Π»ΠΎΡΡŒ.

Если Π²Ρ‹ ΠΈ посСтитСли вашСго сайта ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹, ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‰ΠΈΠ΅ Ρ„Π°ΠΉΠ»Ρ‹ SVG (Π° Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ΠΈΠ· Π½ΠΈΡ… Π² наши Π΄Π½ΠΈ), ΠΎΠ½ΠΈ смогут ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ этот элСмСнт. ΠΠ½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ SVG, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ, слоТнСС, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ для этого трСбуСтся использованиС CSS.

ΠŸΡ€ΠΎΡ†Π΅ΡΡ мСняСтся, Ссли Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ WordPress. БистСма управлСния ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ (CMS) Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ SVG ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ SVG, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ Ρ„Π°ΠΉΠ»Ρ‹ прямо Π½Π° свой Π²Π΅Π±-сайт, Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠ»Π°Π³ΠΈΠ½, Ρ‚Π°ΠΊΠΎΠΉ ΠΊΠ°ΠΊ Safe SVG:

.

Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ SVG Π² WordPress Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ, Π½ΠΎ этот процСсс Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ слоТнСС. Π’ этом случаС использованиС ΠΏΠ»Π°Π³ΠΈΠ½Π° являСтся Π±ΠΎΠ»Π΅Π΅ бСзопасным Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠΌ.

Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅

ΠΠ΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ваш Π²Π΅Π±-сайт для использования Ρ„Π°ΠΉΠ»ΠΎΠ² SVG Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΡ‰Π΅, Ρ‡Π΅ΠΌ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ сСбС ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ. Настоящая ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ SVG с нуля ΠΈΠ»ΠΈ Π²Ρ‹Π±ΠΎΡ€Π΅ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ для прСобразования Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚. К ΡΡ‡Π°ΡΡ‚ΡŒΡŽ, Π΅ΡΡ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ инструмСнтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для Ρ‚ΠΎΠ³ΠΎ ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ.

НСкоторыС ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹Π΅ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ Adobe Illustrator, InDesign ΠΈ GIMP. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ эти инструмСнты, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Ρ‹Π²Π°Ρ‚ΡŒ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ изобраТСния Π² SVG. Если Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ WordPress, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ эти SVG с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠ»Π°Π³ΠΈΠ½Π° Safe SVG, Π° Π·Π°Ρ‚Π΅ΠΌ вСсСло провСсти врСмя, анимируя ΠΈΡ….

Π£ вас Π΅ΡΡ‚ΡŒ вопросы ΠΏΠΎ использованию Ρ„Π°ΠΉΠ»ΠΎΠ² SVG? Π”Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΎ Π½ΠΈΡ… Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠ΅Π² Π½ΠΈΠΆΠ΅!

ΠœΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Π° изобраТСния ΡΡ‚Π°Ρ‚ΡŒΠΈ ΠΎΡ‚ VectorsMarket / Shutterstock. com

Π§Ρ‚ΠΎ это Ρ‚Π°ΠΊΠΎΠ΅ ΠΈ ΠΊΠ°ΠΊ Π΅Π³ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ

Π’ процСссС Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΡƒΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ Π²Π΅Π±-сайта Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΡ‚ΠΎΠ»ΠΊΠ½ΡƒΡ‚ΡŒΡΡ с Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ трудностями с изобраТСниями, особСнно с Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ изобраТСния. Π’Π°ΠΆΠ½ΠΎ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ ΠΏΠΎΠ΄ΠΎΠ±Ρ€Π°Ρ‚ΡŒ качСство изобраТСния β€” мСньшС всСго Π½Π° страницС Π²Π΅Ρ‰Π΅ΠΉ выглядят ΠΌΠ΅Π½Π΅Π΅ ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ, Ρ‡Π΅ΠΌ искаТСнный, ΠΏΠ»ΠΎΡ…ΠΎ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ, Π·Π½Π°Ρ‡ΠΎΠΊ ΠΈΠ»ΠΈ фотография.

Π­Ρ‚Π° ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° усугубляСтся Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ. ΠŸΠΎΡΠ΅Ρ‚ΠΈΡ‚Π΅Π»ΠΈ ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°ΡŽΡ‚ ваш ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΊΠ°ΠΊ Π½Π° Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π°Ρ…, Ρ‚Π°ΠΊ ΠΈ Π½Π° смартфонах, поэтому, наряду с ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹ΠΌ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ, ваши изобраТСния Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Ρ‹ нСзависимо ΠΎΡ‚ устройства. Π‘Ρ‹Π»ΠΎ Π±Ρ‹ Π½Π΅ΠΏΠ»ΠΎΡ…ΠΎ, Ссли Π±Ρ‹ сущСствовал Ρ†ΠΈΡ„Ρ€ΠΎΠ²ΠΎΠΉ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ изобраТСния выглядСли Π±Ρ‹ Π²Π΅Π»ΠΈΠΊΠΎΠ»Π΅ΠΏΠ½ΠΎ, нСзависимо ΠΎΡ‚ ΠΈΡ… Ρ€Π°Π·ΠΌΠ΅Ρ€Π°?

Как оказалось, Π΅ΡΡ‚ΡŒ. Он называСтся Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠΌ SVG ΠΈ идСально ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для нСфотографичСских ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° Π²Π΅Π±-сайтах.

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

Π’ этом руководствС я расскаТу ΠΎΠ±ΠΎ всСх основах, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π·Π½Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°Ρ‡Π°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ с SVG. Π― объясню, Ρ‡Ρ‚ΠΎ это Π·Π° Ρ„Π°ΠΉΠ»Ρ‹, ΠΊΠΎΠ³Π΄Π° ΠΈΡ… ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ ΠΊΠ°ΠΊ Π½Π°Ρ‡Π°Ρ‚ΡŒ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ»Ρ‹ SVG ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ Ρ„Π°ΠΉΠ» SVG?

Π€Π°ΠΉΠ» SVG, сокращСниС ΠΎΡ‚ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΠΎΠ³ΠΎ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠ³ΠΎ графичСского Ρ„Π°ΠΉΠ»Π°, прСдставляСт собой стандартный Ρ‚ΠΈΠΏ графичСского Ρ„Π°ΠΉΠ»Π°, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΉ для Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Π΄Π²ΡƒΡ…ΠΌΠ΅Ρ€Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅.

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

Π’ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ‚ вопрос: Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ вСкторная Π³Ρ€Π°Ρ„ΠΈΠΊΠ°?

Растр ΠΏΡ€ΠΎΡ‚ΠΈΠ² Π²Π΅ΠΊΡ‚ΠΎΡ€Π°

БСгодня Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ нСсколько Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠ² Ρ„Π°ΠΉΠ»ΠΎΠ² ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚ΡŒ Π½Π° Π΄Π²Π΅ ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΈ: растровая Π³Ρ€Π°Ρ„ΠΈΠΊΠ° ΠΈ вСкторная Π³Ρ€Π°Ρ„ΠΈΠΊΠ°.

Π’Ρ‹, вСроятно, Π·Π½Π°ΠΊΠΎΠΌΡ‹ с распространСнными Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°ΠΌΠΈ PNG ΠΈ JPEG. Π­Ρ‚ΠΎ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ растровой Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ, Ρ‡Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ хранят ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎΠ± ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ Π² сСткС Ρ†Π²Π΅Ρ‚Π½Ρ‹Ρ… ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ΠΎΠ², Ρ‚Π°ΠΊΠΆΠ΅ Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌΠΎΠΉ растровым ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ. ΠšΠ²Π°Π΄Ρ€Π°Ρ‚Ρ‹ Π² этом растровом ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΡŽΡ‚ΡΡ, образуя связноС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΡ…ΠΎΠΆΠ΅Π΅ Π½Π° пиксСли Π½Π° экранС ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π°.

Растровая Π³Ρ€Π°Ρ„ΠΈΠΊΠ° Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для высокодСтализированных ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ‚ΠΎΡ‡Π½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ пиксСля. РастровыС изобраТСния ΠΈΠΌΠ΅ΡŽΡ‚ фиксированноС Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅, поэтому ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠ΅ ΠΈΡ… Ρ€Π°Π·ΠΌΠ΅Ρ€Π° сниТаСт качСство изобраТСния.

Π’Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Π΅ графичСскиС Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ SVG ΠΈ PDF, Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ ΠΏΠΎ-Ρ€Π°Π·Π½ΠΎΠΌΡƒ. Π­Ρ‚ΠΈ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ хранят изобраТСния Π² Π²ΠΈΠ΄Π΅ Π½Π°Π±ΠΎΡ€Π° Ρ‚ΠΎΡ‡Π΅ΠΊ ΠΈ Π»ΠΈΠ½ΠΈΠΉ ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌΠΈ. ΠœΠ°Ρ‚Π΅ΠΌΠ°Ρ‚ΠΈΡ‡Π΅ΡΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΡƒΠ»Ρ‹ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ ΠΈ Ρ„ΠΎΡ€ΠΌΡƒ этих Ρ‚ΠΎΡ‡Π΅ΠΊ ΠΈ Π»ΠΈΠ½ΠΈΠΉ, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΡΠΎΡ…Ρ€Π°Π½ΡΡŽΡ‚ ΠΈΡ… пространствСнныС ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡ ΠΏΡ€ΠΈ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠΈ ΠΈΠ»ΠΈ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±Π° изобраТСния. Π€Π°ΠΉΠ»Ρ‹ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ Ρ‚Π°ΠΊΠΆΠ΅ хранят ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ Ρ†Π²Π΅Ρ‚Π΅ ΠΈ Π΄Π°ΠΆΠ΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ тСкст.

Как Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Ρ„Π°ΠΉΠ»Ρ‹ SVG

Π€Π°ΠΉΠ»Ρ‹ SVG написаны Π½Π° XML, языкС Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠΎΠΌ для хранСния ΠΈ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡ΠΈ Ρ†ΠΈΡ„Ρ€ΠΎΠ²ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ. Код XML Π² Ρ„Π°ΠΉΠ»Π΅ SVG опрСдСляСт всС Ρ„ΠΎΡ€ΠΌΡ‹, Ρ†Π²Π΅Ρ‚Π° ΠΈ тСкст, ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… состоит ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.

Π”Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим нСсколько ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ². Π― Π½Π°Ρ‡Π½Ρƒ с рисования простого ΠΊΡ€ΡƒΠ³Π° Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ SVG:

Когда я ΠΎΡ‚ΠΊΡ€ΠΎΡŽ Ρ„Π°ΠΉΠ» этого ΠΊΡ€ΡƒΠ³Π° Π² тСкстовом Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅, появится Ρ‚Π°ΠΊΠΎΠΉ XML-ΠΊΠΎΠ΄:

Как Π²ΠΈΠ΄ΠΈΡ‚Π΅, здСсь Π½Π΅ Ρ‚Π°ΠΊ ΠΌΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°. Нам Π½ΡƒΠΆΠ½Π° Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½Π° строка ΠΊΠΎΠ΄Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ ΠΊΡ€ΡƒΠ³. Π­Ρ‚ΠΎ ΠΏΠΎΡ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ XML Π΄Π΅Π»Π°Π΅Ρ‚ Π·Π° нас Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Ρ‚Π΅Π³ΠΈ . Π’ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π²Ρ‹ΡˆΠ΅ ΠΊΠΎΠ΄Π΅ Ρ‚Π΅Π³ΠΈ ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ‹ Ρ€ΠΎΠ·ΠΎΠ²Ρ‹ΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠΌ Π² ΡƒΠ³Π»ΠΎΠ²Ρ‹Ρ… скобках.

Π§Ρ‚ΠΎΠ±Ρ‹ Π½Π°Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ ΠΊΡ€ΡƒΠ³, ΠΊΠΎΠ΄ XML ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Ρ„ΠΎΡ€ΠΌΡƒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π΅Π³Π° , Π΅Π΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² ΠΈ cx ΠΈ cy , радиус с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° r ΠΈ Ρ†Π²Π΅Ρ‚ Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ‚Π΅Π³Π°