ΠΊΠ°ΠΊ Π²ΡΡΠ°Π²ΠΈΡΡ svg Π² html ΠΊΠΎΠ΄
ΠΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ Π²ΡΡΠ°Π²Π»ΡΡΡ 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 Π½Π° ΡΠ°ΠΉΡΠ΅. ΠΠ°ΠΆΠ΄ΡΠΉ ΡΠ°ΠΌ Π΄Π»Ρ ΡΠ΅Π±Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΡΡΡ ΡΡΠΎΠΉ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ. Π’Π΅ΠΌ Π±ΠΎΠ»Π΅Π΅ ΡΡΠΎ ΡΡΠ° ΡΠ΅ΠΌΠ° ΠΏΠΎΠ΄Π½ΠΈΠΌΠ°Π»Π°ΡΡ ΡΠΆΠ΅ Π½Π΅ΠΎΠ΄Π½ΠΎΠΊΡΠ°ΡΠ½ΠΎ.
Π‘Π΅ΠΉΡΠ°Ρ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΌΠ΅ΡΠΎΠ΄Ρ Π²ΡΡΡΠ°ΠΈΠ²Π°Π½ΠΈΡ SVG, ΠΈΡ ΠΏΠ»ΡΡΡ ΠΈ ΠΌΠΈΠ½ΡΡΡ, Π° ΡΠ°ΠΊ ΠΆΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΠΌΠ°Π½ΠΈΠΏΡΠ»ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ SVG.
Π‘ΡΠ°ΡΡΡ ΡΠ°ΡΡΡΠΈΡΠ°Π½Π° Π² ΠΏΠ΅ΡΠ²ΡΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ Π½Π° ΡΠ΅Ρ
, ΠΊΡΠΎ Π΄ΠΎ ΡΠΈΡ
ΠΏΠΎΡ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π²Π΅ΠΊΡΠΎΡΠ½ΡΡ Π³ΡΠ°ΡΠΈΠΊΡ Π½Π° ΡΠ²ΠΎΠΈΡ
ΡΠ°ΠΉΡΠ°Ρ
, Π½ΠΎ ΠΎΡΠ΅Π½Ρ Ρ
ΠΎΡΠ΅Ρ Π±ΡΡΡ ΠΎΠ΄Π½ΠΎΠΉ Π½ΠΎΠ³ΠΎΠΉ Π² Π±ΡΠ΄ΡΡΠ΅ΠΌ Π½Π°ΡΡΠΎΡΡΠ΅ΠΌ.
ΠΠ»Ρ Π»ΡΠ±ΠΎΠΏΡΡΠ½ΡΡ
ΡΡΠ°Π·Ρ ΠΏΡΠΈΠ²Π΅Π΄Ρ ΡΠ²ΠΎΠ΄Π½ΡΡ ΡΠ°Π±Π»ΠΈΡΡ:
ΠΠΊΠΎΠ½ΠΎΡΠ½ΡΠΉ ΡΡΠΈΡΡ | IMG, background-image | Object | Inline | |
---|---|---|---|---|
CSS ΠΠ°Π½ΠΈΠΏΡΠ»ΡΡΠΈΠΈ | Π§Π°ΡΡΠΈΡΠ½ΠΎ 1 | ΠΠ΅Ρ | Π§Π°ΡΡΠΈΡΠ½ΠΎ 2 | ΠΠ° |
JS ΠΌΠ°Π½ΠΈΠΏΡΠ»ΡΡΠΈΠΈ | Π§Π°ΡΡΠΈΡΠ½ΠΎ 1 | ΠΠ΅Ρ | ΠΠ° | ΠΠ° |
SVG Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ | ΠΠ΅Ρ | ΠΠ° | ΠΠ° | ΠΠ° |
ΠΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠ΅ SVG Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ | ΠΠ΅Ρ | ΠΠ΅Ρ | ΠΠ° | ΠΠ° |
1 ΠΠΎΠΆΠ½ΠΎ ΠΌΠ΅Π½ΡΡΡ ΡΠ²Π΅Ρ, ΡΠ°Π·ΠΌΠ΅Ρ, Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈ ΠΏΡΠΎΡΠ΅Π΅ ΡΡΠΈΠ»ΠΈ ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ°
2 Π‘ΡΠΈΠ»ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΠΏΡΠΎΠΏΠΈΡΠ°Π½Ρ ΠΈΠ»ΠΈ Π² ΡΠ°ΠΌΠΎΠΌ SVG ΡΠ°ΠΉΠ»Π΅, ΠΈΠ»ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½Ρ Π²Π½Π΅ΡΠ½ΠΈΠΌ ΡΡΠΈΠ»Π΅ΠΌ Π² SVG Π² Π½Π°ΡΠ°Π»Π΅ ΡΠ°ΠΉΠ»Π°:
ΠΠΎ ΠΏΡΠ°Π²Π΄Π΅ Π³ΠΎΠ²ΠΎΡΡ ΡΡΠΈΠ»ΠΈ ΠΏΡΠΎΠΏΠΈΡΠ°Π½Π½ΡΠ΅ Π²Π½ΡΡΡΠΈ SVG ΡΠ°ΠΊ ΠΆΠ΅ Π±ΡΠ΄ΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΈ ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΠ΅Π³Π° IMG ΠΈΠ»ΠΈ background-image, Π½ΠΎ Π² ΡΡΠΎΠΌ Π½Π΅Ρ Π½ΠΈΠΊΠ°ΠΊΠΎΠ³ΠΎ ΡΠΌΡΡΠ»Π°.
ΠΠΊΠΎΠ½ΠΎΡΠ½ΡΠΉ ΡΡΠΈΡΡ
ΠΠ»ΡΡΡ ΠΈ ΠΌΠΈΠ½ΡΡΡ ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄Π°:
+ ΠΈΠΊΠΎΠ½ΠΊΠ° Π²Π΅Π΄Π΅Ρ ΡΠ΅Π±Ρ ΠΊΠ°ΠΊ ΡΠΈΠΌΠ²ΠΎΠ» ΡΡΠΈΡΡΠ°, ΠΈ Π²ΡΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡΡΡ ΡΠ°ΠΊ ΠΆΠ΅ ΡΠ΅ΡΠ΅Π· CSS (ΡΠ°Π·ΠΌΠ΅Ρ, ΡΠ²Π΅Ρ, Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈ ΠΏΡΠΎΡΠ΅Π΅);
+ Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠ°Π±ΠΎΡΠ°ΡΡΠΈΠΉ Π² IE 8 Π±Π΅Π· Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ
ΠΌΠ°Π½ΠΈΠΏΡΠ»ΡΡΠΈΠΉ;
β Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ SVG ΡΠ°ΠΉΠ»Π° ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΡΡΡΡΡ Π² ΠΎΠ΄ΠΈΠ½ ΡΠΈΠΌΠ²ΠΎΠ», ΠΏΠΎΡΡΠΎΠΌΡ ΡΠΏΡΠ°Π²Π»ΡΡΡ ΠΈΠΌ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ CSS ΠΈΠ»ΠΈ JS ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΠΊΠ°ΠΊ Π΅Π΄ΠΈΠ½ΡΠΌ ΡΠ΅Π»ΡΠΌ;
β ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½ΠΎΡΠ²Π΅ΡΠ½ΡΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ;
β ΠΏΡΠΈ ΡΠ±ΠΎΠ΅ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΡΠΈΡΡΠ° Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π»ΠΈΠ±ΠΎ Π½Π΅ ΠΎΡΠΎΠ±ΡΠ°Π·ΡΡΡΡ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΡΠΎΠ²ΡΠ΅ΠΌ, Π»ΠΈΠ±ΠΎ, ΠΏΡΠΈ ΡΠΎΠ²ΠΏΠ°Π΄Π΅Π½ΠΈΠΈ ΠΊΠΎΠ΄ΠΎΠ² ΠΈΠΊΠΎΠ½ΠΎΠΊ Ρ ΡΠΈΠΌΠ²ΠΎΠ»Π°ΠΌΠΈ ΡΠ½ΠΈΠΊΠΎΠ΄Π°, ΠΎΡΠΎΠ±ΡΠ°Π·ΡΡΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΡΡΡΠΈΠ΅ ΡΠΈΠΌΠ²ΠΎΠ»Ρ.
SVG ΠΊΠ°ΠΊ OBJECT
Π ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ (ΠΈΠ»ΠΈ ΠΊ ΡΡΠ°ΡΡΡΡ) codepen ΠΈ jsfiddle Π±Π»ΠΎΠΊΠΈΡΡΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ Π²Π½Π΅ΡΠ½ΠΈΡ
object Π² ΡΠ΅Π»ΡΡ
Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎΡΡΠΈ.
ΠΡΡΡΠ°ΠΈΠ²Π°Π½ΠΈΠ΅ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
ΠΠ±ΡΠ΅ΠΊΡ Π²ΡΡΡΠ°ΠΈΠ²Π°Π΅Ρ ΡΠ»ΠΌΠ΅ΠΌΠ΅Π½Ρ Π°ΡΡΠΈΠ±ΡΡΠ° data Π½Π°ΠΏΠΎΠ΄ΠΎΠ±ΠΈΠ΅ iframe, Π΄ΠΎΠ±Π°Π²Π»ΡΡ Π²Π½ΡΡΡΡ ΡΠ΅Π±Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌΠΎΠ³ΠΎ ΡΠ°ΠΉΠ»Π°, ΠΏΠΎΡΡΠΎΠΌΡ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ±ΡΠ°ΡΠ°ΡΡΡΡ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ JS, Π½ΠΎ Π½Π΅ ΡΠΎΠ²ΡΠ΅ΠΌ ΠΎΠ±ΡΡΠ½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
Π‘ΡΠΎΠΈΡ ΠΎΡΠΌΠ΅ΡΠΈΡΡ ΡΡΠΎ Π² CSS ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ SVG ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΎΡΠ»ΠΈΡΠ°ΡΡΡΡ ΠΎΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΡ
, ΠΏΠΎΠ»Π½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ ΡΡΠΈΠ»Π΅ΠΉ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΡΡ
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 Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ ΠΎΡΠ΅Π½Ρ ΡΡΠ°ΡΡΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ, Π° Π²ΠΎ-Π²ΡΠΎΡΡΡ , Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΉ.
ΠΠ²ΡΠΎΡ ΡΡΠ°ΡΠ΅ΠΉ ΠΏΠΎ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ. ΠΡΠ΅ΠΏΠΎΠ΄Π°Π²Π°ΡΠ΅Π»Ρ, ΠΌΠ΅Π½ΡΠΎΡ, Π²ΡΠΏΡΡΠΊΠ½ΠΈΠΊ Skillbox. Π€ΡΠΈΠ»Π°Π½ΡΠ΅Ρ, Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ
ΠΠ°ΠΊ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ SVG ΠΊ html-ΡΡΡΠ°Π½ΠΈΡΠ΅
ΠΡΡΡ ΡΡΠΈ Π²Π°ΡΠΈΠ°Π½ΡΠ° Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ Π²Π΅ΠΊΡΠΎΡΠ½ΠΎΠΉ Π³ΡΠ°ΡΠΈΠΊΠΈ. Π£ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ²ΠΎΠΈ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΈΡ ΠΊ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ.
Π§Π΅ΡΠ΅Π· ΡΠ΅Π³
ΠΠ΄Π΅ΡΡ Π²ΡΡ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ Ρ ΡΠ°ΡΡΡΠΎΠ²ΠΎΠΉ Π³ΡΠ°ΡΠΈΠΊΠΎΠΉ:
ΠΠΈΠ½ΡΡ ΡΡΠΎΠ³ΠΎ ΡΠΏΠΎΡΠΎΠ±Π° Π² ΡΠΎΠΌ, ΡΡΠΎ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°ΡΡ Ρ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ SVG Π½Π΅ ΠΏΠΎΠ»ΡΡΠΈΡΡΡ. Π€Π°ΠΉΠ» Π±ΡΠ΄Π΅Ρ ΠΊΠ°ΠΊ Π·Π° ΡΡΠ΅ΠΊΠ»ΠΎΠΌ: ΡΠΌΠΎΡΡΠ΅ΡΡ ΠΌΠΎΠΆΠ½ΠΎ, Π° Π²ΠΎΡ ΡΡΠΎΠ³Π°ΡΡ Π½Π΅Π»ΡΠ·Ρ.
Π§Π΅ΡΠ΅Π· background
ΠΠ°ΠΊ ΠΈ Π² ΡΠ»ΡΡΠ°Π΅ Ρ ΡΠ°ΡΡΡΠΎΠ²ΠΎΠΉ Π³ΡΠ°ΡΠΈΠΊΠΎΠΉ, SVG ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°ΡΡ ΡΠ΅ΡΠ΅Π· css-ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ background:
ΠΠΈΠ½ΡΡ ΡΡΡ ΡΠΎΡ ΠΆΠ΅ ΡΠ°ΠΌΡΠΉ, ΡΡΠΎ ΠΈ Ρ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅Π³ΠΎ ΡΠΏΠΎΡΠΎΠ±Π°. ΠΡΠΎΡ ΡΠ»ΡΡΠ°ΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ Π΄Π΅ΠΊΠΎΡΠ°ΡΠΈΠ²Π½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ (ΡΠΎΠ½Ρ, ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈ ΠΏΡΠΎΡΠ°Ρ ΠΌΠ΅Π»ΠΎΡΡ), ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΎΠΆΠ΅ Π²Π½Π΅ΡΠ½Π΅ ΠΌΠ΅Π½ΡΡΡ Π½Π΅ Π½ΡΠΆΠ½ΠΎ.
ΠΡΡΠ°Π²ΠΊΠ° svg-ΠΊΠΎΠ΄Π° Π½Π°ΠΏΡΡΠΌΡΡ
ΠΡΡΠ°Π²Π»ΡΡΡ svg-ΠΊΠΎΠ΄ ΠΏΡΡΠΌΠΎ Π² html-ΡΠ°ΠΉΠ» β ΡΡΠΎ ΡΡΠ΅ΡΠΈΠΉ ΡΠΏΠΎΡΠΎΠ±. Π Π΄Π»Ρ Π½Π°Ρ ΡΠ°ΠΌΡΠΉ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΉ. ΠΠ½ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π΅ ΠΏΡΠΎΡΡΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ Π³ΠΎΡΠΎΠ²ΡΡ Π³ΡΠ°ΡΠΈΠΊΡ, Π½ΠΎ ΠΈ ΠΌΠ΅Π½ΡΡΡ Π΅Ρ (ΡΠΎΠ»ΡΠΈΠ½Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π·Π°Π»ΠΈΠ²ΠΊΡ, ΠΎΠ±Π²ΠΎΠ΄ΠΊΡ ΠΈ ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅).
Π’Π°ΠΊΠ°Ρ Π²ΡΡΠ°Π²ΠΊΠ° Π²ΡΡΡΡΠ°Π΅Ρ, ΠΊΠΎΠ³Π΄Π° ΠΏΡΠΈ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠΈ Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΎΠΉ Π½ΡΠΆΠ½ΠΎ Π΅Ρ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ ΠΌΠΎΠ΄ΠΈΡΠΈΡΠΈΡΠΎΠ²Π°ΡΡ β Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΠ΅ΡΠ΅ΠΊΡΠ°ΡΠΈΡΡ svg-ΠΈΠΊΠΎΠ½ΠΊΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Ρ ΠΊΡΡΡΠΎΡΠ°.
ΠΠ°ΠΏΡΡΠΌΡΡ Π½Π° html-ΡΡΡΠ°Π½ΠΈΡΡ (Π² ΡΠ΅Π³Π΅ ) Π²ΡΡΠ°Π²Π»ΡΡΡ ΠΊΠ°ΠΊ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ½ΡΠ΅, ΡΠ°ΠΊ ΠΈ Π΄Π΅ΠΊΠΎΡΠ°ΡΠΈΠ²Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π° ΠΌΠΈΠ½ΡΡ ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π½Π΅ ΠΊΠ΅ΡΠΈΡΡΡΡΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ ΠΎΡ ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΠ°ΠΊ ΠΌΠ΅Π½ΡΡΡ ΡΠ²Π΅Ρ svg-ΠΈΠΊΠΎΠ½ΠΊΠΈ ΡΠ΅ΡΠ΅Π· CSS
ΠΠ΅ΡΡΡΠ°Π»ΡΡΠΈΠΊΡ ΡΠ°ΡΡΠΎ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΡΡΡ ΠΎΠ±ΡΠ³ΡΡΠ²Π°ΡΡ ΡΠ΅Π°ΠΊΡΠΈΡ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Ρ ΠΌΡΡΠΊΠΈ. Π ΡΠ»ΡΡΠ°Π΅ Ρ 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?
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, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ Π΄Π΅Π»Π°ΡΡ Π²Π°ΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ°ΠΊ, ΡΡΠΎΠ± ΠΎΠ½ΠΈ ΠΌΠΎΠ³Π»ΠΈ Π»ΡΡΡΠ΅ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½Π° ΡΠ°Π·Π½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ .