Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния

ΠŸΠΎΠ΄Π±ΠΎΡ€ΠΊΠ° инструмСнтов для рСдактирования, конвСртирования ΠΈ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ SVG

ΠŸΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΠΈΠ»ΠΈ список инструмСнтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ Π²Π°ΠΌ с ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ простоту ΠΈ Π³ΠΈΠ±ΠΊΠΎΡΡ‚ΡŒ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° SVG Π² своих ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ….

БСсплатныС графичСскиС Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Ρ‹

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

Inkscape

НаиболСС многосторонний Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ – Inkscape. Π­Ρ‚ΠΎ бСсплатный Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹ΠΉ графичСский Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ исходным ΠΊΠΎΠ΄ΠΎΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ прСдоставляСт нСсколько инструмСнтов для рисования ΠΈ манипуляций с ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°ΠΌΠΈ. ΠšΡ€ΠΎΠΌΠ΅ ΠΈΠΌΠΏΠΎΡ€Ρ‚Π° Π²Π΅ΠΊΡ‚ΠΎΡ€Π°, Ρ‚Π°ΠΊΠΆΠ΅ поддСрТиваСтся AI, EPS, PS ΠΈ PNG.

Boxy SVG

Π”Ρ€ΡƒΠ³ΠΈΠΌ бСсплатным графичСским Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ΠΎΠΌ являСтся Boxy SVG. Π­Ρ‚ΠΎ ΠΌΡƒΠ»ΡŒΡ‚ΠΈΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ΅Π½Π½Ρ‹ΠΉ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ способСн Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ… Π½Π° Chromium, Π½ΠΎ ΠΈ Π½Π° любой ΠΈΠ· доступных Π²Π°ΠΌ ОБ: Windows, MacOS ΠΈ всС сСмСйство Linux.

Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚Ρ‹ для конвСртирования SVG

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

PicSVG

PicSVG позволяСт Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° сайт, Π³Π΄Π΅ ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎ происходит конвСртация Π² Π²Π΅ΠΊΡ‚ΠΎΡ€. Π Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с PNG, JPEG ΠΈ GIF.

Vectormagic

px2svg

Если Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ растровоС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠ΅, ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅ px2svg ΠΎΡ‚ Π­Ρ€ΠΈΠΊΠ° ΠœΠ΅ΠΉΠ΅Ρ€Π° (Eric Meyer). Π­Ρ‚ΠΎ нСбольшой PHP-скрипт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚ исходноС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ попиксСльно, ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ ΠΊ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΡƒ воссоздавая ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π» Π² Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΌ Π²ΠΈΠ΄Π΅.

ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡ ΠΈ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡Π°

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

Базовая оптимизация

Π§Ρ‚ΠΎΠ±Ρ‹ Π±Ρ‹Ρ‚ΡŒ ΡƒΠ²Π΅Ρ€Π΅Π½Π½Ρ‹ΠΌ Π² содСрТимом Ρ„Π°ΠΉΠ»Π° ΠΈ Π½Π΅ ΠΏΠΎΡ‚Π΅Ρ€ΡΡ‚ΡŒ лишнСС, сокращая объСм, слСдуСт Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Ρ€ΡƒΡ‡Π½Ρ‹ΠΌ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ. Для этого ΠΏΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ‚ любой Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ ΠΊΠΎΠ΄Π° с ΠΆΠΈΠ²Ρ‹ΠΌ прСдпросмотром ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ – это ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ Π²Ρ‹Ρ‡ΠΈΡΡ‚ΠΈΡ‚ΡŒ Ρ„Π°ΠΉΠ» ΠΎΡ‚ слуТСбных классов, Π»ΠΈΡˆΠ½ΠΈΡ… ΠΏΡ€ΠΎΠ±Π΅Π»ΠΎΠ² ΠΈ запятых Π½Π΅ Π½Π°Ρ€ΡƒΡˆΠΈΠ² Ρ†Π΅Π»ΠΎΡΡ‚Π½ΠΎΡΡ‚ΡŒ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ. Π₯ΠΎΡ€ΠΎΡˆΠ΅ΠΉ ΠΈΠ΄Π΅Π΅ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π³Π°ΠΉΠ΄ΠΎΠΌ ΠΎΡ‚ АндрСаса ЛарсСна (Andreas Larsen), Ссли Ρ€Π΅ΡˆΠΈΡ‚Π΅ Π΄Π΅Π»Π°Ρ‚ΡŒ всС Ρ€ΡƒΠΊΠ°ΠΌΠΈ.

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ сСрвисы для автоматичСской ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ svgo. Но Ρ‚ΡƒΡ‚ стоит Π±Ρ‹Ρ‚ΡŒ Π²Π½ΠΈΠΌΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ – Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Π²Π°ΠΆΠ½ΠΎΠ΅ содСрТимоС (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, относящССся ΠΊ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ), Π»ΡƒΡ‡ΡˆΠ΅ всС-Ρ‚Π°ΠΊΠΈ Π΄Π΅Π»Π°Ρ‚ΡŒ это Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ.

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ SVG-Π½Π°Π±ΠΎΡ€Π°

SVG-Π½Π°Π±ΠΎΡ€ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΡ‚Π°Ρ‚ΡŒ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎΠΉ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²ΠΎΠΉ классичСским ΡˆΡ€ΠΈΡ„Ρ‚Π°ΠΌ-ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌ. Π’ Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ, Ссли со ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠΌ Π²ΠΎΠ·Π½ΠΈΠΊΠ½Π΅Ρ‚ какая-Ρ‚ΠΎ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°, ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π΅ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚ Π½ΠΈΡ‡Π΅Π³ΠΎ, SVG ΠΌΠΎΠΆΠ΅Ρ‚ Π³Ρ€Π°Ρ†ΠΈΠΎΠ·Π½ΠΎ ΠΎΡ‚ΠΊΠ°Ρ‚ΠΈΡ‚ΡŒΡΡ ΠΊ PNG (Π³Π»Π°Π²Π½ΠΎΠ΅ ΠΏΡ€Π΅Π΄ΡƒΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ эту Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ).

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Ρ‚Π°ΠΊΠΈΡ… Π½Π°Π±ΠΎΡ€ΠΎΠ² Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ – здСсь ΠšΡ€ΠΈΡ ΠšΠΎΠΉΠ»Π΅Ρ€ (Chris Coyier) рассказываСт, ΠΊΠ°ΠΊ это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ. А ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠΌ для Grunt grunt-svgstore ΠΈΠ»ΠΈ gulp-svgstore для Gulp.

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

Π§Π΅ΠΌ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ Ρ„Π°ΠΉΠ» Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ SVG – Π»ΡƒΡ‡ΡˆΠΈΠ΅ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ ΠΈ ΠΎΠ½Π»Π°ΠΉΠ½-Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Ρ‹

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

Π§Ρ‚ΠΎ Π·Π° Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ SVG ΠΈ Π³Π΄Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ

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

Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π€ΠΎΡ‚ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния

Как ΠΈ всС Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹, SVG ΠΈΠΌΠ΅Π΅Ρ‚ свои ΠΏΠ»ΡŽΡΡ‹ ΠΈ минусы. К ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ относятся ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΠΎΡΡ‚ΡŒ Π±Π΅Π· ΠΏΠΎΡ‚Π΅Ρ€ΠΈ качСства, ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΌΠ°Π»Ρ‹ΠΉ вСс, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΈΠ½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΠΈ Π² SVG-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Ρ‹ PNG, GIF, JPG-ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ (ΠΏΡ€ΠΈ Π½Π°Π»ΠΈΡ‡ΠΈΠΈ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π³ΠΎ ΠΎΠΏΡ‹Ρ‚Π°) Π² тСкстовых Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π°Ρ…, индСксированиС поисковыми Ρ€ΠΎΠ±ΠΎΡ‚Π°ΠΌΠΈ, ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΈ Ρ€Π°ΡΠΏΡ€ΠΎΡΡ‚Ρ€Π°Π½Π΅Π½Π½ΠΎΡΡ‚ΡŒ. К прСимущСствам Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° слСдуСт Ρ‚Π°ΠΊΠΆΠ΅ отнСсти Ρ…ΠΎΡ€ΠΎΡˆΡƒΡŽ ΡΠΆΠΈΠΌΠ°Π΅ΠΌΠΎΡΡ‚ΡŒ, ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΎΡΡ‚ΡŒ ΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ.

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

Π›ΡƒΡ‡ΡˆΠΈΠ΅ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Ρ‹ для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Ρ„Π°ΠΉΠ»Π°ΠΌΠΈ SVG

Как ΡƒΠΆΠ΅ Π±Ρ‹Π»ΠΎ сказано, ΠΎΡ‚Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ» SVG ΠΌΠΎΠΆΠ½ΠΎ Π² ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠΌ тСкстовом Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅, Π½ΠΎ для этого Π½ΡƒΠΆΠ½ΠΎ ΠΎΠ±Π»Π°Π΄Π°Ρ‚ΡŒ спСцифичСскими знаниями. Π“ΠΎΡ€Π°Π·Π΄ΠΎ ΡƒΠ΄ΠΎΠ±Π½Π΅Π΅ ΠΈ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Π΅Π΅ Π·Π°Π΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Π΅ графичСскиС Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Ρ‹.

Adobe Illustrator

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

Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π€ΠΎΡ‚ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния

Boxy SVG

ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ SVG-ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ созданного для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с этим Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠΌ прилоТСния Boxy SVG. Π”Π°Π½Π½Ρ‹ΠΉ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΎΠΌ уступаСт Adobe Illustrator, ΠΎΠ΄Π½Π°ΠΊΠΎ Π² Π½Ρ‘ΠΌ Π²Ρ‹ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ всС Π±Π°Π·ΠΎΠ²Ρ‹Π΅ инструмСнты для создания ΠΈ рСдактирования ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ SVG. ΠŸΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ Ρ€Π°Π±ΠΎΡ‚Π° с Ρ„ΠΈΠ³ΡƒΡ€Π°ΠΌΠΈ ΠΈ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°ΠΌΠΈ, ΠΈΠΌΠΏΠΎΡ€Ρ‚ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² ΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ популярных Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠ², Ρ€Π°Π±ΠΎΡ‚Π° с Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΎΠΉ Pixabay, просмотр ΠΈ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ исходного ΠΊΠΎΠ΄Π° SVG ΠΈ CSS. ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° Boxy SVG доступна ΠΊΠ°ΠΊ ΠΎΠ½Π»Π°ΠΉΠ½-сСрвис ΠΈ ΠΊΠ°ΠΊ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ для Windows 10, MacOS ΠΈ Chrome OS.

Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π€ΠΎΡ‚ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния

Vectr

Π§Π΅ΠΌ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ Ρ„Π°ΠΉΠ» SVG Π΅Ρ‰Π΅? Для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Ρ„Π°ΠΉΠ»Π°ΠΌΠΈ этого Ρ‚ΠΈΠΏΠ° Π΅ΡΡ‚ΡŒ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° Vectr, ΠΎΡ‡Π΅Π½ΡŒ Π΄Π°ΠΆΠ΅ Π½Π΅ΠΏΠ»ΠΎΡ…ΠΎ ΡΠΏΡ€Π°Π²Π»ΡΡŽΡ‰Π°ΡΡΡ с Π²ΠΎΠ·Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΌΠΈ Π½Π° Π½Π΅Ρ‘ Π·Π°Π΄Π°Ρ‡Π°ΠΌΠΈ рСдактирования. Π’ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ доступны Ρ‚Π°ΠΊΠΈΠ΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, ΠΊΠ°ΠΊ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… частСй Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠ³ΠΎ изобраТСния, Ρ€Π°Π±ΠΎΡ‚Π° со слоями, Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ тСкста ΠΈ ΠΏΡ€ΠΈΠΌΠΈΡ‚ΠΈΠ²ΠΎΠ², ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ эффСктов (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ, ΠΎΠ±Π²ΠΎΠ΄ΠΊΠ°, внСшняя ΠΈ внутрСнняя Ρ‚Π΅Π½ΡŒ), использованиС Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠ², ΠΏΠ΅Ρ€Π°, Π»ΠΈΠ½ΠΈΠΉ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… инструмСнтов. Π£Ρ‚ΠΈΠ»ΠΈΡ‚Π° Vectr бСсплатна, Π΅ΡΡ‚ΡŒ вСрсии для Windows, Linux ΠΈ Chrome OS.

Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π€ΠΎΡ‚ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния

Inkscape

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

Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π€ΠΎΡ‚ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния

ΠšΡΡ‚Π°Ρ‚ΠΈ, ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ SVG ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡƒΡ‚Π΅ΠΌ рСдактирования исходного ΠΊΠΎΠ΄Π° Ρ„Π°ΠΉΠ»Π°, Π½ΠΎ для этого Π½ΡƒΠΆΠ½ΠΎ ΠΈΠΌΠ΅Ρ‚ΡŒ хотя Π±Ρ‹ Π±Π°Π·ΠΎΠ²Ρ‹Π΅ прСдставлСния ΠΎ языкС CSS ΠΈ ΠΊΠΎΠ΄Π°Ρ… Ρ†Π²Π΅Ρ‚ΠΎΠ². ΠžΡ‚Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π², ΠΊ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ, ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ style Π² Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌ Π½Π° ΡΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚Π΅ Π±Π»ΠΎΠΊΠ΅ ΠΊΠΎΠ΄Π°, ΠΌΡ‹ Π·Π°ΠΌΠ΅Π½ΠΈΠ»ΠΈ Π±Π΅Π»Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ Π½Π° красный. А Ρ‚Π°ΠΊ, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ, Ссли Ρ‡Π΅ΠΌ ΠΈ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ SVG, Ρ‚ΠΎ Inkscape ΠΈ ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹ΠΌΠΈ Π΅ΠΌΡƒ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°ΠΌΠΈ.

Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π€ΠΎΡ‚ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния

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

Если Π²Π°ΠΌ Π½ΡƒΠΆΠ΅Π½ ΠΎΠ½Π»Π°ΠΉΠ½-Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ SVG, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π²Π΅Π±-вСрсии ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌ Boxy SVG, Vectr ΠΈ Inkscape. Π€ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ Π½Π°Π±ΠΎΡ€ Ρ‚Π°ΠΊΠΈΡ… Ρ€Π΅Π΄Π°ΠΊΡ†ΠΈΠΉ практичСски ΠΎΠ΄ΠΈΠ½ Π² ΠΎΠ΄ΠΈΠ½, ΠΊΠ°ΠΊ Ρƒ дСсктопных Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ². ΠŸΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Inkscape, ΠΊ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ, ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ Π² Ρ€Π°ΠΌΠΊΠ°Ρ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° www.rollapp.com/app/inkscape.

Если ΠΆΠ΅ Π²Ρ‹ ΠΈΡ‰ΠΈΡ‚Π΅ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ ΠΏΠΎΠΏΡ€ΠΎΡ‰Π΅, ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ ΠΎΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹ΠΉ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹ΠΉ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ Sketchpad, доступный ΠΏΠΎ адрСсу sketch.io/sketchpad. Π’ Π°ΠΊΡ‚ΠΈΠ²Π΅ Sketchpad ΠΈΠΌΠ΅ΡŽΡ‚ΡΡ Ρ‚Π°ΠΊΠΈΠ΅ инструмСнты, ΠΊΠ°ΠΊ кисти, Π»ΠΈΠ½ΠΈΠΈ, стрСлки, ΠΏΡ€ΠΈΠΌΠΈΡ‚ΠΈΠ²Ρ‹, ΠΊΠ»ΠΈΠΏΠ°Ρ€Ρ‚, ΠΏΠ΅Ρ€ΠΎ, ΠΌΠ΅Π»ΠΎΠΊ, аэрограф, Π·Π°Π»ΠΈΠ²ΠΊΠ° ΠΈ Ρ‚.ΠΏ. Π•ΡΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Π° со слоями, ΠΏΠ°Π»ΠΈΡ‚Ρ€ΠΎΠΉ ΠΈ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π°ΠΌΠΈ.

Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π€ΠΎΡ‚ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния

А Π²ΠΎΡ‚ для создания SVG-ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ «с нуля» сСрвис ΠΌΠ°Π»ΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚, хотя функция ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ»ΡŒΠ½ΠΎΠ³ΠΎ рисования ΠΈΠΌ поддСрТиваСтся. ΠžΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ Π½Π° Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π»Π΅Π³ΠΊΠΎ с Π½ΠΈΠΌ Ρ€Π°Π·Π±Π΅Ρ€Π΅Ρ‚Π΅ΡΡŒ.

ΠšΠΎΠ½Π²Π΅Ρ€Ρ‚Π΅Ρ€Ρ‹ SVG Π² PNG

ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„Π°ΠΉΠ» SVG ΠΊΠ°ΠΊ ΠΎΠ±Ρ‹Ρ‡Π½ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΌΠΎΠΆΠ½ΠΎ просто ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΠ² Π΅Π³ΠΎ Π½Π° ΠΎΠΊΠ½ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, Π½ΠΎ Π±Ρ‹Π²Π°Π΅Ρ‚ ΠΈ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎ SVG-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π² Π±ΠΎΠ»Π΅Π΅ доступный ΠΈ ΠΏΡ€ΠΈΠ²Ρ‹Ρ‡Π½Ρ‹ΠΉ графичСский Ρ„ΠΎΡ€ΠΌΠ°Ρ‚, скаТСм, PNG. Если ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚ΠΈΡ€ΡƒΠ΅ΠΌΡ‹Ρ… Ρ„Π°ΠΉΠ»ΠΎΠ² ΠΌΠ½ΠΎΠ³ΠΎ, Π΅ΡΡ‚ΡŒ смысл Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ бСсплатной Ρ‚ΡƒΠ»Π·ΠΎΠΉ SVG2PNG, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰Π΅ΠΉ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Ρ‹Π²Π°Ρ‚ΡŒ SVG Π² PNG Π² ΠΏΠ°ΠΊΠ΅Ρ‚Π½ΠΎΠΌ Ρ€Π΅ΠΆΠΈΠΌΠ΅. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ SVG Π² PNG, запуститС ΡƒΡ‚ΠΈΠ»ΠΈΡ‚Ρƒ, ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚Π΅ Π² Π΅Π΅ ΠΎΠΊΠ½ΠΎ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Π΅ Ρ„Π°ΠΉΠ»Ρ‹, Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Β«StartΒ» ΠΈ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚.

Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π€ΠΎΡ‚ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния

Π’ ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ… случаях Π±ΡƒΠ΄Π΅Ρ‚ мСньшС ΠΌΠΎΡ€ΠΎΠΊΠΈ, Ссли Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ΡΡŒ бСсплатными ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚Π΅Ρ€Π°ΠΌΠΈ SVG Π² PNG, Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‰ΠΈΠΌΠΈ Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ ΠΎΠ½Π»Π°ΠΉΠ½. Π’ частности, это svgtopng.com/ru, convertio.co/ru/svg-png ΠΈ image.online-convert.com/ru/convert-to-png.

Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π€ΠΎΡ‚ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния

Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π€ΠΎΡ‚ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния

Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π€ΠΎΡ‚ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния

Какой ΠΈΠ· Π½ΠΈΡ… ΡƒΠ΄ΠΎΠ±Π½Π΅Π΅, Ρ€Π΅ΡˆΠ°ΠΉΡ‚Π΅ сами. ВсС эти Ρ‚Ρ€ΠΈ ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚Π΅Ρ€Π° бСсплатны ΠΈ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ Ρ€Π°Π±ΠΎΡ‚Ρƒ Π² ΠΏΠ°ΠΊΠ΅Ρ‚Π½ΠΎΠΌ Ρ€Π΅ΠΆΠΈΠΌΠ΅, Π° Online-Convert Π²Π΄ΠΎΠ±Π°Π²ΠΎΠΊ ΠΊΠΎ всСму Π΅Ρ‰Π΅ прСдоставляСт Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π³ΠΈΠ±ΠΊΠΎΠΉ настройки Π²Ρ‹Ρ…ΠΎΠ΄Π½Ρ‹Ρ… ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ² PNG-Ρ„Π°ΠΉΠ»Π°.

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

Как Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠΌ SVG: руководство для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ… Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ²

Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π€ΠΎΡ‚ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния

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

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

Если Π²Π°ΠΌ Π½ΡƒΠΆΠ½Ρ‹ Ρ‡Ρ‘Ρ‚ΠΊΠΈΠ΅, Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΈΠ»ΠΈ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ элСмСнты интСрфСйса, ΠΈΠΊΠΎΠ½ΠΊΠΈ, Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΡ‹, Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Π΅ изобраТСния, стоит ΠΏΠΎΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ ΠΎΠ± использовании Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° SVG. НиТС пСрСчислСны Π΅Π³ΠΎ основныС возмоТности ΠΈ прСимущСства.

ΠœΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ изобраТСния с сохранСниСм качСства pixel perfect

ΠŸΡ€ΠΈ использовании Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° PNG ΠΈΠ»ΠΈ растровых ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Ρ‹ пиксСлями. ΠœΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ сниТаСт Π΅Ρ‘ качСство. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ приходится ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ нСсколько Ρ€Π°Π·Π½Ρ‹Ρ… Ρ„ΠΎΡ‚ΠΎ для дСвайсов с Ρ€Π°Π·Π½Ρ‹ΠΌ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ экрана.

Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ SVG ΡΠΎΡ…Ρ€Π°Π½ΡΡŽΡ‚ качСство ΠΏΡ€ΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ нарисованы с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΠ΄Π°, Π° Π½Π΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ пиксСлСй.

Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π€ΠΎΡ‚ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния

Π‘Ρ€Π°Π²Π½Π΅Π½ΠΈΠ΅ качСства растровых ΠΈ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ

Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ

Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ SVG ΠΌΠΎΠΆΠ½ΠΎ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ»ΠΈ ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚Π°, Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ элСмСнтов, ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΌΠΎΠΆΠ½ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ.

НСбольшой «вСс» Ρ„Π°ΠΉΠ»ΠΎΠ²

Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ PNG становятся ΠΎΡ‡Π΅Π½ΡŒ «тяТёлыми», ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ высокоС Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅. Π­Ρ‚ΠΎ Π½Π΅Π³Π°Ρ‚ΠΈΠ²Π½ΠΎ влияСт Π½Π° ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ страницы, Ρ‡Ρ‚ΠΎ Π² свою ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ ΠΌΠΎΠΆΠ΅Ρ‚ ΡƒΡ…ΡƒΠ΄ΡˆΠΈΡ‚ΡŒ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹ сайта Π² поисковой Π²Ρ‹Π΄Π°Ρ‡Π΅.

Π€Π°ΠΉΠ»Ρ‹ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ JPG Ρ‡ΡƒΡ‚ΡŒ Β«Π»Π΅Π³Ρ‡Π΅Β» ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ Π² PNG, Π½ΠΎ всё Ρ€Π°Π²Π½ΠΎ ΠΎΠ½ΠΈ слишком «тяТёлыС». А изобраТСния SVG ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ собой ΠΊΠΎΠ΄, поэтому ΠΎΠ½ΠΈ «вСсят» ΠΎΡ‡Π΅Π½ΡŒ ΠΌΠ°Π»ΠΎ. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ смСло ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ этот Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ для создания ΠΈΠΊΠΎΠ½ΠΎΠΊ, Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠΎΠ² ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… элСмСнтов интСрфСйса.

Π”ΠΎΡΡ‚ΡƒΠΏΠ½ΠΎΡΡ‚ΡŒ

Если SVG-изобраТСния содСрТат тСкст, поисковики ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡ… ΠΈΠ½Π΄Π΅ΠΊΡΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ Π²Ρ‹Π΄Π°Π²Π°Ρ‚ΡŒ Π² ΠΎΡ‚Π²Π΅Ρ‚ Π½Π° запросы ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ. Π‘ΠΊΡ€ΠΈΠ½Ρ€ΠΈΠ΄Π΅Ρ€Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ слабовидящиС ΠΈ слСпыС ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ, Ρ‚ΠΎΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ SVG. Π­Ρ‚ΠΎ обСспСчиваСт Π΄ΠΎΡΡ‚ΡƒΠΏΠ½ΠΎΡΡ‚ΡŒ Ρ„Π°ΠΉΠ»ΠΎΠ² этого Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° для всСх посСтитСлСй сайта.

ИспользованиС SVG: распространённыС ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠΈ

Π’Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Π΅ изобраТСния Π΄ΠΎΠ»Π³ΠΎ Π±Ρ‹Π»ΠΈ нСпопулярными, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Π½Π΅ всС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΈΡ… ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π»ΠΈ. Π’ настоящСС врСмя эта ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° Ρ€Π΅ΡˆΠ΅Π½Π°. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎ примСняСтся для Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ Π·Π°Π΄Π°Ρ‡ Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ. НаиболСС популярныС кСйсы использования прСдставлСны Π½ΠΈΠΆΠ΅.

Π›ΠΎΠ³ΠΎΡ‚ΠΈΠΏΡ‹ ΠΈ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π² SVG

Π›ΠΎΠ³ΠΎΡ‚ΠΈΠΏΡ‹ ΠΈ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡΠΎΡ…Ρ€Π°Π½ΡΡ‚ΡŒ качСство Π½Π° экранах с Π»ΡŽΠ±Ρ‹ΠΌ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ. Π§Ρ‘Ρ‚ΠΊΠΎΡΡ‚ΡŒ Π½ΡƒΠΆΠ½Π° всСм элСмСнтам интСрфСйса сайта: ΠΎΡ‚ малСнькой ΠΊΠ½ΠΎΠΏΠΊΠΈ Π΄ΠΎ экранной заставки.

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

Π˜Π½Ρ„ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠ°

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ SVG ΠΌΠΎΠΆΠ½ΠΎ динамичСски ΠΎΠ±Π½ΠΎΠ²Π»ΡΡ‚ΡŒ Π² зависимости ΠΎΡ‚ дСйствий ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΈΠ»ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π΄Π°Π½Π½Ρ‹Ρ…. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ SVG β€” ΠΈΠ΄Π΅Π°Π»ΡŒΠ½Ρ‹ΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ для создания ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΊΠ°Ρ€Ρ‚ ΠΈ ΠΈΠ½Ρ„ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠΈ.

Π’ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹Π΅ эффСкты

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ SVG ΡƒΠ΄ΠΎΠ±Π½ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ Ρ€Π°Π·Π½Ρ‹Π΅ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹Π΅ эффСкты, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, измСнСния Ρ„ΠΎΡ€ΠΌΡ‹ элСмСнта ΠΈΠ»ΠΈ ΠΏΡ€Π΅Π²Ρ€Π°Ρ‰Π΅Π½ΠΈΠ΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ элСмСнта Π² Π΄Ρ€ΡƒΠ³ΠΎΠΉ. К ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ, ΠΌΠΎΠΆΠ½ΠΎ ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ„ΠΎΡ€ΠΌΡƒ Π±ΡƒΠΊΠ² ΠΈΠ»ΠΈ Ρ‚Ρ€Π°Π½ΡΡ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ Π² Π΄Ρ€ΡƒΠ³ΠΎΠΉ.

Анимация

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

Π˜Π»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΈ ΠΈ рисунки

ΠžΠ±Ρ‹Ρ‡Π½Ρ‹Π΅ рисунки ΠΈ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΈ, Ссли ΠΎΠ½ΠΈ Π½Π΅ слишком слоТныС, Π»Π΅Π³ΠΊΠΎ Ρ‚Ρ€Π°Π½ΡΡ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π² SVG. Π’Π°ΠΊΠΆΠ΅ это практичСски ΠΈΠ΄Π΅Π°Π»ΡŒΠ½Ρ‹ΠΉ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ для скСтчСй, схСм, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, для ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΉ, схСматичСски ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏ Ρ€Π°Π±ΠΎΡ‚Ρ‹ ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Ρ‚ΠΎ ΠΌΠ΅Ρ…Π°Π½ΠΈΠ·ΠΌΠ°.

Π˜Π½Ρ‚Π΅Ρ€Ρ„Π΅ΠΉΡΡ‹ ΠΈ прилоТСния

SVG ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для создания слоТных интСрфСйсов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠ½Ρ‚Π΅Π³Ρ€ΠΈΡ€ΡƒΡŽΡ‚ΡΡ с насыщСнными ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-прилоТСниями (RIA, rich internet application). Благодаря свойствам Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° элСмСнты интСрфСйса ΠΏΠΎΠ»ΡƒΡ‡Π°ΡŽΡ‚ΡΡ Π»Ρ‘Π³ΠΊΠΈΠΌΠΈ, ΠΏΡ€ΠΈ нСобходимости Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌΠΈ ΠΈ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ.

Π”Π°Π»Π΅Π΅ Ρ€Π΅Ρ‡ΡŒ ΠΏΠΎΠΉΠ΄Ρ‘Ρ‚ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ Ρ„Π°ΠΉΠ»Ρ‹ SVG Π½Π° сайт.

Π˜Π·ΡƒΡ‡Π°ΠΉΡ‚Π΅ вёрстку Π½Π° Π₯СкслСтС Π’ Ρ€Π°ΠΌΠΊΠ°Ρ… профСссии Β«Π’Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΒ» Π²Ρ‹ ΠΈΠ·ΡƒΡ‡ΠΈΡ‚Π΅ HTML5 ΠΈ CSS3, Π½Π°ΡƒΡ‡ΠΈΡ‚Π΅ΡΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Flex, Grid, Sass, Bootstrap. Π’ процСссС обучСния свСрстаСтС нСсколько ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½Ρ‹Ρ… Π»Π΅Π½Π΄ΠΈΠ½Π³ΠΎΠ² ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚Π΅ ΠΈΡ… Π² ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ. Π‘Π°Π·ΠΎΠ²Ρ‹Π΅ курсы Π² профСссии доступны бСсплатно.

ИспользованиС SVG в HTML и CSS

Π€Π°ΠΉΠ»Ρ‹ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ SVG ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ Π½Π° страницы сайта срСдствами HTML ΠΈ CSS.

Π’Π΅Π³ img

ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ способ β€” URL изобраТСния ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π² Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π΅ src Ρ‚Π΅Π³Π° img. Π’ этом случаС Π²Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠΌ Ρ‚Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ с ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°ΠΌΠΈ jpg, png ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅.

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

ИспользованиС SVG в CSS

Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ SVG ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Π² свойствС background-image, ΠΊΠ°ΠΊ Ρ„ΠΎΡ‚ΠΎ Π² Π΄Ρ€ΡƒΠ³ΠΈΡ… Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°Ρ…. НиТС ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΊΠΎΠ΄Π°.

Π­Ρ‚ΠΎΡ‚ способ сохраняСт всС прСимущСства Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Π²Ρ‹ΡΠΎΠΊΡƒΡŽ Ρ‡Π΅Ρ‚ΠΊΠΎΡΡ‚ΡŒ Π½Π° экранах с Π»ΡŽΠ±Ρ‹ΠΌ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ. Π’Π°ΠΊΠΆΠ΅ этот способ позволяСт ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒ ΠΈ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ изобраТСния.

Инлайн SVG в HTML

Π€Π°ΠΉΠ» SVG ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ Π² любом тСкстовом Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅, ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π² HTML-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ страницы. Π­Ρ‚ΠΎ называСтся использованиСм SVG ΠΈΠ½Π»Π°ΠΉΠ½. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Π½ΠΈΠΆΠ΅.

Π’Π°ΠΊΠΎΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Π΅Ρ‚ количСство http-запросов ΠΈ сокращаСт врСмя Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ страницы. Π’ Ρ‚Π΅Π³Π°Ρ… ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ классы ΠΈ id ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ… для измСнСния стилСй элСмСнта с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS.

ИспользованиС SVG Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ ΠΊΠΎΠ΄Π°

Π’ SVG-Ρ„Π°ΠΉΠ»Π°Ρ… ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ основанный Π½Π° XML язык, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ описываСт Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Π΅ изобраТСния. Как ΠΈ HTML, это язык Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ. Но ΠΊΠΎΠ΄ SVG позволяСт ΠΌΠ°Π½ΠΈΠΏΡƒΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ элСмСнтами, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΊ Π½ΠΈΠΌ эффСкты.

Код SVG ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ Π² HTML-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ страницы ΠΈΠ»ΠΈ ΠΏΠΈΡΠ°Ρ‚ΡŒ Π΅Π³ΠΎ Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… Ρ„Π°ΠΉΠ»Π°Ρ…. НиТС ΠΏΡ€ΠΈΠΌΠ΅Ρ€ создания окруТности ΠΈ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ SVG.

ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΠΎ Ρ€Π°Π±ΠΎΡ‚Π΅ с простыми Ρ„ΠΈΠ³ΡƒΡ€Π°ΠΌΠΈ Π½ΠΈΠΆΠ΅.

РисуСм с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ SVG: ΠΊΡ€ΡƒΠ³

Π§Ρ‚ΠΎΠ±Ρ‹ Π½Π°Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ ΠΊΡ€ΡƒΠ³, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ‚Ρ€ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°:

Код, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ ΠΊΡ€ΡƒΠ³, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π½ΠΈΠΆΠ΅. Π¦Π²Π΅Ρ‚ Π»ΠΈΠ½ΠΈΠΈ ΠΈ Ρ„ΠΎΠ½Π° ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ ΠΈΠ½Π»Π°ΠΉΠ½ ΠΈΠ»ΠΈ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ.

Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π€ΠΎΡ‚ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния

ΠšΡ€ΡƒΠ³ нарисован с использованиСм обсуТдаСмого Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°

РисуСм с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ SVG: ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠΎΠ² с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ SVG ΠΏΠΎΡ…ΠΎΠΆΠ΅ Π½Π° рисованиС окруТностСй. Достаточно ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ Ρ†Π΅Π½Ρ‚Ρ€Π° ΠΏΠΎ осям x ΠΈ y, Π° Ρ‚Π°ΠΊΠΆΠ΅ высоту ΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρƒ для опрСдСлСния Ρ€Π°Π·ΠΌΠ΅Ρ€Π°. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΊΠΎΠ΄Π° Π½ΠΈΠΆΠ΅.

Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π€ΠΎΡ‚ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния

ΠŸΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ нарисован с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ SVG

РисуСм с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ SVG: линия

Π§Ρ‚ΠΎΠ±Ρ‹ Π½Π°Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ линию, Π½ΡƒΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ ΠΏΠΎ осям x ΠΈ y Π΄Π²ΡƒΡ… Ρ‚ΠΎΡ‡Π΅ΠΊ. Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ†Π²Π΅Ρ‚ ΠΈ Ρ‚ΠΎΠ»Ρ‰ΠΈΠ½Ρƒ Π»ΠΈΠ½ΠΈΠΈ. Код Π½ΠΈΠΆΠ΅ навСрняка выглядит понятнСС объяснСния словами.

Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π€ΠΎΡ‚ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния

РисуСм с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ SVG: Π·Π²Π΅Π·Π΄Π°

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ SVG ΠΌΠΎΠΆΠ½ΠΎ Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ Π·Π²Ρ‘Π·Π΄Ρ‹ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΌΠ½ΠΎΠ³ΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠΈ. Для этого достаточно ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ Ρ‚ΠΎΡ‡Π΅ΠΊ ΡƒΠ³Π»ΠΎΠ² Ρ„ΠΈΠ³ΡƒΡ€Ρ‹. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΊΠΎΠ΄Π° Π½ΠΈΠΆΠ΅.

Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π€ΠΎΡ‚ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния

Π‘Π»ΠΎΠΆΠ½Ρ‹ΠΉ ΠΌΠ½ΠΎΠ³ΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ SVG

РисуСм с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ SVG: ΠΏΡƒΡ‚ΠΈ

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ элСмСнта ΠΌΠΎΠΆΠ½ΠΎ Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ Π»ΠΎΠΌΠ°Π½Ρ‹Π΅ ΠΊΡ€ΠΈΠ²Ρ‹Π΅. Они ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ Ρ€Π°Π·Π½ΠΎΠΉ Ρ„ΠΎΡ€ΠΌΡ‹. Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° d опрСдСляСтся ΠΏΡƒΡ‚ΡŒ ΠΈΠ»ΠΈ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ Π»ΠΎΠΌΠ°Π½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ. Команда M ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ³ΠΎ позиционирования, Π° m β€” для ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ. Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ L ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ΡΡ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ Π½ΠΎΠ²ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠΈ.

Π’ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ использования path:

А это ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Π»ΠΈΠ½ΠΈΠΉ, созданных с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ path:

Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π€ΠΎΡ‚ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния

РисуСм с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ SVG: ΠΊΡ€ΠΈΠ²Ρ‹Π΅

Для рисования ΠΊΡ€ΠΈΠ²ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΊΠΎΠΌΠ°Π½Π΄Π° C. Π’ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π½ΠΈΠΆΠ΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ΡΡ Π½Π°Ρ‡Π°Π»ΠΎ ΠΊΡ€ΠΈΠ²ΠΎΠΉ, Ρ‚ΠΎΡ‡ΠΊΠΈ смСщСния ΠΈ ΠΊΠΎΠ½Π΅Ρ† ΠΊΡ€ΠΈΠ²ΠΎΠΉ.

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ S ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΡ‚ΡŒ ΠΊΡ€ΠΈΠ²Ρ‹Π΅ ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ слоТныС Ρ„ΠΎΡ€ΠΌΡ‹.

Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π€ΠΎΡ‚ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния

Π§ΠΈΡ‚Π°ΠΉΡ‚Π΅ Ρ‚Π°ΠΊΠΆΠ΅ Когда Ρ€ΠΎΠ±ΠΎΡ‚Ρ‹ замСнят Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠΎΠ² Π½Π° Ρ€Ρ‹Π½ΠΊΠ΅ Ρ‚Ρ€ΡƒΠ΄Π°: большая обзорная ΡΡ‚Π°Ρ‚ΡŒΡ ΠΎ профСссии с коммСнтариями экспСртов.

Как Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с тСкстом с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ SVG

Π€ΠΎΡ€ΠΌΠ°Ρ‚ SVG позволяСт Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с тСкстом. Для этого примСняСтся Ρ‚Π΅Π³

Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π€ΠΎΡ‚ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния

ΠžΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ тСкст создан с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ SVG

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойства stroke ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ Ρ†Π²Π΅Ρ‚ ΡˆΡ€ΠΈΡ„Ρ‚Π°. ΠŸΠΎΠ·ΠΈΡ†ΠΈΡ тСкста Π½Π° страницС опрСдСляСтся ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Π°ΠΌΠΈ x ΠΈ y. Π’ свойствах stroke ΠΈ fill ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Ρ‹.

Как ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ свойствами ΡˆΡ€ΠΈΡ„Ρ‚Π° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ svg

SVG позволяСт ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌΠΈ свойствами ΡˆΡ€ΠΈΡ„Ρ‚Π°:

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π΅Π³Π° ΠΌΠΎΠΆΠ½ΠΎ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΎΠ΄Π½ΠΎ ΠΈΠ»ΠΈ нСсколько слов Π² тСкстС ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΈΡ… свойства.

Π’Π°ΠΊΠΆΠ΅ SVG позволяСт ΠΏΠ΅Ρ€Π΅Π²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Ρ‚ΡŒ тСкст, ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ Π»ΠΈΠ½ΠΈΠΈ ΠΈ заполнСния Π±ΡƒΠΊΠ² ΠΈ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ трансформации. НиТС ΠΏΡ€ΠΈΠΌΠ΅Ρ€ создания ΠΊΠΎΠ½Ρ‚ΡƒΡ€Π° тСкста, написанного справа Π½Π°Π»Π΅Π²ΠΎ. ПослСднСС ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойств direction ΠΈ unicode-bidi.

Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π€ΠΎΡ‚ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния

ΠΌΠΎΠΆΠ½ΠΎ ΡΠ²ΡΠ·Ρ‹Π²Π°Ρ‚ΡŒ тСкст с путями. Π­Ρ‚ΠΎ дСлаСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° xlink:href. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΊΠΎΠ΄Π° Π½ΠΈΠΆΠ΅.

Как ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ CSS Π² SVG

Код CSS ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ ΠΈΠ½Π»Π°ΠΉΠ½ Π² ΠΊΠΎΠ΄Π΅ SVG. Π‘ΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€.

Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΈΡΠ°Ρ‚ΡŒ CSS Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… Ρ„Π°ΠΉΠ»Π°Ρ… ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ стили ΠΊ элСмСнтам SVG. НапримСр, Π² SVG ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ класс.

Π’ CSS ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с этим классом.

ВмСсто Π·Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ: ΠΊΠ°ΠΊ Π΄Π΅Π»Π° с SVG 2.0

SVG 2.0 Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎ разрабатываСтся. ΠŸΡ€ΠΎΠ΄ΡƒΠΊΡ‚ находится Π² стадии ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ вСрсии (Candidate Recommendation). Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ Π½Π΅ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ SVG 2.0. Π’ Π½ΠΎΠ²ΠΎΠΉ вСрсии Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Ρ‹ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ возмоТности HTML 5 ΠΈ WOFF (web open font format). Π‘Π»Π΅Π΄ΠΈΡ‚ΡŒ Π·Π° стадиями Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ SVG 2.0 ΠΌΠΎΠΆΠ½ΠΎ Π½Π° сайтС W3C.

Адаптированный ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄ ΡΡ‚Π°Ρ‚ΡŒΠΈ All you need to know about SVG on the web by Richard Mattka. МнСниС Π°Π²Ρ‚ΠΎΡ€Π° ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½ΠΎΠΉ ΠΏΡƒΠ±Π»ΠΈΠΊΠ°Ρ†ΠΈΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ Π½Π΅ ΡΠΎΠ²ΠΏΠ°Π΄Π°Ρ‚ΡŒ с ΠΌΠ½Π΅Π½ΠΈΠ΅ΠΌ администрации Β«Π₯СкслСта».

Никогда Π½Π΅ ΠΎΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°ΠΉΡ‚Π΅ΡΡŒ: Π’ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ говорят, Ρ‡Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ постоянно ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ Π΄Π°ΠΆΠ΅ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ просто Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Π½Π° мСстС. Π Π°Π·Π²ΠΈΠ²Π°ΠΉΡ‚Π΅ΡΡŒ с Π½Π°ΠΌΠΈ β€” Π½Π° Π₯СкслСтС Π΅ΡΡ‚ΡŒ сотни курсов ΠΏΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ Π½Π° Ρ€Π°Π·Π½Ρ‹Ρ… языках ΠΈ тСхнологиях

Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния. Π€ΠΎΡ‚ΠΎ Как Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg изобраТСния

Π‘ нуля Π΄ΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°. Π’ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅ΠΌ дСньги, Ссли Π½Π΅ ΡƒΠ΄Π°Π»ΠΎΡΡŒ Π½Π°ΠΉΡ‚ΠΈ Ρ€Π°Π±ΠΎΡ‚Ρƒ.

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

О Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ SVG

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

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

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

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

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

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

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

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

ΠŸΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ эффСктов SVG

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

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

Если примСняСтся эффСкт Β«Π€ΠΈΠ»ΡŒΡ‚Ρ€ SVGΒ», Illustrator ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ Ρ€Π°ΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Π½ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ эффСкта Π½Π° ΠΌΠΎΠ½Ρ‚Π°ΠΆΠ½ΠΎΠΉ области. МоТно ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Ρ‹, измСняя ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ растрирования Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅. Если ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ нСсколько эффСктов, эффСкт SVG Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ послСдним. Π”Ρ€ΡƒΠ³ΠΈΠΌΠΈ словами, ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π² Π½ΠΈΠΆΠ½Π΅ΠΉ части ΠΏΠ°Π»ΠΈΡ‚Ρ€Ρ‹ Β«ΠžΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅Β» (Π½Π°Π΄ записью Β«ΠŸΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒΒ»). Если SVG-эффСкт сопровоТдаСтся Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ эффСктами, Π²Ρ‹Π²ΠΎΠ΄ SVG Π±ΡƒΠ΄Π΅Ρ‚ осущСствлСн Π² Π²ΠΈΠ΄Π΅ растрового ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°.

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *