ΠΊΠ°ΠΊ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ svg Π² html ΠΊΠΎΠ΄

Как ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ Π²ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ SVG

ΠΊΠ°ΠΊ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ svg Π² html ΠΊΠΎΠ΄. 270a6d04ea844a7e87043ad9541dc173. ΠΊΠ°ΠΊ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ svg Π² html ΠΊΠΎΠ΄ Ρ„ΠΎΡ‚ΠΎ. ΠΊΠ°ΠΊ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ svg Π² html ΠΊΠΎΠ΄-270a6d04ea844a7e87043ad9541dc173. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΊΠ°ΠΊ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ svg Π² html ΠΊΠΎΠ΄. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° 270a6d04ea844a7e87043ad9541dc173. SVG β€” это Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ, дословно: ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΠ°Ρ вСкторная Π³Ρ€Π°Ρ„ΠΈΠΊΠ°. ΠœΠ’Π“? SVG! Π’ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Ρ… Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°Ρ… хранится Π½Π΅ само ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π° инструкция ΠΏΠΎ Π΅Π³ΠΎ ΠΏΠΎΡΡ‚Ρ€ΠΎΠ΅Π½ΠΈΡŽ ΠΏΠΎ Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌ ΠΈ ΠΊΡ€ΠΈΠ²Ρ‹ΠΌ.

SVG β€” это Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ, дословно: ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΠ°Ρ вСкторная Π³Ρ€Π°Ρ„ΠΈΠΊΠ°. ΠœΠ’Π“? SVG! Π’ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Ρ… Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°Ρ… хранится Π½Π΅ само ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π° инструкция ΠΏΠΎ Π΅Π³ΠΎ ΠΏΠΎΡΡ‚Ρ€ΠΎΠ΅Π½ΠΈΡŽ ΠΏΠΎ Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌ ΠΈ ΠΊΡ€ΠΈΠ²Ρ‹ΠΌ.

Π’ растровых Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°Ρ… информация ΠΎ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠΌ числС Ρ‚ΠΎΡ‡Π΅ΠΊ изобраТСния ΠΏΠ»ΠΎΡ‚Π½ΠΎ ΡƒΠΏΠ°ΠΊΠΎΠ²Π°Π½Π° Π² Π±ΠΈΠ½Π°Ρ€Π½Ρ‹ΠΉ ΠΊΠΈΡ€ΠΏΠΈΡ‡. Π’ Π½Π΅Π³ΠΎ бСсполСзно Π·Π°Π³Π»ΡΠ΄Ρ‹Π²Π°Ρ‚ΡŒ ΠΈ ΠΌΠ΅Π½ΡΡ‚ΡŒ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π°Ρ… Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ.

Π€ΠΎΡ€ΠΌΠ°Ρ‚ SVG Ρ‚ΠΎΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈ ΠΌΠ΅Π½ΡΡ‚ΡŒ Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π°Ρ… Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ, Π²Ρ€ΠΎΠ΄Π΅ Illustrator, Sketch ΠΈΠ»ΠΈ Inkscape. Но Π΅Ρ‰Ρ‘ ΠΎΠ½ тСкстовый, Π° Π·Π½Π°Ρ‡ΠΈΡ‚ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΊΠ°ΠΊ HTML ΠΈΠ»ΠΈ CSS Π² любом Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅ ΠΊΠΎΠ΄Π°.

Π― Π²Π°ΠΌ большС скаТу: SVG β€” это ΠΊΠ°ΠΊ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Π°Ρ HTML-страница. Когда Π²Ρ‹ вставляСтС SVG, Π²Ρ‹, Π½Π° самом Π΄Π΅Π»Π΅, вставляСтС Π½Π΅ просто ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ, Π° Ρ†Π΅Π»ΡƒΡŽ страницу. Π‘ΠΎ своСй систСмой ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚, Π²ΡŒΡŽΠΏΠΎΡ€Ρ‚ΠΎΠΌ, стилями, скриптами ΠΈ ΡƒΠ΄ΠΈΠ²ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ особСнностями.

Бтилями ΠΈ скриптами, ΠšΠ°Ρ€Π»! Π’ΠΎΡ‚ Π²Π°ΠΌ ΠΈ простая ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°.

Если ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π½Π° SVG ΠΊΠ°ΠΊ Π½Π° ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΡƒΡŽ страницу β€” становится понятнСС, ΠΊΠ°ΠΊΠΎΠΉ способ вставки Π²Π°ΠΌ Π½ΡƒΠΆΠ΅Π½. Π•ΡΡ‚ΡŒ Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ основных ΠΈ Ρƒ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ β€” особСнности.

ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΈ самый простой β€” элСмСнт прямо Π² HTML-ΠΊΠΎΠ΄Π΅. Π­Ρ‚ΠΎ Π² ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠ΅ самый эффСктивный способ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Π»ΡŽΠ±ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ β€” Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ Π·Π°Ρ€Π°Π½Π΅Π΅ Π·Π½Π°ΡŽΡ‚ ΠΏΠΎ HTML-ΠΊΠΎΠ΄Ρƒ, Ρ‡Ρ‚ΠΎ ΠΎΠ½Π° Π΅ΡΡ‚ΡŒ ΠΈ Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‚ Π΅Ρ‘ ΠΏΠΎΠ΄Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ.

ΠœΠΈΠ½ΡƒΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π² Ρ‚Π°ΠΊΠΎΠΌ SVG Π½Π΅ Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ скрипты ΠΈ Π»ΡŽΠ±Ρ‹Π΅ ΠΏΠΎΠΏΡ‹Ρ‚ΠΊΠΈ взаимодСйствия с элСмСнтами Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΎΠ±Ρ€Π΅Ρ‡Π΅Π½Ρ‹. Π€Π°ΠΉΠ» Π±ΡƒΠ΄Π΅Ρ‚ ΠΊΠ°ΠΊ Π·Π° стСклом: ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΌΠΎΠΆΠ½ΠΎ, Π° Ρ‚Ρ€ΠΎΠ³Π°Ρ‚ΡŒ нСльзя. Π₯отя Π²Π½ΡƒΡ‚Ρ€ΠΈ всё ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠ΅ прСкрасно Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ CSS-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.

Π’Π°ΠΊΠΎΠΉ способ Π»ΡƒΡ‡ΡˆΠ΅ всСго ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π½Ρ‹ΠΌ изобраТСниям, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ взаимодСйствиС: Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΡ‹, Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ, схСмы.

Π’Ρ‚ΠΎΡ€ΠΎΠΉ способ β€” фоновая ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° Π² CSS. ΠŸΡ€ΠΈΡ‡Ρ‘ΠΌ Π½Π΅Π²Π°ΠΆΠ½ΠΎ, Π·Π°Π΄Π°Π΄ΠΈΡ‚Π΅ Π²Ρ‹ Π΅Π³ΠΎ элСмСнту, псСвдоэлСмСнту ΠΈΠ»ΠΈ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ вставитС β€” Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π±ΡƒΠ΄Π΅Ρ‚ Ρ‚Π°ΠΊΠΈΠΌ ΠΆΠ΅, ΠΊΠ°ΠΊ с : Π·Π° стСклом, Π½ΠΎ Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚.

Π­Ρ‚ΠΎΡ‚ способ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для ΠΎΡ„ΠΎΡ€ΠΌΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ взаимодСйствиС: Ρ„ΠΎΠ½Ρ‹, ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈ другая ΠΌΠ΅Π»ΠΎΡ‡ΡŒ.

Π’Ρ€Π΅Ρ‚ΠΈΠΉ способ, Ρ‡Π΅Ρ€Π΅Π·

Π—Π° Π³ΠΈΠ±ΠΊΠΎΡΡ‚ΡŒ приходится ΠΏΠ»Π°Ρ‚ΠΈΡ‚ΡŒ: ΠΈΠ·-Π·Π° Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ это ΡƒΠΆΠ΅ Π½Π΅ просто Π³Ρ€Π°Ρ„ΠΈΠΊΠ° ΠΈ Ρ‚Π°ΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΡ€ΠΈΠΏΡ‚ΠΎΠ²Π°Ρ‚ΡŒ, ΠΊ Ρ‚Π°ΠΊΠΎΠΌΡƒ способу ΠΏΡ€Π΅Π΄ΡŠΡΠ²Π»ΡΡŽΡ‚ΡΡ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ трСбования бСзопасности. НапримСр, ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ с Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ Π΄ΠΎΠΌΠ΅Π½Π° просто Ρ‚Π°ΠΊ ΡƒΠΆΠ΅ Π½Π΅ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ.

Π­Ρ‚ΠΎΡ‚ способ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚, ΠΊΠΎΠ³Π΄Π° Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΡƒΡŽ-Ρ‚ΠΎ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΡƒΡŽ Π³Ρ€Π°Ρ„ΠΈΠΊΡƒ: ΠΈΠ³Ρ€ΡƒΡˆΠΊΠΈ, Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ ΠΈ всякоС слоТноС. Достаточно Π²ΡΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΊΠΎΠ³Π΄Π°-Ρ‚ΠΎ Ρ‡Π΅Ρ€Π΅Π· Π²ΡΡ‚Π°Π²Π»ΡΠ»ΠΈΡΡŒ Flash-Ρ€ΠΎΠ»ΠΈΠΊΠΈ. БпроситС Ρƒ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»Π΅ΠΉ, Ρ‡Ρ‚ΠΎ это Ρ‚Π°ΠΊΠΎΠ΅.

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

Π‘ Ρ‚Π°ΠΊΠΈΠΌ SVG ΠΌΠΎΠΆΠ½ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚ΠΎ ΠΆΠ΅, Ρ‡Ρ‚ΠΎ ΠΈ с ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΌΠΈ HTML-элСмСнтами: стили, скрипты β€” Π½Ρƒ, Π²Ρ‹ сами Π·Π½Π°Π΅Ρ‚Π΅. МоТно, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ Π·Π°Π»ΠΈΠ²ΠΊΠΈ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΈ ΠΎΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ всё Π² ΠΎΠ±Ρ‰ΠΈΡ… стилях.

ΠœΠΈΠ½ΡƒΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π½Π΅ ΠΊΡΡˆΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ ΠΎΡ‚ страницы β€” хотя это ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ±ΠΎΠΉΡ‚ΠΈ Ρ‡Π΅Ρ€Π΅Π· символы ΠΈ ΡŽΠ·Ρ‹, Π½ΠΎ это длинная история, ΠΌΡ‹ ΠΎΠ± этом Π΅Ρ‰Ρ‘ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ.

SVG Π³ΠΎΡ€Π°Π·Π΄ΠΎ большС, Ρ‡Π΅ΠΌ просто Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ β€” это ΠΌΡ‹ с Π²Π°ΠΌΠΈ ΡƒΠΆΠ΅ поняли. Π₯ΠΎΡ‚ΠΈΡ‚Π΅ Π·Π°ΠΊΠΎΠΏΠ°Ρ‚ΡŒΡΡ Π³Π»ΡƒΠ±ΠΆΠ΅? Π§ΠΈΡ‚Π°ΠΉΡ‚Π΅ ΡΡ‚Π°Ρ‚ΡŒΠΈ Π‘Π°Ρ€Ρ‹ Π‘ΡƒΠ°ΠΉΠ΄Π°Π½, это ΠΏΠΎΠΊΠ° Π»ΡƒΡ‡ΡˆΠ΅Π΅, ΠΈΠ· Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ. ВсС ссылки Π΅ΡΡ‚ΡŒ Π² описании ΠΊ Π²ΠΈΠ΄Π΅ΠΎ.

Π’ ΠΈΡ‚ΠΎΠ³Π΅: способов ΠΊΡƒΡ‡Π° ΠΈ всС Ρ‡Π΅ΠΌ-Ρ‚ΠΎ Ρ…ΠΎΡ€ΠΎΡˆΠΈ. Π’Ρ‹Π±ΠΈΡ€Π°ΠΉΡ‚Π΅ подходящий ΠΏΠΎΠ΄ ваши Π·Π°Π΄Π°Ρ‡ΠΈ, Π½ΠΎ всСгда Π½Π°Ρ‡ΠΈΠ½Π°ΠΉΡ‚Π΅ с самых простых: ΠΈ Ρ„ΠΎΠ½Π°, Π° ΠΏΠΎΡ‚ΠΎΠΌ ΡƒΠΆΠ΅ услоТняйтС β€” Ссли Π½Π΅ Ρ…Π²Π°Ρ‚Π°Π΅Ρ‚.

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

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ SVG Π½Π° сайтС

ΠΊΠ°ΠΊ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ svg Π² html ΠΊΠΎΠ΄. a568a437cb904033b72f07018e60caf3. ΠΊΠ°ΠΊ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ svg Π² html ΠΊΠΎΠ΄ Ρ„ΠΎΡ‚ΠΎ. ΠΊΠ°ΠΊ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ svg Π² html ΠΊΠΎΠ΄-a568a437cb904033b72f07018e60caf3. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΊΠ°ΠΊ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ svg Π² html ΠΊΠΎΠ΄. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° a568a437cb904033b72f07018e60caf3. SVG β€” это Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ, дословно: ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΠ°Ρ вСкторная Π³Ρ€Π°Ρ„ΠΈΠΊΠ°. ΠœΠ’Π“? SVG! Π’ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Ρ… Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°Ρ… хранится Π½Π΅ само ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π° инструкция ΠΏΠΎ Π΅Π³ΠΎ ΠΏΠΎΡΡ‚Ρ€ΠΎΠ΅Π½ΠΈΡŽ ΠΏΠΎ Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌ ΠΈ ΠΊΡ€ΠΈΠ²Ρ‹ΠΌ.

ΠžΡΡ‚Π°Π²ΠΈΠΌ Π·Π° скобками вопрос ΠΎ цСлСсообразности использования SVG Π½Π° сайтС. ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ сам для сСбя Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΡΡ‚ΡŒ этой Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ. Π’Π΅ΠΌ Π±ΠΎΠ»Π΅Π΅ Ρ‡Ρ‚ΠΎ эта Ρ‚Π΅ΠΌΠ° поднималась ΡƒΠΆΠ΅ Π½Π΅ΠΎΠ΄Π½ΠΎΠΊΡ€Π°Ρ‚Π½ΠΎ.

БСйчас ΠΌΡ‹ рассмотрим ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ встраивания SVG, ΠΈΡ… ΠΏΠ»ΡŽΡΡ‹ ΠΈ минусы, Π° Ρ‚Π°ΠΊ ΠΆΠ΅ возмоТности манипулирования элСмСнтами SVG.

Π‘Ρ‚Π°Ρ‚ΡŒΡ рассчитана Π² ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ Π½Π° Ρ‚Π΅Ρ…, ΠΊΡ‚ΠΎ Π΄ΠΎ сих ΠΏΠΎΡ€ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΡƒΡŽ Π³Ρ€Π°Ρ„ΠΈΠΊΡƒ Π½Π° своих сайтах, Π½ΠΎ ΠΎΡ‡Π΅Π½ΡŒ Ρ…ΠΎΡ‡Π΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΠ΄Π½ΠΎΠΉ Π½ΠΎΠ³ΠΎΠΉ Π² Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΌ настоящСм.
Для Π»ΡŽΠ±ΠΎΠΏΡ‹Ρ‚Π½Ρ‹Ρ… сразу ΠΏΡ€ΠΈΠ²Π΅Π΄Ρƒ ΡΠ²ΠΎΠ΄Π½ΡƒΡŽ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ:

Π˜ΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚IMG, background-imageObjectInline
CSS ΠœΠ°Π½ΠΈΠΏΡƒΠ»ΡΡ†ΠΈΠΈΠ§Π°ΡΡ‚ΠΈΡ‡Π½ΠΎ 1НСтЧастично 2Π”Π°
JS манипуляцииЧастично 1НСтДаДа
SVG анимацииНСтДаДаДа
Π˜Π½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ SVG анимацииНСтНСтДаДа

1 МоТно ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ†Π²Π΅Ρ‚, Ρ€Π°Π·ΠΌΠ΅Ρ€, Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈ ΠΏΡ€ΠΎΡ‡Π΅Π΅ стили ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠ³ΠΎ тСкста
2 Π‘Ρ‚ΠΈΠ»ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ прописаны ΠΈΠ»ΠΈ Π² самом SVG Ρ„Π°ΠΉΠ»Π΅, ΠΈΠ»ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½Ρ‹ внСшним стилСм Π² SVG Π² Π½Π°Ρ‡Π°Π»Π΅ Ρ„Π°ΠΉΠ»Π°:

По ΠΏΡ€Π°Π²Π΄Π΅ говоря стили прописанныС Π²Π½ΡƒΡ‚Ρ€ΠΈ SVG Ρ‚Π°ΠΊ ΠΆΠ΅ Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΈ ΠΏΡ€ΠΈ использовании Ρ‚Π΅Π³Π° IMG ΠΈΠ»ΠΈ background-image, Π½ΠΎ Π² этом Π½Π΅Ρ‚ Π½ΠΈΠΊΠ°ΠΊΠΎΠ³ΠΎ смысла.

Π˜ΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚

ΠŸΠ»ΡŽΡΡ‹ ΠΈ минусы Ρ‚Π°ΠΊΠΎΠ³ΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π°:
+ ΠΈΠΊΠΎΠ½ΠΊΠ° Π²Π΅Π΄Π΅Ρ‚ сСбя ΠΊΠ°ΠΊ символ ΡˆΡ€ΠΈΡ„Ρ‚Π°, ΠΈ всС ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°ΡŽΡ‚ΡΡ Ρ‚Π°ΠΊ ΠΆΠ΅ Ρ‡Π΅Ρ€Π΅Π· CSS (Ρ€Π°Π·ΠΌΠ΅Ρ€, Ρ†Π²Π΅Ρ‚, Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈ ΠΏΡ€ΠΎΡ‡Π΅Π΅);
+ СдинствСнный способ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‰ΠΈΠΉ Π² IE 8 Π±Π΅Π· Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… манипуляций;
– всС элСмСнты SVG Ρ„Π°ΠΉΠ»Π° ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΡŽΡ‚ΡΡ Π² ΠΎΠ΄ΠΈΠ½ символ, поэтому ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ ΠΈΠΌ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ CSS ΠΈΠ»ΠΈ JS ΠΌΠΎΠΆΠ½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊΠ°ΠΊ Π΅Π΄ΠΈΠ½Ρ‹ΠΌ Ρ†Π΅Π»Ρ‹ΠΌ;
– ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½ΠΎΡ†Π²Π΅Ρ‚Π½Ρ‹Π΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ;
– ΠΏΡ€ΠΈ сбоС Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ ΡˆΡ€ΠΈΡ„Ρ‚Π° Ρƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π»ΠΈΠ±ΠΎ Π½Π΅ отобразятся ΠΈΠΊΠΎΠ½ΠΊΠΈ совсСм, Π»ΠΈΠ±ΠΎ, ΠΏΡ€ΠΈ совпадСнии ΠΊΠΎΠ΄ΠΎΠ² ΠΈΠΊΠΎΠ½ΠΎΠΊ с символами юникода, отобразятся ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚ΡƒΡŽΡ‰ΠΈΠ΅ символы.

SVG ΠΊΠ°ΠΊ OBJECT

ΠΊΠ°ΠΊ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ svg Π² html ΠΊΠΎΠ΄. 12358d2655064085b871dcac6817b422. ΠΊΠ°ΠΊ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ svg Π² html ΠΊΠΎΠ΄ Ρ„ΠΎΡ‚ΠΎ. ΠΊΠ°ΠΊ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ svg Π² html ΠΊΠΎΠ΄-12358d2655064085b871dcac6817b422. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΊΠ°ΠΊ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ svg Π² html ΠΊΠΎΠ΄. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° 12358d2655064085b871dcac6817b422. SVG β€” это Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ, дословно: ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΠ°Ρ вСкторная Π³Ρ€Π°Ρ„ΠΈΠΊΠ°. ΠœΠ’Π“? SVG! Π’ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Ρ… Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°Ρ… хранится Π½Π΅ само ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π° инструкция ΠΏΠΎ Π΅Π³ΠΎ ΠΏΠΎΡΡ‚Ρ€ΠΎΠ΅Π½ΠΈΡŽ ΠΏΠΎ Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌ ΠΈ ΠΊΡ€ΠΈΠ²Ρ‹ΠΌ.
К соТалСнию (ΠΈΠ»ΠΈ ΠΊ ΡΡ‡Π°ΡΡ‚ΡŒΡŽ) codepen ΠΈ jsfiddle Π±Π»ΠΎΠΊΠΈΡ€ΡƒΡŽΡ‚ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ Π²Π½Π΅ΡˆΠ½ΠΈΡ… object Π² цСлях бСзопасности.
ВстраиваниС выглядит ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

ΠžΠ±ΡŠΠ΅ΠΊΡ‚ встраиваСт элмСмСнт Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° data Π½Π°ΠΏΠΎΠ΄ΠΎΠ±ΠΈΠ΅ iframe, добавляя Π²Π½ΡƒΡ‚Ρ€ΡŒ сСбя Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΠΎΠ³ΠΎ Ρ„Π°ΠΉΠ»Π°, поэтому ΠΊ элСмСнтам ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ±Ρ€Π°Ρ‰Π°Ρ‚ΡŒΡΡ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ JS, Π½ΠΎ Π½Π΅ совсСм ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

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

ΠΊΠ°ΠΊ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ svg Π² html ΠΊΠΎΠ΄. 9d4df228fa4a4dea8e379467b41d103c. ΠΊΠ°ΠΊ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ svg Π² html ΠΊΠΎΠ΄ Ρ„ΠΎΡ‚ΠΎ. ΠΊΠ°ΠΊ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ svg Π² html ΠΊΠΎΠ΄-9d4df228fa4a4dea8e379467b41d103c. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΊΠ°ΠΊ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ svg Π² html ΠΊΠΎΠ΄. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° 9d4df228fa4a4dea8e379467b41d103c. SVG β€” это Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ, дословно: ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΠ°Ρ вСкторная Π³Ρ€Π°Ρ„ΠΈΠΊΠ°. ΠœΠ’Π“? SVG! Π’ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Ρ… Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°Ρ… хранится Π½Π΅ само ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π° инструкция ΠΏΠΎ Π΅Π³ΠΎ ΠΏΠΎΡΡ‚Ρ€ΠΎΠ΅Π½ΠΈΡŽ ΠΏΠΎ Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌ ΠΈ ΠΊΡ€ΠΈΠ²Ρ‹ΠΌ.

Но ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Ρ€Π°Π½ΡΡ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ CSS Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ‚Π°ΠΊ:

ΠŸΠ»ΡŽΡΡ‹ ΠΈ минусы Ρ‚Π°ΠΊΠΎΠ³ΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π°:
+ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ внСшний CSS Ρ„Π°ΠΉΠ» для управлСния стилями;
+ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ SVG Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΈ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Ρ‹;
+ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ;
– для IE 8 ΠΈ Π½ΠΈΠΆΠ΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠ° Π·Π°ΠΌΠ΅Π½Π° Π½Π° растровоС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.

SVG Π² IMG ΠΈΠ»ΠΈ background-image

Оба способа встраивания Ρ‡Π΅ΠΌ-Ρ‚ΠΎ ΠΏΠΎΡ…ΠΎΠΆΠΈ Π½Π° встраиваниС ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ тэга object, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ нСльзя ΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΈ высоты ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°, Π½ΠΎ ΠΈΠΌΠ΅ΡŽΡ‚ большС ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠΉ.
ΠŸΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹Π΅ Π² SVG внСшниС стили Π½Π΅ Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ, ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚ΡŒΡΡ ΠΊ элСмСнтам Ρ‡Π΅Ρ€Π΅Π· JS Ρ‚Π°ΠΊ ΠΆΠ΅ Π½Π΅ получится. Π˜Π½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π² SVG Ρ‚ΠΎΠΆΠ΅ Π½Π΅ ΡΡ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚. А ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ с IE 8 ΠΈ Π½ΠΈΠΆΠ΅ Ρ‚Π°ΠΊ ΠΆΠ΅ ΠΎΡΡ‚Π°ΡŽΡ‚ΡΡ.
Но SVG Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ, Π² ΠΎΠ±ΠΎΠΈΡ… случаях.
Π’ случаС с IMG Π²Ρ‚Ρ€Π°ΠΈΠ²Π°Π½ΠΈΠ΅ выглядит ΠΊΠ°ΠΊ обычная ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°:

Π’ случаС с background-image ΠΊΠ°ΠΊ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ Π±Π»ΠΎΠΊ:

Π’Π°ΠΊ ΠΆΠ΅ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ background-image ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ спрайты, ΠΊΠ°ΠΊ с png изобраТСниями, Π° ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ background-size:

Учитывая Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚ людСй c экранами device-pixel-ratio ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π²Ρ‹ΡˆΠ΅ 1 ΠΈ ΠΈΡ… устройства Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ svg стрСмится ΠΊ Π½ΡƒΠ»ΡŽ(Ссли Ρ‚Π°ΠΊΠΈΠ΅ Π²ΠΎΠΎΠ±Ρ‰Π΅ Π΅ΡΡ‚ΡŒ), Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠ΅Π΄ΠΈΠ° выраТСния для ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ svg, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для Π½ΠΈΡ…, Π° для ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ png Π²Π΅Ρ€ΡΠΈΡŽ:

ΠŸΠ»ΡŽΡΡ‹ ΠΈ минусы этих ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΎΠ²:
+ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ SVG Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΈ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Ρ‹;
+ Π² случаС с background-image ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ SVG спрайты;
– нСльзя ΠΌΠ΅Π½ΡΡ‚ΡŒ свойства элСмСнтов SVG Ρ‡Π΅Ρ€Π΅Π· CSS ΠΈΠ»ΠΈ JS;
– Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ;
– для IE 8 ΠΈ Π½ΠΈΠΆΠ΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠ° Π·Π°ΠΌΠ΅Π½Π° Π½Π° растровоС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.

Inline SVG

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

НапримСр имСя Π½Π°Π±ΠΎΡ€ ΠΈΠΊΠΎΠ½ΠΎΠΊ Π² SVG Ρ„Π°ΠΉΠ»Π΅, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ… ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎ простой конструкциСй Π²ΠΈΠ΄Π°:

Π³Π΄Π΅ some_svg_element_id id элСмСнта Π²Π½ΡƒΡ‚Ρ€ΠΈ исходного SVG Ρ„Π°ΠΉΠ»Π°.

К ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ взятому элСмСнту ΠΌΠΎΠΆΠ½ΠΎ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ SVG трансформации:

Но Ссли Π²Π½ΡƒΡ‚Ρ€ΠΈ исходного SVG ΠΊ элСмСнту Π±Ρ‹Π»Π° ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½Π° интСрактивная анимация, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΏΠΎ ΠΊΠ»ΠΈΠΊΡƒ, ΠΊΠ°ΠΊ Π² Π΄Π΅ΠΌΠΎ Π²Ρ‹ΡˆΠ΅, Ρ‚ΠΎ ΠΏΡ€ΠΈ Π΄ΡƒΠ±Π»ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° анимация Π±ΡƒΠ΄Π΅Ρ‚ ΡΡ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ Π½Π° всСх элСмСнтах ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ.
SVG Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΈ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Ρ‹ это Ρ‚Π΅ΠΌΠ° для ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΉ ΡΡ‚Π°Ρ‚ΡŒΠΈ, поэтому ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΡƒΡΡŒ лишь ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠΌ SVG Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π° (ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΠΎ SVG Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°Ρ…), ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠΌ SVG Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ (ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΠΎ SVG анимациях).
Π‘ обСсСпСчСниСм работоспособности для IE 8 ΠΈ Π½ΠΈΠΆΠ΅ всС нСсколько слоТнСС, Ρ‡Π΅ΠΌ Π² Π΄Ρ€ΡƒΠ³ΠΈΡ… Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π°Ρ…. НСобходимо Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ:

ΠŸΠ»ΡŽΡΡ‹ ΠΈ минусы этого ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π°:
+ Π½ΠΈΠΊΠ°ΠΊΠΎΠΉ ΠΏΠΎΠ΄Π³Ρ€ΡƒΠ·ΠΊΠΈ Π²Π½Π΅ΡˆΠ½ΠΈΡ… Ρ„Π°ΠΉΠ»ΠΎΠ²;
+ доступны манипуляции с элСмСнтами SVG Ρ‡Π΅Ρ€Π΅Π· CSS ΠΈ JS;
+ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ SVG Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΈ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Ρ‹;
+ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ;
+ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎΠ³ΠΎ использования элСмСнтов;
– загрязняСтся ΠΊΠΎΠ΄ страницы;
– для IE 8 ΠΈ Π½ΠΈΠΆΠ΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠ° Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ°, ΠΈ Π·Π°ΠΌΠ΅Π½Π° Π½Π° растровоС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.

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

Как Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΡƒ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с SVG

Π£Π·Π½Π°Ρ‘ΠΌ ΠΏΡ€ΠΎ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΡƒΡŽ Π³Ρ€Π°Ρ„ΠΈΠΊΡƒ, добавляСм svg-ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΊ HTML ΠΈ Ρ‚Π²ΠΎΡ€ΠΈΠΌ всякоС-Ρ€Π°Π·Π½ΠΎΠ΅ с ΠΈΡ… Ρ†Π²Π΅Ρ‚ΠΎΠΌ.

Помимо ΠΏΡ€ΠΈΠ²Ρ‹Ρ‡Π½Ρ‹Ρ… растровых Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠ² (JPG, PNG, GIF), Π² Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ ΡˆΠΈΡ€ΠΎΠΊΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹ΠΉ β€” SVG.

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

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

Π’ΠΎ Π΅ΡΡ‚ΡŒ Π² этом Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ хранится Π½Π΅ сама ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°, Π° инструкции для Π΅Ρ‘ построСния ΠΏΠΎ Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌ ΠΈ ΠΊΡ€ΠΈΠ²Ρ‹ΠΌ. Они написаны Π½Π° языкС Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ SVG, Ρ€Π°ΡΡˆΠΈΡ€ΡΡŽΡ‰Π΅ΠΌ XML.

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

ΠŸΡ€Π΅Π»Π΅ΡΡ‚ΡŒ SVG раскрываСт ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅. Если ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒ растровоС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ свСрх 100%-Π½ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° β€” проявляСтся пиксСлизация: ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ Ρ‚ΠΎΡ‡ΠΊΠΈ ΠΏΡ€Π΅Π²Ρ€Π°Ρ‰Π°ΡŽΡ‚ΡΡ Π² ΠΎΠ΄Π½ΠΎΡ†Π²Π΅Ρ‚Π½Ρ‹Π΅ Π±Π»ΠΎΠΊΠΈ пиксСлСй, Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ областСй становятся ступСнчатыми, ΠΈ Π² Ρ†Π΅Π»ΠΎΠΌ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° выглядит Π½Π΅Π³Π»Π°Π΄ΠΊΠΎ, нСкрасиво.

Если ΠΆΠ΅ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ β€” всС Π΅Π³ΠΎ Π΄Π΅Ρ‚Π°Π»ΠΈ останутся Ρ‡Ρ‘Ρ‚ΠΊΠΈΠΌΠΈ, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ ΠΈΡ… Π²ΠΈΠ΄ΠΈΠΌΠΎΠ΅ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ Π½Π΅ ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡΡ. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ svg-ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ Π½Π° самых Π±ΠΎΠ»ΡŒΡˆΠΈΡ… Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡΡ… Π±Π΅Π· ΠΏΠΎΡ‚Π΅Ρ€ΠΈ качСства β€” ΠΈ просто ΠΈΠ΄Π΅Π°Π»ΡŒΠ½Ρ‹ для Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… сайтов.

Π£ svg-Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ Π΅ΡΡ‚ΡŒ Π΅Ρ‰Ρ‘ ΠΎΠ΄Π½ΠΎ достоинство. Π•Ρ‘ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ HTML ΠΈΠ»ΠΈ CSS ΠΈ ΠΌΠ΅Π½ΡΡ‚ΡŒ Π² любом Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅ ΠΊΠΎΠ΄Π°, ΠΈ Π΄Π°ΠΆΠ΅ Π½Π° Π»Π΅Ρ‚Ρƒ. ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΠΎΠ± этом Π½ΠΈΠΆΠ΅.

И Π½Π°ΠΊΠΎΠ½Π΅Ρ†, ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΡ‡ΠΈΡ… Ρ€Π°Π²Π½Ρ‹Ρ… SVG вСсит Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ мСньшС растровых ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.

НСдостатки SVG

Π˜Ρ… ΠΌΠ°Π»ΠΎ. Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, SVG Π½Π΅ поддСрТиваСтся ΠΎΡ‡Π΅Π½ΡŒ старыми Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ, Π° Π²ΠΎ-Π²Ρ‚ΠΎΡ€Ρ‹Ρ…, Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΉ.

ΠΊΠ°ΠΊ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ svg Π² html ΠΊΠΎΠ΄. 09121017092020 1981d1986ac2666a2d59f066a751393cb797412f. ΠΊΠ°ΠΊ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ svg Π² html ΠΊΠΎΠ΄ Ρ„ΠΎΡ‚ΠΎ. ΠΊΠ°ΠΊ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ svg Π² html ΠΊΠΎΠ΄-09121017092020 1981d1986ac2666a2d59f066a751393cb797412f. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΊΠ°ΠΊ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ svg Π² html ΠΊΠΎΠ΄. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° 09121017092020 1981d1986ac2666a2d59f066a751393cb797412f. SVG β€” это Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ, дословно: ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΠ°Ρ вСкторная Π³Ρ€Π°Ρ„ΠΈΠΊΠ°. ΠœΠ’Π“? SVG! Π’ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Ρ… Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°Ρ… хранится Π½Π΅ само ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π° инструкция ΠΏΠΎ Π΅Π³ΠΎ ΠΏΠΎΡΡ‚Ρ€ΠΎΠ΅Π½ΠΈΡŽ ΠΏΠΎ Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌ ΠΈ ΠΊΡ€ΠΈΠ²Ρ‹ΠΌ.

Автор статСй ΠΏΠΎ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡŽ. ΠŸΡ€Π΅ΠΏΠΎΠ΄Π°Π²Π°Ρ‚Π΅Π»ΡŒ, ΠΌΠ΅Π½Ρ‚ΠΎΡ€, выпускник Skillbox. ЀрилансСр, Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ

Как ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ SVG ΠΊ html-страницС

Π•ΡΡ‚ΡŒ Ρ‚Ρ€ΠΈ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π° добавлСния Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ. Π£ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ свои показания ΠΊ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡŽ.

Π§Π΅Ρ€Π΅Π· Ρ‚Π΅Π³

Π—Π΄Π΅ΡΡŒ всё Ρ‚Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ с растровой Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠΉ:

ΠœΠΈΠ½ΡƒΡ этого способа Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ с Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΌΠΈ элСмСнтами SVG Π½Π΅ получится. Π€Π°ΠΉΠ» Π±ΡƒΠ΄Π΅Ρ‚ ΠΊΠ°ΠΊ Π·Π° стСклом: ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΌΠΎΠΆΠ½ΠΎ, Π° Π²ΠΎΡ‚ Ρ‚Ρ€ΠΎΠ³Π°Ρ‚ΡŒ нСльзя.

Π§Π΅Ρ€Π΅Π· background

Как ΠΈ Π² случаС с растровой Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠΉ, SVG ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ Ρ‡Π΅Ρ€Π΅Π· css-свойство background:

ΠœΠΈΠ½ΡƒΡ Ρ‚ΡƒΡ‚ Ρ‚ΠΎΡ‚ ΠΆΠ΅ самый, Ρ‡Ρ‚ΠΎ ΠΈ Ρƒ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅Π³ΠΎ способа. Π­Ρ‚ΠΎΡ‚ случай ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для Π΄Π΅ΠΊΠΎΡ€Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ (Ρ„ΠΎΠ½Ρ‹, ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈ прочая ΠΌΠ΅Π»ΠΎΡ‡ΡŒ), ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ‚ΠΎΠΆΠ΅ внСшнС ΠΌΠ΅Π½ΡΡ‚ΡŒ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ.

Вставка svg-ΠΊΠΎΠ΄Π° Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ

Π’ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ svg-ΠΊΠΎΠ΄ прямо Π² html-Ρ„Π°ΠΉΠ» β€” это Ρ‚Ρ€Π΅Ρ‚ΠΈΠΉ способ. И для нас самый интСрСсный. Он позволяСт Π½Π΅ просто ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ Π³ΠΎΡ‚ΠΎΠ²ΡƒΡŽ Π³Ρ€Π°Ρ„ΠΈΠΊΡƒ, Π½ΠΎ ΠΈ ΠΌΠ΅Π½ΡΡ‚ΡŒ Π΅Ρ‘ (Ρ‚ΠΎΠ»Ρ‰ΠΈΠ½Ρƒ элСмСнтов, Π·Π°Π»ΠΈΠ²ΠΊΡƒ, ΠΎΠ±Π²ΠΎΠ΄ΠΊΡƒ ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅).

Вакая вставка Π²Ρ‹Ρ€ΡƒΡ‡Π°Π΅Ρ‚, ΠΊΠΎΠ³Π΄Π° ΠΏΡ€ΠΈ взаимодСйствии с ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΎΠΉ Π½ΡƒΠΆΠ½ΠΎ Π΅Ρ‘ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ ΠΌΠΎΠ΄ΠΈΡ„ΠΈΡ†ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ β€” Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΏΠ΅Ρ€Π΅ΠΊΡ€Π°ΡΠΈΡ‚ΡŒ svg-ΠΈΠΊΠΎΠ½ΠΊΡƒ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Ρ‘ курсора.

ΠΠ°ΠΏΡ€ΡΠΌΡƒΡŽ Π½Π° html-страницу (Π² Ρ‚Π΅Π³Π΅ ) Π²ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ ΠΊΠ°ΠΊ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π½Ρ‹Π΅, Ρ‚Π°ΠΊ ΠΈ Π΄Π΅ΠΊΠΎΡ€Π°Ρ‚ΠΈΠ²Π½Ρ‹Π΅ изобраТСния, Π° минус Ρ‚ΡƒΡ‚ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π½Π΅ ΠΊΠ΅ΡˆΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ ΠΎΡ‚ страницы.

Как ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ svg-ΠΈΠΊΠΎΠ½ΠΊΠΈ Ρ‡Π΅Ρ€Π΅Π· CSS

Π’Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΡƒ часто приходится ΠΎΠ±Ρ‹Π³Ρ€Ρ‹Π²Π°Ρ‚ΡŒ Ρ€Π΅Π°ΠΊΡ†ΠΈΡŽ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Ρ‘ ΠΌΡ‹ΡˆΠΊΠΈ. Π’ случаС с svg-ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°ΠΌΠΈ ΠΌΠΎΠΆΠ½ΠΎ просто ΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΈΡ… Ρ†Π²Π΅Ρ‚.

Научимся это Π΄Π΅Π»Π°Ρ‚ΡŒ Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ Β«Π’ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Π΅Β»:

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

Как ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ Π²ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ SVG

ΠΊΠ°ΠΊ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ svg Π² html ΠΊΠΎΠ΄. 20160102 b1fd7ac6 60. ΠΊΠ°ΠΊ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ svg Π² html ΠΊΠΎΠ΄ Ρ„ΠΎΡ‚ΠΎ. ΠΊΠ°ΠΊ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ svg Π² html ΠΊΠΎΠ΄-20160102 b1fd7ac6 60. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΊΠ°ΠΊ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ svg Π² html ΠΊΠΎΠ΄. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° 20160102 b1fd7ac6 60. SVG β€” это Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ, дословно: ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΠ°Ρ вСкторная Π³Ρ€Π°Ρ„ΠΈΠΊΠ°. ΠœΠ’Π“? SVG! Π’ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Ρ… Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°Ρ… хранится Π½Π΅ само ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π° инструкция ΠΏΠΎ Π΅Π³ΠΎ ΠΏΠΎΡΡ‚Ρ€ΠΎΠ΅Π½ΠΈΡŽ ΠΏΠΎ Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌ ΠΈ ΠΊΡ€ΠΈΠ²Ρ‹ΠΌ.

Как ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ Π²ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ SVG? β€” ΡΠΏΡ€Π°ΡˆΠΈΠ²Π°Π΅Ρ‚ наша Π·Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΈΡ†Π° Π€Π°Ρ€Π°. ΠŸΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ³ΠΎ способа Π½Π΅Ρ‚, Π€Π°Ρ€Π°, Π΅ΡΡ‚ΡŒ подходящиС. Π”Π°Π²Π°ΠΉΡ‚Π΅ разбСрёмся.

SVG β€” это Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ, дословно: ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΠ°Ρ вСкторная Π³Ρ€Π°Ρ„ΠΈΠΊΠ°. ΠœΠ’Π“? SVG! Π’ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Ρ… Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°Ρ… хранится Π½Π΅ само ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π° инструкция ΠΏΠΎ Π΅Π³ΠΎ ΠΏΠΎΡΡ‚Ρ€ΠΎΠ΅Π½ΠΈΡŽ ΠΏΠΎ Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌ ΠΈ ΠΊΡ€ΠΈΠ²Ρ‹ΠΌ.

Π’ растровых Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°Ρ… информация ΠΎ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠΌ числС Ρ‚ΠΎΡ‡Π΅ΠΊ изобраТСния ΠΏΠ»ΠΎΡ‚Π½ΠΎ ΡƒΠΏΠ°ΠΊΠΎΠ²Π°Π½Π° Π² Π±ΠΈΠ½Π°Ρ€Π½Ρ‹ΠΉ ΠΊΠΈΡ€ΠΏΠΈΡ‡. Π’ Π½Π΅Π³ΠΎ бСсполСзно Π·Π°Π³Π»ΡΠ΄Ρ‹Π²Π°Ρ‚ΡŒ ΠΈ ΠΌΠ΅Π½ΡΡ‚ΡŒ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π°Ρ… Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ.

Π€ΠΎΡ€ΠΌΠ°Ρ‚ SVG Ρ‚ΠΎΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈ ΠΌΠ΅Π½ΡΡ‚ΡŒ Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π°Ρ… Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ, Π²Ρ€ΠΎΠ΄Π΅ Illustrator, Sketch ΠΈΠ»ΠΈ Inkscape. Но Π΅Ρ‰Ρ‘ ΠΎΠ½ тСкстовый, Π° Π·Π½Π°Ρ‡ΠΈΡ‚ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΊΠ°ΠΊ HTML ΠΈΠ»ΠΈ CSS Π² любом Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅ ΠΊΠΎΠ΄Π°.

Π― Π²Π°ΠΌ большС скаТу: SVG β€” это ΠΊΠ°ΠΊ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Π°Ρ HTML-страница. Когда Π²Ρ‹ вставляСтС SVG, Π²Ρ‹, Π½Π° самом Π΄Π΅Π»Π΅, вставляСтС Π½Π΅ просто ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ, Π° Ρ†Π΅Π»ΡƒΡŽ страницу. Π‘ΠΎ своСй систСмой ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚, Π²ΡŒΡŽΠΏΠΎΡ€Ρ‚ΠΎΠΌ, стилями, скриптами ΠΈ ΡƒΠ΄ΠΈΠ²ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ особСнностями.

Бтилями ΠΈ скриптами, ΠšΠ°Ρ€Π»! Π’ΠΎΡ‚ Π²Π°ΠΌ ΠΈ простая ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°.

Если ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π½Π° SVG ΠΊΠ°ΠΊ Π½Π° ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΡƒΡŽ страницу β€” становится понятнСС, ΠΊΠ°ΠΊΠΎΠΉ способ вставки Π²Π°ΠΌ Π½ΡƒΠΆΠ΅Π½. Π•ΡΡ‚ΡŒ Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ основных ΠΈ Ρƒ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ β€” особСнности.

ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΈ самый простой β€” элСмСнт img прямо Π² HTML-ΠΊΠΎΠ΄Π΅. Π­Ρ‚ΠΎ Π² ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠ΅ самый эффСктивный способ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Π»ΡŽΠ±ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ β€” Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ Π·Π°Ρ€Π°Π½Π΅Π΅ Π·Π½Π°ΡŽΡ‚ ΠΏΠΎ HTML-ΠΊΠΎΠ΄Ρƒ, Ρ‡Ρ‚ΠΎ ΠΎΠ½Π° Π΅ΡΡ‚ΡŒ ΠΈ Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‚ Π΅Ρ‘ ΠΏΠΎΠ΄Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ.

ΠœΠΈΠ½ΡƒΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π² Ρ‚Π°ΠΊΠΎΠΌ SVG Π½Π΅ Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ скрипты ΠΈ Π»ΡŽΠ±Ρ‹Π΅ ΠΏΠΎΠΏΡ‹Ρ‚ΠΊΠΈ взаимодСйствия с элСмСнтами Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΎΠ±Ρ€Π΅Ρ‡Π΅Π½Ρ‹. Π€Π°ΠΉΠ» Π±ΡƒΠ΄Π΅Ρ‚ ΠΊΠ°ΠΊ Π·Π° стСклом: ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΌΠΎΠΆΠ½ΠΎ, Π° Ρ‚Ρ€ΠΎΠ³Π°Ρ‚ΡŒ нСльзя. Π₯отя Π²Π½ΡƒΡ‚Ρ€ΠΈ всё ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠ΅ прСкрасно Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ CSS-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.

Π’Π°ΠΊΠΎΠΉ способ Π»ΡƒΡ‡ΡˆΠ΅ всСго ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π½Ρ‹ΠΌ изобраТСниям, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ взаимодСйствиС: Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΡ‹, Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ, схСмы.

Π’Ρ‚ΠΎΡ€ΠΎΠΉ способ β€” фоновая ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° Π² CSS. ΠŸΡ€ΠΈΡ‡Ρ‘ΠΌ Π½Π΅Π²Π°ΠΆΠ½ΠΎ, Π·Π°Π΄Π°Π΄ΠΈΡ‚Π΅ Π²Ρ‹ Π΅Π³ΠΎ элСмСнту, псСвдоэлСмСнту ΠΈΠ»ΠΈ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ вставитС β€” Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π±ΡƒΠ΄Π΅Ρ‚ Ρ‚Π°ΠΊΠΈΠΌ ΠΆΠ΅, ΠΊΠ°ΠΊ с img: Π·Π° стСклом, Π½ΠΎ Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚.

Π­Ρ‚ΠΎΡ‚ способ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для ΠΎΡ„ΠΎΡ€ΠΌΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ взаимодСйствиС: Ρ„ΠΎΠ½Ρ‹, ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈ другая ΠΌΠ΅Π»ΠΎΡ‡ΡŒ.

Π’Ρ€Π΅Ρ‚ΠΈΠΉ способ, Ρ‡Π΅Ρ€Π΅Π· object, Π½Π°ΠΊΠΎΠ½Π΅Ρ†-Ρ‚ΠΎ Π²Ρ‹Π±ΠΈΠ²Π°Π΅Ρ‚ стСкло ΠΌΠ΅ΠΆΠ΄Ρƒ страницСй ΠΈ внутрСнностями SVG-Ρ„Π°ΠΉΠ»Π°. Π Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ скрипты, взаимодСйствиС, анимация β€” Ссли ΠΎΠ½ΠΈ описаны Π²Π½ΡƒΡ‚Ρ€ΠΈ SVG. ΠœΠ΅ΠΆΠ΄Ρƒ Ρ‚Π΅Π³Π°ΠΌΠΈ object ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ фолбэк, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ покаТСтся, Ссли Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π½Π΅ Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ Π½Π° SVG.

На самом Π΄Π΅Π»Π΅, вмСсто object ΠΌΠΎΠΆΠ½ΠΎ Π΄Π°ΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ iframe, ΠΊΠ°ΠΊ Ссли Π±Ρ‹ Π²Ρ‹ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΡƒΡŽ страницу. Но object Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π»ΡƒΡ‡ΡˆΠ΅ ΠΈ подстраиваСтся ΠΏΠΎΠ΄ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ.

Π—Π° Π³ΠΈΠ±ΠΊΠΎΡΡ‚ΡŒ приходится ΠΏΠ»Π°Ρ‚ΠΈΡ‚ΡŒ: ΠΈΠ·-Π·Π° Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ это ΡƒΠΆΠ΅ Π½Π΅ просто Π³Ρ€Π°Ρ„ΠΈΠΊΠ° ΠΈ Ρ‚Π°ΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΡ€ΠΈΠΏΡ‚ΠΎΠ²Π°Ρ‚ΡŒ, ΠΊ Ρ‚Π°ΠΊΠΎΠΌΡƒ способу ΠΏΡ€Π΅Π΄ΡŠΡΠ²Π»ΡΡŽΡ‚ΡΡ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ трСбования бСзопасности. НапримСр, ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ с Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ Π΄ΠΎΠΌΠ΅Π½Π° просто Ρ‚Π°ΠΊ ΡƒΠΆΠ΅ Π½Π΅ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ.

Π­Ρ‚ΠΎΡ‚ способ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚, ΠΊΠΎΠ³Π΄Π° Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΡƒΡŽ-Ρ‚ΠΎ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΡƒΡŽ Π³Ρ€Π°Ρ„ΠΈΠΊΡƒ: ΠΈΠ³Ρ€ΡƒΡˆΠΊΠΈ, Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ ΠΈ всякоС слоТноС. Достаточно Π²ΡΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΊΠΎΠ³Π΄Π°-Ρ‚ΠΎ Ρ‡Π΅Ρ€Π΅Π· object Π²ΡΡ‚Π°Π²Π»ΡΠ»ΠΈΡΡŒ Flash-Ρ€ΠΎΠ»ΠΈΠΊΠΈ. БпроситС Ρƒ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»Π΅ΠΉ, Ρ‡Ρ‚ΠΎ это Ρ‚Π°ΠΊΠΎΠ΅.

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

Π‘ Ρ‚Π°ΠΊΠΈΠΌ SVG ΠΌΠΎΠΆΠ½ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚ΠΎ ΠΆΠ΅, Ρ‡Ρ‚ΠΎ ΠΈ с ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΌΠΈ HTML-элСмСнтами: стили, скрипты β€” Π½Ρƒ, Π²Ρ‹ сами Π·Π½Π°Π΅Ρ‚Π΅. МоТно, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ Π·Π°Π»ΠΈΠ²ΠΊΠΈ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΈ ΠΎΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ всё Π² ΠΎΠ±Ρ‰ΠΈΡ… стилях.

ΠœΠΈΠ½ΡƒΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π½Π΅ ΠΊΡΡˆΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ ΠΎΡ‚ страницы β€” хотя это ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ±ΠΎΠΉΡ‚ΠΈ Ρ‡Π΅Ρ€Π΅Π· символы ΠΈ ΡŽΠ·Ρ‹, Π½ΠΎ это длинная история, ΠΌΡ‹ ΠΎΠ± этом Π΅Ρ‰Ρ‘ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ.

SVG Π³ΠΎΡ€Π°Π·Π΄ΠΎ большС, Ρ‡Π΅ΠΌ просто Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ β€” это ΠΌΡ‹ с Π²Π°ΠΌΠΈ ΡƒΠΆΠ΅ поняли. Π₯ΠΎΡ‚ΠΈΡ‚Π΅ Π·Π°ΠΊΠΎΠΏΠ°Ρ‚ΡŒΡΡ Π³Π»ΡƒΠ±ΠΆΠ΅? Π§ΠΈΡ‚Π°ΠΉΡ‚Π΅ ΡΡ‚Π°Ρ‚ΡŒΠΈ Π‘Π°Ρ€Ρ‹ Π‘ΡƒΠ°ΠΉΠ΄Π°Π½, это ΠΏΠΎΠΊΠ° Π»ΡƒΡ‡ΡˆΠ΅Π΅, ΠΈΠ· Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ. ВсС ссылки Π΅ΡΡ‚ΡŒ Π² описании ΠΊ Π²ΠΈΠ΄Π΅ΠΎ.

Π’ ΠΈΡ‚ΠΎΠ³Π΅: способов ΠΊΡƒΡ‡Π° ΠΈ всС Ρ‡Π΅ΠΌ-Ρ‚ΠΎ Ρ…ΠΎΡ€ΠΎΡˆΠΈ. Π’Ρ‹Π±ΠΈΡ€Π°ΠΉΡ‚Π΅ подходящий ΠΏΠΎΠ΄ ваши Π·Π°Π΄Π°Ρ‡ΠΈ, Π½ΠΎ всСгда Π½Π°Ρ‡ΠΈΠ½Π°ΠΉΡ‚Π΅ с самых простых: img ΠΈ Ρ„ΠΎΠ½Π°, Π° ΠΏΠΎΡ‚ΠΎΠΌ ΡƒΠΆΠ΅ услоТняйтС β€” Ссли Π½Π΅ Ρ…Π²Π°Ρ‚Π°Π΅Ρ‚.

SVG β€” ваТная Ρ‡Π°ΡΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρ‹ Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄Π΅Ρ€Π°

ВсС ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ знания ΠΆΠ΄ΡƒΡ‚ Π½Π° курсС Β«HTML ΠΈ CSS. Адаптивная вёрстка ΠΈ автоматизация».

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

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ Π² Π²Π΅Π±-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚

ВСкторная Π³Ρ€Π°Ρ„ΠΈΠΊΠ° ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΠ»Π΅Π·Π½Π° Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ… случаях. Она ΠΈΠΌΠ΅Π΅Ρ‚ ΠΌΠ°Π»Ρ‹Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ Ρ„Π°ΠΉΠ»Π° ΠΈ Π²Ρ‹ΡΠΎΠΊΡƒΡŽ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΠΎΡΡ‚ΡŒ – ΠΏΡ€ΠΈ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±Π° пиксСли Π½Π΅ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°ΡŽΡ‚ΡΡ вмСстС с Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠΉ. Π’ Π΄Π°Π½Π½ΠΎΠΉ ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ ΠΏΠΎΠΊΠ°ΠΆΠ΅ΠΌ, ΠΊΠ°ΠΊ Π²ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΡƒΡŽ Π³Ρ€Π°Ρ„ΠΈΠΊΡƒ Π½Π° Π’Π°ΡˆΡƒ страницу.

Навыки:Π—Π½Π°Π½ΠΈΠ΅ основ HTML ΠΈ ΡƒΠΌΠ΅Π½ΠΈΠ΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² Π²Π΅Π±-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚.
ЦСль:Π˜Π·ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊ Π²ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ SVG (Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠ΅) ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° Π²Π΅Π±-страницу.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Данная ΡΡ‚Π°Ρ‚ΡŒΡ Π½Π΅ Π½Π°ΡƒΡ‡ΠΈΡ‚ вас Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠ΅, Π° даст ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ Ρ‡Ρ‚ΠΎ это ΠΈ ΠΊΠ°ΠΊ Π΅Ρ‘ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² Π²Π΅Π±-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ….

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ вСкторная Π³Ρ€Π°Ρ„ΠΈΠΊΠ°?

Различия становятся Π·Π°ΠΌΠ΅Ρ‚Π½Ρ‹, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ измСняСтС ΠΌΠ°ΡΡˆΡ‚Π°Π± страницы β€” PNG ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ становится Π½Π΅Ρ€ΠΎΠ²Π½Ρ‹ΠΌ (становятся Π²ΠΈΠ΄Π½Ρ‹ пиксСли), ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΎ содСрТит ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ ΠΈ Ρ†Π²Π΅Ρ‚Π΅ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ пиксСля. ΠŸΡ€ΠΈ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠΈ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ пиксСль Ρ‚Π°ΠΊΠΆΠ΅ увСличиваСтся, охватывая нСсколько пиксСлСй дисплСя, поэтому становятся Π·Π°ΠΌΠ΅Ρ‚Π½Ρ‹ «ΠΊΠΈΡ€ΠΏΠΈΡ‡ΠΈΠΊΠΈ». Π’Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ€ΠΎΠ²Π½Ρ‹ΠΌ ΠΈ красивым, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Ρ„ΠΈΠ³ΡƒΡ€Ρ‹, ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΡŽΡ‚ΡΡ совмСстно с Π½ΠΈΠΌ.

ΠΊΠ°ΠΊ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ svg Π² html ΠΊΠΎΠ΄. raster vector default size. ΠΊΠ°ΠΊ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ svg Π² html ΠΊΠΎΠ΄ Ρ„ΠΎΡ‚ΠΎ. ΠΊΠ°ΠΊ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ svg Π² html ΠΊΠΎΠ΄-raster vector default size. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΊΠ°ΠΊ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ svg Π² html ΠΊΠΎΠ΄. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° raster vector default size. SVG β€” это Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ, дословно: ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΠ°Ρ вСкторная Π³Ρ€Π°Ρ„ΠΈΠΊΠ°. ΠœΠ’Π“? SVG! Π’ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Ρ… Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°Ρ… хранится Π½Π΅ само ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π° инструкция ΠΏΠΎ Π΅Π³ΠΎ ΠΏΠΎΡΡ‚Ρ€ΠΎΠ΅Π½ΠΈΡŽ ΠΏΠΎ Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌ ΠΈ ΠΊΡ€ΠΈΠ²Ρ‹ΠΌ.

ΠΊΠ°ΠΊ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ svg Π² html ΠΊΠΎΠ΄. raster vector zoomed. ΠΊΠ°ΠΊ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ svg Π² html ΠΊΠΎΠ΄ Ρ„ΠΎΡ‚ΠΎ. ΠΊΠ°ΠΊ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ svg Π² html ΠΊΠΎΠ΄-raster vector zoomed. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΊΠ°ΠΊ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ svg Π² html ΠΊΠΎΠ΄. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° raster vector zoomed. SVG β€” это Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ, дословно: ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΠ°Ρ вСкторная Π³Ρ€Π°Ρ„ΠΈΠΊΠ°. ΠœΠ’Π“? SVG! Π’ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Ρ… Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°Ρ… хранится Π½Π΅ само ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π° инструкция ΠΏΠΎ Π΅Π³ΠΎ ΠΏΠΎΡΡ‚Ρ€ΠΎΠ΅Π½ΠΈΡŽ ΠΏΠΎ Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌ ΠΈ ΠΊΡ€ΠΈΠ²Ρ‹ΠΌ.

Π‘ΠΎΠ»Π΅Π΅ Ρ‚ΠΎΠ³ΠΎ, Ρ„Π°ΠΉΠ»Ρ‹ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ мСньшС растровых, Ρ‚.ΠΊ. Π² Π½ΠΈΡ… содСрТится Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌΡ‹ построСния вмСсто ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΎ ΠΊΠ°ΠΆΠ΄ΠΎΠΌ пиксСлС.

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

SVG это язык Π½Π° Π±Π°Π·Π΅ XML для описания Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. По сути это язык Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ, ΠΊΠ°ΠΊ ΠΈ HTML, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ содСрТащий мноТСство Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… элСмСнтов для опрСдСлСния Ρ„ΠΈΠ³ΡƒΡ€ вашСго изобраТСния, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ² ΠΈΡ… отобраТСния. SVG ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ для Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ, Π° Π½Π΅ содСрТимого. Π’ ΠΏΡ€ΠΎΡΡ‚Π΅ΠΉΡˆΠ΅ΠΌ случаС, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ элСмСнты для создания простых Ρ„ΠΈΠ³ΡƒΡ€, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ (ΠΊΡ€ΡƒΠ³) ΠΈ (ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ). Π‘ΠΎΠ»Π΅Π΅ слоТныС SVG элСмСнты Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ (en-US) (Ρ€Π°Π·Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π° с использованиСм ΠΌΠ°Ρ‚Ρ€ΠΈΡ†Ρ‹), (анимация частСй вашСго Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠ³ΠΎ изобраТСния) ΠΈ (en-US) (ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ маски ΠΊ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ.)

Π’ качСствС простого ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°, ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄ создаёт ΠΊΡ€ΡƒΠ³ ΠΈ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ:

Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ получаСтся ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅:

Π˜ΡΡ…ΠΎΠ΄Ρ ΠΈΠ· ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° Π²Ρ‹ΡˆΠ΅, ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ SVG Π»Π΅Π³ΠΊΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ. Π”Π°, простыС SVG ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ тСкстовый Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€, Π½ΠΎ Π² случаС слоТного изобраТСния это становится слоТным. Для создания SVG ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Ρ‹ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Inkscape ΠΈΠ»ΠΈ Illustrator. Π”Π°Π½Π½Ρ‹Π΅ прилоТСния ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ изобраТСния, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ мноТСство графичСских инструмСнтов, ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ приблиТСния Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΉ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ опция Trace Bitmap feature прилоТСния Inkscape.)

Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ прСимущСства SVG:

Π’Π°ΠΊ ΠΏΠΎΡ‡Π΅ΠΌΡƒ ΠΆΠ΅ Ρ‚ΠΎΠ³Π΄Π° Π²ΠΎΠΎΠ±Ρ‰Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ растровыС изобраТСния, Π° Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ SVG? Π”Π΅Π»ΠΎ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ SVG ΠΈΠΌΠ΅Π΅Ρ‚ ряд нСдостатков:

Π’ Ρ†Π΅Π»ΠΎΠΌ, растровая Π³Ρ€Π°Ρ„ΠΈΠΊΠ° Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для слоТных ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΉ.

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

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ SVG Π½Π° страницы

Π’ Π΄Π°Π½Π½ΠΎΠΌ Ρ€Π°Π·Π΄Π΅Π»Π΅ ΠΌΡ‹ рассмотрим Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ SVG Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΡƒΡŽ Π³Ρ€Π°Ρ„ΠΈΠΊΡƒ Π½Π° Π²Π΅Π±-страницу.

«>Быстрый ΠΏΡƒΡ‚ΡŒ:

ΠŸΠ»ΡŽΡΡ‹

ΠœΠΈΠ½ΡƒΡΡ‹

УстранСниС Π½Π΅ΠΏΠΎΠ»Π°Π΄ΠΎΠΊ ΠΈ кросс-браузСрная ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ°

Π’Π°ΠΊΠΆΠ΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ SVG Π² качСствС Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ CSS, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅. Π’ ΠΏΡ€ΠΈΠ²Π΅Π΄Ρ‘Π½Π½ΠΎΠΌ ΠΊΠΎΠ΄Π΅ Π½ΠΈΠΆΠ΅ старыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΡ€ΠΈΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒΡΡ PNG, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΎΠ½ΠΈ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡŽΡ‚, Ρ‚ΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ Π½ΠΎΠ²Ρ‹Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ Π±ΡƒΠ΄ΡƒΡ‚ Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ SVG:

Если ваши SVG Π½Π΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ вовсС, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ваш сСрвСр Π½Π΅ настроСн Π΄ΠΎΠ»ΠΆΠ½Ρ‹ΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ. Если ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° Π² этом, Ρ‚ΠΎ данная ΡΡ‚Π°Ρ‚ΡŒΡ ΡƒΠΊΠ°ΠΆΠ΅Ρ‚ Π²Π°ΠΌ Π²Π΅Ρ€Π½ΠΎΠ΅ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅.

Как Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ SVG Π² ваш HTML ΠΊΠΎΠ΄

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ Ρ„Π°ΠΉΠ» SVG Π² тСкстовом Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅, ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ этот ΠΊΠΎΠ΄ ΠΈ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π² ваш HTML Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ β€” Ρ‚Π°ΠΊΠΎΠΉ ΠΏΡ€ΠΈΡ‘ΠΌ ΠΈΠ½ΠΎΠ³Π΄Π° Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ встраиваниСм SVG (SVG inline ΠΈΠ»ΠΈ inlining SVG). Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ вашСго SVG ΠΊΠΎΠ΄Π° начинаСтся ΠΈ заканчиваСтся с Ρ‚Π΅Π³ΠΎΠ² (Π½Π΅ Π²ΠΊΠ»ΡŽΡ‡Π°ΠΉΡ‚Π΅ Π½ΠΈΡ‡Π΅Π³ΠΎ, ΠΊΡ€ΠΎΠΌΠ΅ Π½ΠΈΡ…). Π’ΠΎΡ‚ ΠΎΡ‡Π΅Π½ΡŒ простой ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π² ваш Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚:

ΠŸΠ»ΡŽΡΡ‹

ΠœΠΈΠ½ΡƒΡΡ‹

(en-US)»>Как Π²ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ SVG ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ (en-US)

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ ваши SVG изобраТСния Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ просто ΠΊΠ°ΠΊ Π²Π΅Π±-страницы. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ встраиваниС SVG Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ выполняСтся ΠΊΠ°ΠΊ ΠΌΡ‹ ΠΈΠ·ΡƒΡ‡Π°Π»ΠΈ Ρ€Π°Π½Π΅Π΅ Π² Π³Π»Π°Π²Π΅ ΠžΡ‚ ΠΊ β€” Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ внСдрСния.

ΠœΠΈΠ½ΡƒΡΡ‹

АктивноС ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅: ΠΏΠΎΠΈΠ³Ρ€Π°ΠΉΡ‚Π΅ с SVG

Π’ этом Ρ€Π°Π·Π΄Π΅Π»Π΅ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ изучСния ΠΌΡ‹ Π±Ρ‹ Ρ…ΠΎΡ‚Π΅Π»ΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ просто ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Π»ΠΈ ΠΏΠΎΠΈΠ³Ρ€Π°Ρ‚ΡŒ с SVG. НиТС, Π² области Input, Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ ΡƒΠΆΠ΅ прСдоставили Π½Π΅ΠΊΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ Π½Π°Ρ‡Π°Π»ΠΈ. А Π΅Ρ‰Ρ‘ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΡΠ΅Ρ‚ΠΈΡ‚ΡŒ SVG Element Reference, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ большС Π΄Π΅Ρ‚Π°Π»Π΅ΠΉ ΠΎ Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΈΠ³Ρ€ΡƒΡˆΠΊΠ°Ρ…, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Π½Ρ‹ Π² SVG, ΠΈ Ρ‚ΠΎΠΆΠ΅ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ…. Π­Ρ‚ΠΎΡ‚ Ρ€Π°Π·Π΄Π΅Π» ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ посвящён ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅ Π²Π°ΡˆΠΈΡ… ΠΈΡΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… Π½Π°Π²Ρ‹ΠΊΠΎΠ² ΠΈ Π²Π°ΡˆΠ΅ΠΌΡƒ Ρ€Π°Π·Π²Π»Π΅Ρ‡Π΅Π½ΠΈΡŽ.

Если Π’Ρ‹ Π³Π΄Π΅-Ρ‚ΠΎ застряли ΠΈ ваш ΠΊΠΎΠ΄ Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚, Π²Ρ‹ всСгда ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°Ρ‡Π°Ρ‚ΡŒ сначала, Π½Π°ΠΆΠ°Π² ΠΊΠ½ΠΎΠΏΠΊΡƒ Reset.

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

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

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

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

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

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