ΠΊΠ°ΠΊ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ svg

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

ΠΊΠ°ΠΊ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ svg. 270a6d04ea844a7e87043ad9541dc173. ΠΊΠ°ΠΊ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ svg Ρ„ΠΎΡ‚ΠΎ. ΠΊΠ°ΠΊ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ svg-270a6d04ea844a7e87043ad9541dc173. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΊΠ°ΠΊ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ svg. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° 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 – Π»ΡƒΡ‡ΡˆΠΈΠ΅ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ ΠΈ ΠΎΠ½Π»Π°ΠΉΠ½-Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Ρ‹

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

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

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

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

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

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

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

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

Adobe Illustrator

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

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

Boxy SVG

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

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

Vectr

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

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

Inkscape

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ΠΊΠ°ΠΊ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ svg. raster vector zoomed. ΠΊΠ°ΠΊ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ svg Ρ„ΠΎΡ‚ΠΎ. ΠΊΠ°ΠΊ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ svg-raster vector zoomed. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΊΠ°ΠΊ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ svg. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° 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, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Π΄Π΅Π»Π°Ρ‚ΡŒ ваши изобраТСния Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ± ΠΎΠ½ΠΈ ΠΌΠΎΠ³Π»ΠΈ Π»ΡƒΡ‡ΡˆΠ΅ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½Π° Ρ€Π°Π·Π½Ρ‹Ρ… устройствах.

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

ΠšΠΎΠ½Π²Π΅Ρ€Ρ‚ΠΈΡ€ΡƒΠ΅ΠΌ SVG-ΠΈΠΊΠΎΠ½ΠΊΡƒ Π² ΠΊΠΎΠ΄ для использования Π² CSS

Π’ ΠΎΠ΄Π½ΠΎΠΌ ΠΈΠ· ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² Π²ΠΎΠ·Π»Π΅ мСню Π²Ρ‹Π²ΠΎΠ΄ΠΈΠ»ΠΈΡΡŒ нСбольшиС ΠΈΠΊΠΎΠ½ΠΊΠΈ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ svg, ΠΈ Π½ΡƒΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π½Π° ΠΏΡƒΠ½ΠΊΡ‚ мСню, тСкст ΠΈ ΠΈΠΊΠΎΠ½ΠΊΠ° мСняли Ρ†Π²Π΅Ρ‚. Для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ ΠΏΠ»ΠΎΠ΄ΠΈΡ‚ΡŒ большоС количСство ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ, Π±Ρ‹Π»ΠΎ Ρ€Π΅ΡˆΠ΅Π½ΠΎ пСрСвСсти svg Π² ΠΊΠΎΠ΄ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² стилях CSS.

UPDATE β€” НС ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ svg Π² ΠΊΠΎΠ΄. МоТно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ Ρ„Π°ΠΉΠ»Π° svg ΠΏΠΎΡ‡Ρ‚ΠΈ Π±Π΅Π· ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½ΠΈΠΉ ΠΈ Π±Π΅Π· ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚ΠΎΡ€ΠΎΠ².

ΠšΡ€Π°Ρ‚ΠΊΠ°Ρ инструкция ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ SVG Π² CSS

Если ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ этот SVG Π² CSS старым способом прСдставлСнным Π½ΠΈΠΆΠ΅, Ρ‚ΠΎ получится Ρ‚Π°ΠΊΠΎΠΉ ΠΊΠΎΠ΄:

ДобавляСтся ΠΊΡƒΡ‡Π° Π»ΠΈΡˆΠ½ΠΈΡ… дСйствий, Π½Π° Π²Ρ‹Ρ…ΠΎΠ΄Π΅ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ сконвСртированный ΠΊΠΎΠ΄, нСкрасиво ΠΈ Π΄ΠΎΠ»Π³ΠΎ.

Π‘Π°ΠΌΡ‹ΠΉ простой Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ β€” ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ SVG Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ Π² CSS.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ использования SVG Π² CSS:

ΠŸΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ΡΡ, Ρ‡Ρ‚ΠΎ ΠΊΠΎΠ΄ SVG ΠΏΠΎΡ‡Ρ‚ΠΈ Π½Π΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ ΠΈ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ это заняло 15 сСкунд, Π½ΠΎ Π½ΡƒΠΆΠ½ΠΎ ΡƒΡ‡Π΅ΡΡ‚ΡŒ Ρ‚Π°ΠΊΠΈΠ΅ ΠΌΠΎΠΌΠ΅Π½Ρ‚Ρ‹:

Π–ΠΈΠ²ΠΎΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ использования SVG Π² CSS:

See the Pen KKKRBxr by Denis (@deniscreative) on CodePen.default

Если ΠΆΠ΅ вас устраиваСт Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ с ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚Π°Ρ†ΠΈΠ΅ΠΉ SVG, Ρ‚ΠΎΠ³Π΄Π° старый Π΄ΠΎΠ±Ρ€Ρ‹ΠΉ Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ прСдставлСн Π½ΠΈΠΆΠ΅.

ΠšΡ€Π°Ρ‚ΠΊΠ°Ρ инструкция ΠΊΠ°ΠΊ ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ SVG Π² CSS

Π‘Π½Π°Ρ‡Π°Π»Π° отправляСм svg Π² https://jakearchibald.github.io/svgomg/ для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΊΠΎΠ΄ΠΎΠ²ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅.

Π—Π°Ρ‚Π΅ΠΌ ΠΊΠΎΠΏΠΈΡ€ΡƒΠ΅ΠΌ ΠΊΠΎΠ΄ ΠΈ вставляСм Π΅Π³ΠΎ Π² это ΠΎΠΊΠ½ΠΎ:

See the Pen Convert SVG to Data URI for css background-image by Denis (@deniscreative) on CodePen.0

ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½Π½Ρ‹ΠΉ ΠΊΠΎΠ΄ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ Π² своСм css Ρ„Π°ΠΉΠ»Π΅.

НапримСр, Π±Π΅Ρ€Π΅ΠΌ ΠΈΠΊΠΎΠ½ΠΊΡƒ Facebook (стандартная ΠΈΠΊΠΎΠ½ΠΊΠ° с нСбольшим ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ).

На сайтС https://jakearchibald.github.io/svgomg/ ΠΆΠΌΠ΅ΠΌ Β«Open SVGΒ» ΠΈΠ»ΠΈ просто пСрСтягиваСм ΠΈΠΊΠΎΠ½ΠΊΡƒ Π½Π° ΠΎΠ±Π»Π°ΡΡ‚ΡŒ просмотра. Π’ Π»Π΅Π²ΠΎΠΌ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ ΡƒΠ³Π»Ρƒ ΠΆΠΌΠ΅ΠΌ Β«CODEΒ», выдСляСм ΠΊΠΎΠ΄, Π° Π·Π°Ρ‚Π΅ΠΌ ΠΆΠΌΠ΅ΠΌ Π½Π° ΠΈΠΊΠΎΠ½ΠΊΡƒ ΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, Ρ‚Π°ΠΊ ΠΌΡ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠΌ Π² Π±ΡƒΡ„Π΅Ρ€ ΠΊΠΎΠ΄ нашСй свг-ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ.

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

Π—Π°Ρ‚Π΅ΠΌ ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½Π½Ρ‹ΠΉ ΠΊΠΎΠ΄ вставляСм Π² ΠΎΠΊΠ½ΠΎ Π²Ρ‹ΡˆΠ΅, ΠΆΠΌΠ΅ΠΌ Converte ΠΈ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΉ background-image:

ΠšΠΎΠΏΠΈΡ€ΡƒΠ΅ΠΌ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ Π΅Π³ΠΎ Π² своСм css.

Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ ΠΊ ΠΏΡ€ΠΎΡ‡Ρ‚Π΅Π½ΠΈΡŽ:

ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ (11) ΠΊ β€œΠšΠΎΠ½Π²Π΅Ρ€Ρ‚ΠΈΡ€ΡƒΠ΅ΠΌ SVG-ΠΈΠΊΠΎΠ½ΠΊΡƒ Π² ΠΊΠΎΠ΄ для использования Π² CSS”

Urarak

Π£ мСня Π΄Π°Π½Π½Ρ‹ΠΉ способ Π½Π΅ сработал πŸ™

Denis Creative

Π‘ΠΊΠΈΠ½ΡŒΡ‚Π΅ ΠΊΠΎΠ΄ SVG Ρ„Π°ΠΉΠ»Π°, ΠΌΠΎΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΌ.

АндрСй

ΠžΡ„ΠΈΠ³Π΅Π½Π½ΠΎ ΠΊΡ€ΡƒΡ‚ΠΎΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅. Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΠ».
ДСнис Π° ΠΌΠΎΠΆΠ½ΠΎ Π»ΠΈ ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚Π΅Ρ€ вынСсти Π²ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ Π½Π° сайтС. πŸ˜• Π° Ρ‚ΠΎ сайт сСгодня Π΅ΡΡ‚ΡŒ Π·Π°Π²Π°Ρ‚Ρ€Π° ΠΈΡ… Π½Π΅Ρ‚ )

Ρ€Π΅ΠΏΠΈΡ‚ Π½Π΅ Ρ€Π΅ΠΏΠΈΡ‚ΡŒ скрол фикс ΠΈ Ρ‚.Π΄.
Ρ‡Ρ‚ΠΎΠ±Ρ‹ сразу Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ с ΠΊΠΎΠ΄ΠΎΠΌ
background-repeat: no-repeat;
background-image: url(β€˜
ΠΈ Ρ‚.Π΄.

Background Position
Background Attachment
Background Repeat
Background Origin
Background Size
Overlay
Overlay Blend

Denis Creative

Онлайн ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚ΠΎΡ€ Π΅ΡΡ‚ΡŒ Π½Π° Codepen.
Но я Π±Ρ‹ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Π» ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Ρ‡Π°ΡΡ‚ΡŒ ΡΡ‚Π°Ρ‚ΡŒΠΈ с Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ Β«Π‘Π°ΠΌΡ‹ΠΉ простой Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ – ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ SVG Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ Π² CSS.Β» β€” Ρ‚Π°ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ svg Π² css Π±Π΅Π· ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚ΠΎΡ€Π°, ΠΈΠΌΠ΅Π½Π½ΠΎ этим способом я ΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡΡŒ сСйчас. Он ΠΏΡ€ΠΎΡ‰Π΅, понятнСС ΠΈ быстрСС ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ.
По ΠΏΠΎΠ²ΠΎΠ΄Ρƒ Ρ€Π°Π·Π½Ρ‹Ρ… ΠΎΠΏΡ†ΠΈΠΉ для background (position, repeat, etc.) Ρ‚ΠΎ это ΡƒΠΆΠ΅ Π±Ρ‹ ΠΏΠ΅Ρ€Π΅Π³Ρ€ΡƒΠ·ΠΈΠ»ΠΎ ΠΎΡΠ½ΠΎΠ²Π½ΡƒΡŽ Ρ‚Π΅ΠΌΡƒ, Π³Π»Π°Π²Π½ΠΎΠ΅ ΡΡƒΡ‚ΡŒ β€” использованиС SVG Π² CSS.

А Ρ‚ΠΎ я Π΄ΠΎΠ±Π°Π²ΠΈΠ» Ρ„ΠΎΡ‚ΠΎ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ :

ΠΈ сСйчас Ρ€Π΅ΡˆΠΈΠ» ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π½ΠΎ Π½Π΅ помню какая ΠΈΠ· Π½ΠΈΡ…, какая …

Denis Creative

Π’Π°ΠΊ Ρ‚ΡƒΡ‚ ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚Π΅Ρ€ Π½Π΅ Π½ΡƒΠΆΠ΅Π½, это просто Π·Π° 5 сСк дСлаСтся Ρ€ΡƒΠΊΠ°ΠΌΠΈ.
Π‘ΠΎΠ·Π΄Π°Π΅Ρ‚Π΅ Ρ„Π°ΠΉΠ» icon.svg
ΠžΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚Π΅ Π΅Π³ΠΎ Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅.
ΠŸΠ΅Ρ€Π΅Π½ΠΎΡΠΈΡ‚Π΅ Π² Π½Π΅Π³ΠΎ ΠΊΠΎΠ΄ свг

мСняСтС
%3c Π½Π°
ΠΈ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚Π΅ svg-ΠΈΠΊΠΎΠ½ΠΊΡƒ Facebook с Ρ‚Π°ΠΊΠΈΠΌ ΠΊΠΎΠ΄ΠΎΠΌ:

ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ я ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°ΡŽ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π΅ ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚Π΅Ρ€, Π° просто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ SVG Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ Π² CSS β€” это описано Π² ΡΡ‚Π°Ρ‚ΡŒΠ΅.

Denis Creative

ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Ρ‹ Π½Π΅ ΡƒΠ΄Π°Π»ΡΡŽΡ‚ΡΡ, просто ΠΎΠ½ΠΈ Π±Ρ‹Π»ΠΈ Π½Π° ΠΌΠΎΠ΄Π΅Ρ€Π°Ρ†ΠΈΠΈ. Π― Π½Π΅ сиТу Ρ‚ΡƒΡ‚ 24 часа Π² сутки)

35 инструмСнтов для Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° Π½Π° ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ дСнь β€” MAILSGUN.RU

[…] SVG to bg – ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚Π΅Ρ€ SVG-ΠΈΠΊΠΎΠ½ΠΎΠΊ Π² ΠΊΠΎΠ΄ для использования Π² CSS. ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π°Ρ инструкция прилагаСтся Π½Π° сайтС Π°Π²Ρ‚ΠΎΡ€Π°. […]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Π§ΠΈΡ‚Π°ΠΉΡ‚Π΅ Ρ‚Π°ΠΊΠΆΠ΅

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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