ΠΊΠ°ΠΊ ΠΎΡΠΊΡΡΡΡ ΠΊΠΎΠ΄ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ 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 ΠΈΠΌΠ΅Π΅Ρ ΡΠ²ΠΎΠΈ ΠΏΠ»ΡΡΡ ΠΈ ΠΌΠΈΠ½ΡΡΡ. Π ΠΏΠ΅ΡΠ²ΡΠΌ ΠΎΡΠ½ΠΎΡΡΡΡΡ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΠΎΡΡΡ Π±Π΅Π· ΠΏΠΎΡΠ΅ΡΠΈ ΠΊΠ°ΡΠ΅ΡΡΠ²Π°, ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΌΠ°Π»ΡΠΉ Π²Π΅Ρ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΈΠ½ΡΠ΅Π³ΡΠ°ΡΠΈΠΈ Π² SVG-Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΡ PNG, GIF, JPG-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ (ΠΏΡΠΈ Π½Π°Π»ΠΈΡΠΈΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅Π³ΠΎ ΠΎΠΏΡΡΠ°) Π² ΡΠ΅ΠΊΡΡΠΎΠ²ΡΡ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ°Ρ , ΠΈΠ½Π΄Π΅ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎΠΈΡΠΊΠΎΠ²ΡΠΌΠΈ ΡΠΎΠ±ΠΎΡΠ°ΠΌΠΈ, ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΈ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΠΎΡΡΡ. Π ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π°ΠΌ ΡΠΎΡΠΌΠ°ΡΠ° ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΎΡΠ½Π΅ΡΡΠΈ Ρ ΠΎΡΠΎΡΡΡ ΡΠΆΠΈΠΌΠ°Π΅ΠΌΠΎΡΡΡ, ΠΎΡΠΊΡΡΡΠΎΡΡΡ ΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΡΡΡ.
Π‘ Π΄ΡΡΠ³ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ SVG Π½Π°ΡΠ»Π΅Π΄ΡΠ΅Ρ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠΈ XML ΡΠΎ Π²ΡΠ΅ΠΌΠΈ Π²ΡΡΠ΅ΠΊΠ°ΡΡΠΈΠΌΠΈ. Π€ΠΎΡΠΌΠ°Ρ ΠΏΠ»ΠΎΡ ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ»ΠΎΠΆΠ½ΡΡ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ², ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΡΠ°ΠΉΠ»Ρ SVG Π±ΡΡΡΡΠΎ Β«Π½Π°Π±ΠΈΡΠ°ΡΡΒ» Π²Π΅Ρ, Π΅ΡΠ»ΠΈ ΡΠΎΡΡΠΎΡΡ ΠΈΠ· ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²Π° ΠΌΠ΅Π»ΠΊΠΈΡ Π΄Π΅ΡΠ°Π»Π΅ΠΉ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠΈΡΠ°ΡΡ Π²Π΅ΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ, ΡΡΠΎ Π·Π°ΡΡΡΠ΄Π½ΡΠ΅Ρ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠΎΡΠΌΠ°ΡΠ° Π² ΠΊΠ°ΡΡΠΎΠ³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡΡ . Π‘ΡΠ΅Π΄ΠΈ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠΎΠ² ΡΠΎΡΠΌΠ°ΡΠ° ΠΎΡΠΌΠ΅ΡΠ°Π΅ΠΌ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½ΠΈΠ·ΠΊΡΡ ΠΊΡΠΎΡΡΠ±ΡΠ°ΡΠ·Π΅ΡΠ½ΠΎΡΡΡ ΠΈ ΠΎΡΡΡΡΡΡΠ²ΠΈΠ΅ Ρ ΠΎΡΡ Π±Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ ΡΡΠ΅Ρ ΠΌΠ΅ΡΠ½ΠΎΠΉ Π³ΡΠ°ΡΠΈΠΊΠΈ.
ΠΡΡΡΠΈΠ΅ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΡ Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ Ρ ΡΠ°ΠΉΠ»Π°ΠΌΠΈ SVG
ΠΠ°ΠΊ ΡΠΆΠ΅ Π±ΡΠ»ΠΎ ΡΠΊΠ°Π·Π°Π½ΠΎ, ΠΎΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ°ΠΉΠ» SVG ΠΌΠΎΠΆΠ½ΠΎ Π² ΠΎΠ±ΡΡΠ½ΠΎΠΌ ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠΌ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ΅, Π½ΠΎ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ Π½ΡΠΆΠ½ΠΎ ΠΎΠ±Π»Π°Π΄Π°ΡΡ ΡΠΏΠ΅ΡΠΈΡΠΈΡΠ΅ΡΠΊΠΈΠΌΠΈ Π·Π½Π°Π½ΠΈΡΠΌΠΈ. ΠΠΎΡΠ°Π·Π΄ΠΎ ΡΠ΄ΠΎΠ±Π½Π΅Π΅ ΠΈ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½Π΅Π΅ Π·Π°Π΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°ΡΡ Π²Π΅ΠΊΡΠΎΡΠ½ΡΠ΅ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΡ.
Adobe Illustrator
ΠΠ°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΠΉ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π½Π° ΡΠΎΠ»Ρ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ° SVG. Adobe Illustrator ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ Π²Π½ΡΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ Π½Π°Π±ΠΎΡΠΎΠΌ ΡΡΠ΅Π΄ΡΡΠ² Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ Ρ Π²Π΅ΠΊΡΠΎΡΠ½ΠΎΠΉ ΠΈ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ Π³ΡΠ°ΡΠΈΠΊΠΎΠΉ. ΠΠ½ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΈ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠ°ΠΊ ΠΏΡΠΎΡΡΡΠ΅ ΡΡΠΊΠΈΠ·Ρ, ΡΠ°ΠΊ ΠΈ ΡΠ»ΠΎΠΆΠ½ΡΠ΅ Ρ ΡΠ΄ΠΎΠΆΠ΅ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΠΈΠ»Π»ΡΡΡΡΠ°ΡΠΈΠΈ. ΠΡΠΈ ΡΠ°Π±ΠΎΡΠ΅ Ρ ΡΠΎΡΠΌΠ°ΡΠΎΠΌ SVG ΡΠ΅Π΄Π°ΠΊΡΠΎΡ Π΄ΠΎΠΏΡΡΠΊΠ°Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ»ΠΎΠ΅Π² ΠΈ ΡΠ·ΡΠΊΠΎΠ² ΡΡΠ΅Π½Π°ΡΠΈΠ΅Π², ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ².
Boxy SVG
ΠΡΠΊΡΡΡΡ SVG-ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π½Π½ΠΎΠ³ΠΎ Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ Ρ ΡΡΠΈΠΌ ΡΠΎΡΠΌΠ°ΡΠΎΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Boxy SVG. ΠΠ°Π½Π½ΡΠΉ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΎΠΌ ΡΡΡΡΠΏΠ°Π΅Ρ Adobe Illustrator, ΠΎΠ΄Π½Π°ΠΊΠΎ Π² Π½ΡΠΌ Π²Ρ Π½Π°ΠΉΠ΄Π΅ΡΠ΅ Π²ΡΠ΅ Π±Π°Π·ΠΎΠ²ΡΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΈ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ SVG. ΠΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ ΡΠ°Π±ΠΎΡΠ° Ρ ΡΠΈΠ³ΡΡΠ°ΠΌΠΈ ΠΈ ΠΎΠ±ΡΠ΅ΠΊΡΠ°ΠΌΠΈ, ΠΈΠΌΠΏΠΎΡΡ ΡΡΠΈΡΡΠΎΠ² ΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΡ ΡΠΎΡΠΌΠ°ΡΠΎΠ², ΡΠ°Π±ΠΎΡΠ° Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΎΠΉ Pixabay, ΠΏΡΠΎΡΠΌΠΎΡΡ ΠΈ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° SVG ΠΈ CSS. ΠΡΠΎΠ³ΡΠ°ΠΌΠΌΠ° Boxy SVG Π΄ΠΎΡΡΡΠΏΠ½Π° ΠΊΠ°ΠΊ ΠΎΠ½Π»Π°ΠΉΠ½-ΡΠ΅ΡΠ²ΠΈΡ ΠΈ ΠΊΠ°ΠΊ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ Windows 10, MacOS ΠΈ Chrome OS.
Vectr
Π§Π΅ΠΌ ΠΎΡΠΊΡΡΡΡ ΡΠ°ΠΉΠ» SVG Π΅ΡΠ΅? ΠΠ»Ρ ΡΠ°Π±ΠΎΡΡ Ρ ΡΠ°ΠΉΠ»Π°ΠΌΠΈ ΡΡΠΎΠ³ΠΎ ΡΠΈΠΏΠ° Π΅ΡΡΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ° Vectr, ΠΎΡΠ΅Π½Ρ Π΄Π°ΠΆΠ΅ Π½Π΅ΠΏΠ»ΠΎΡ ΠΎ ΡΠΏΡΠ°Π²Π»ΡΡΡΠ°ΡΡΡ Ρ Π²ΠΎΠ·Π»ΠΎΠΆΠ΅Π½Π½ΡΠΌΠΈ Π½Π° Π½Π΅Ρ Π·Π°Π΄Π°ΡΠ°ΠΌΠΈ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ. Π ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π΄ΠΎΡΡΡΠΏΠ½Ρ ΡΠ°ΠΊΠΈΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ, ΠΊΠ°ΠΊ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ ΡΠ°ΡΡΠ΅ΠΉ Π²Π΅ΠΊΡΠΎΡΠ½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΠ°Π±ΠΎΡΠ° ΡΠΎ ΡΠ»ΠΎΡΠΌΠΈ, Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° ΠΈ ΠΏΡΠΈΠΌΠΈΡΠΈΠ²ΠΎΠ², ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΡΡΠ΅ΠΊΡΠΎΠ² (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ, ΠΎΠ±Π²ΠΎΠ΄ΠΊΠ°, Π²Π½Π΅ΡΠ½ΡΡ ΠΈ Π²Π½ΡΡΡΠ΅Π½Π½ΡΡ ΡΠ΅Π½Ρ), ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠΎΠ², ΠΏΠ΅ΡΠ°, Π»ΠΈΠ½ΠΈΠΉ ΠΈ Π΄ΡΡΠ³ΠΈΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ². Π£ΡΠΈΠ»ΠΈΡΠ° Vectr Π±Π΅ΡΠΏΠ»Π°ΡΠ½Π°, Π΅ΡΡΡ Π²Π΅ΡΡΠΈΠΈ Π΄Π»Ρ Windows, Linux ΠΈ Chrome OS.
Inkscape
Π ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ Π΄Π²ΡΡ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌ, Inkscape Π½Π΅ Π½ΡΠΆΠ΄Π°Π΅ΡΡΡ Π² ΠΎΡΠΎΠ±ΠΎΠΌ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠΈ. ΠΡΠΎΡ ΠΌΠΎΡΠ½ΡΠΉ ΠΈ ΡΠΎΠ²Π΅ΡΡΠ΅Π½Π½ΠΎ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΠΉ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ ΠΈ Π΄Π»Ρ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΈ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π²Π΅ΠΊΡΠΎΡΠ½ΠΎΠΉ Π³ΡΠ°ΡΠΈΠΊΠΈ Π»ΡΠ±ΠΎΠΉ ΡΠ»ΠΎΠΆΠ½ΠΎΡΡΠΈ, Π½Π°ΡΠΈΠ½Π°Ρ ΠΎΡ SVG-ΠΈΠΊΠΎΠ½ΠΎΠΊ ΠΈ Π·Π°ΠΊΠ°Π½ΡΠΈΠ²Π°Ρ ΠΏΠΎΠ»Π½ΠΎΡΠ΅Π½Π½ΡΠΌΠΈ ΠΈΠ»Π»ΡΡΡΡΠ°ΡΠΈΡΠΌΠΈ. ΠΡΠΎΠ³ΡΠ°ΠΌΠΌΠ° Inkscape ΡΠΌΠ΅Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ ΠΊΠΎΠ½ΡΡΡΠ°ΠΌΠΈ, ΡΠ΅ΠΊΡΡΠΎΠΌ, ΠΌΠ°ΡΠΊΠ΅ΡΠ°ΠΌΠΈ, ΡΠ»ΠΎΡΠΌΠΈ ΠΈ ΠΊΠ°Π½Π°Π»Π°ΠΌΠΈ, Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ°ΠΌΠΈ ΠΈ ΡΠ΅ΠΊΡΡΡΡΠ°ΠΌΠΈ. Π’Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ Π²Π΅ΠΊΡΠΎΡΠΈΠ·Π°ΡΠΈΡ ΡΠ°ΡΡΡΠΎΠ²ΠΎΠΉ Π³ΡΠ°ΡΠΈΠΊΠΈ, ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠΎΠΌ SVG ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅.
ΠΡΡΠ°ΡΠΈ, ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ SVG ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΡΠ΅ΠΌ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° ΡΠ°ΠΉΠ»Π°, Π½ΠΎ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ Π½ΡΠΆΠ½ΠΎ ΠΈΠΌΠ΅ΡΡ Ρ ΠΎΡΡ Π±Ρ Π±Π°Π·ΠΎΠ²ΡΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΎ ΡΠ·ΡΠΊΠ΅ CSS ΠΈ ΠΊΠΎΠ΄Π°Ρ ΡΠ²Π΅ΡΠΎΠ². ΠΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π², ΠΊ ΠΏΡΠΈΠΌΠ΅ΡΡ, ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ style Π² Π²ΡΠ΄Π΅Π»Π΅Π½Π½ΠΎΠΌ Π½Π° ΡΠΊΡΠΈΠ½ΡΠΎΡΠ΅ Π±Π»ΠΎΠΊΠ΅ ΠΊΠΎΠ΄Π°, ΠΌΡ Π·Π°ΠΌΠ΅Π½ΠΈΠ»ΠΈ Π±Π΅Π»ΡΠΉ ΡΠ²Π΅Ρ Π½Π° ΠΊΡΠ°ΡΠ½ΡΠΉ. Π ΡΠ°ΠΊ, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ, Π΅ΡΠ»ΠΈ ΡΠ΅ΠΌ ΠΈ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ SVG, ΡΠΎ Inkscape ΠΈ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΠΌΠΈ Π΅ΠΌΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ°ΠΌΠΈ.
Π§Π΅ΠΌ ΠΎΡΠΊΡΡΡΡ SVG ΠΎΠ½Π»Π°ΠΉΠ½
ΠΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ΅Π½ ΠΎΠ½Π»Π°ΠΉΠ½-ΡΠ΅Π΄Π°ΠΊΡΠΎΡ SVG, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π²Π΅Π±-Π²Π΅ΡΡΠΈΠΈ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌ Boxy SVG, Vectr ΠΈ Inkscape. Π€ΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΠΉ Π½Π°Π±ΠΎΡ ΡΠ°ΠΊΠΈΡ ΡΠ΅Π΄Π°ΠΊΡΠΈΠΉ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΠΎΠ΄ΠΈΠ½ Π² ΠΎΠ΄ΠΈΠ½, ΠΊΠ°ΠΊ Ρ Π΄Π΅ΡΠΊΡΠΎΠΏΠ½ΡΡ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ². ΠΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Inkscape, ΠΊ ΠΏΡΠΈΠΌΠ΅ΡΡ, ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΏΡΡΡΠΈΡΡ Π² ΡΠ°ΠΌΠΊΠ°Ρ ΠΏΡΠΎΠ΅ΠΊΡΠ° www.rollapp.com/app/inkscape.
ΠΡΠ»ΠΈ ΠΆΠ΅ Π²Ρ ΠΈΡΠΈΡΠ΅ ΡΡΠΎ-ΡΠΎ ΠΏΠΎΠΏΡΠΎΡΠ΅, ΠΏΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΠΎΠ½Π»Π°ΠΉΠ½ΠΎΠ²ΡΠΉ Π²Π΅ΠΊΡΠΎΡΠ½ΡΠΉ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ Sketchpad, Π΄ΠΎΡΡΡΠΏΠ½ΡΠΉ ΠΏΠΎ Π°Π΄ΡΠ΅ΡΡ sketch.io/sketchpad. Π Π°ΠΊΡΠΈΠ²Π΅ Sketchpad ΠΈΠΌΠ΅ΡΡΡΡ ΡΠ°ΠΊΠΈΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ, ΠΊΠ°ΠΊ ΠΊΠΈΡΡΠΈ, Π»ΠΈΠ½ΠΈΠΈ, ΡΡΡΠ΅Π»ΠΊΠΈ, ΠΏΡΠΈΠΌΠΈΡΠΈΠ²Ρ, ΠΊΠ»ΠΈΠΏΠ°ΡΡ, ΠΏΠ΅ΡΠΎ, ΠΌΠ΅Π»ΠΎΠΊ, Π°ΡΡΠΎΠ³ΡΠ°Ρ, Π·Π°Π»ΠΈΠ²ΠΊΠ° ΠΈ Ρ.ΠΏ. ΠΡΡΡ ΡΠ°Π±ΠΎΡΠ° ΡΠΎ ΡΠ»ΠΎΡΠΌΠΈ, ΠΏΠ°Π»ΠΈΡΡΠΎΠΉ ΠΈ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ°ΠΌΠΈ.
Π Π²ΠΎΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ SVG-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Β«Ρ Π½ΡΠ»ΡΒ» ΡΠ΅ΡΠ²ΠΈΡ ΠΌΠ°Π»ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ, Ρ ΠΎΡΡ ΡΡΠ½ΠΊΡΠΈΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ»ΡΠ½ΠΎΠ³ΠΎ ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈΠΌ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ. ΠΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ Π½Π° Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ, ΡΠ°ΠΊ ΡΡΠΎ Π²Ρ Π»Π΅Π³ΠΊΠΎ Ρ Π½ΠΈΠΌ ΡΠ°Π·Π±Π΅ΡΠ΅ΡΠ΅ΡΡ.
ΠΠΎΠ½Π²Π΅ΡΡΠ΅ΡΡ SVG Π² PNG
ΠΡΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΡΠ°ΠΉΠ» SVG ΠΊΠ°ΠΊ ΠΎΠ±ΡΡΠ½ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΎΡΡΠΎ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΈΠ² Π΅Π³ΠΎ Π½Π° ΠΎΠΊΠ½ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, Π½ΠΎ Π±ΡΠ²Π°Π΅Ρ ΠΈ ΡΠ°ΠΊ, ΡΡΠΎ SVG-Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΊΠΎΠ½Π²Π΅ΡΡΠΈΡΠΎΠ²Π°ΡΡ Π² Π±ΠΎΠ»Π΅Π΅ Π΄ΠΎΡΡΡΠΏΠ½ΡΠΉ ΠΈ ΠΏΡΠΈΠ²ΡΡΠ½ΡΠΉ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΡΠΎΡΠΌΠ°Ρ, ΡΠΊΠ°ΠΆΠ΅ΠΌ, PNG. ΠΡΠ»ΠΈ ΠΊΠΎΠ½Π²Π΅ΡΡΠΈΡΡΠ΅ΠΌΡΡ ΡΠ°ΠΉΠ»ΠΎΠ² ΠΌΠ½ΠΎΠ³ΠΎ, Π΅ΡΡΡ ΡΠΌΡΡΠ» Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎΠΉ ΡΡΠ»Π·ΠΎΠΉ SVG2PNG, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠ΅ΠΉ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²ΡΠ²Π°ΡΡ SVG Π² PNG Π² ΠΏΠ°ΠΊΠ΅ΡΠ½ΠΎΠΌ ΡΠ΅ΠΆΠΈΠΌΠ΅. Π§ΡΠΎΠ±Ρ ΠΊΠΎΠ½Π²Π΅ΡΡΠΈΡΠΎΠ²Π°ΡΡ SVG Π² PNG, Π·Π°ΠΏΡΡΡΠΈΡΠ΅ ΡΡΠΈΠ»ΠΈΡΡ, ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΈΡΠ΅ Π² Π΅Π΅ ΠΎΠΊΠ½ΠΎ Π²Π΅ΠΊΡΠΎΡΠ½ΡΠ΅ ΡΠ°ΠΉΠ»Ρ, Π½Π°ΠΆΠΌΠΈΡΠ΅ Β«StartΒ» ΠΈ ΠΏΠΎΠ»ΡΡΠΈΡΠ΅ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ.
Π ΠΎΡΡΠ°Π»ΡΠ½ΡΡ ΡΠ»ΡΡΠ°ΡΡ Π±ΡΠ΄Π΅Ρ ΠΌΠ΅Π½ΡΡΠ΅ ΠΌΠΎΡΠΎΠΊΠΈ, Π΅ΡΠ»ΠΈ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ΡΡ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΠΌΠΈ ΠΊΠΎΠ½Π²Π΅ΡΡΠ΅ΡΠ°ΠΌΠΈ SVG Π² PNG, ΡΠ°Π±ΠΎΡΠ°ΡΡΠΈΠΌΠΈ Π² ΡΠ΅ΠΆΠΈΠΌΠ΅ ΠΎΠ½Π»Π°ΠΉΠ½. Π ΡΠ°ΡΡΠ½ΠΎΡΡΠΈ, ΡΡΠΎ svgtopng.com/ru, convertio.co/ru/svg-png ΠΈ image.online-convert.com/ru/convert-to-png.
ΠΠ°ΠΊΠΎΠΉ ΠΈΠ· Π½ΠΈΡ ΡΠ΄ΠΎΠ±Π½Π΅Π΅, ΡΠ΅ΡΠ°ΠΉΡΠ΅ ΡΠ°ΠΌΠΈ. ΠΡΠ΅ ΡΡΠΈ ΡΡΠΈ ΠΊΠΎΠ½Π²Π΅ΡΡΠ΅ΡΠ° Π±Π΅ΡΠΏΠ»Π°ΡΠ½Ρ ΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΠ°Π±ΠΎΡΡ Π² ΠΏΠ°ΠΊΠ΅ΡΠ½ΠΎΠΌ ΡΠ΅ΠΆΠΈΠΌΠ΅, Π° Online-Convert Π²Π΄ΠΎΠ±Π°Π²ΠΎΠΊ ΠΊΠΎ Π²ΡΠ΅ΠΌΡ Π΅ΡΠ΅ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π³ΠΈΠ±ΠΊΠΎΠΉ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ Π²ΡΡ ΠΎΠ΄Π½ΡΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠ² PNG-ΡΠ°ΠΉΠ»Π°.
ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π²Π΅ΠΊΡΠΎΡΠ½ΠΎΠΉ Π³ΡΠ°ΡΠΈΠΊΠΈ Π² Π²Π΅Π±-Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ
ΠΠ΅ΠΊΡΠΎΡΠ½Π°Ρ Π³ΡΠ°ΡΠΈΠΊΠ° ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠ»Π΅Π·Π½Π° Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ ΡΠ»ΡΡΠ°ΡΡ . ΠΠ½Π° ΠΈΠΌΠ΅Π΅Ρ ΠΌΠ°Π»ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠ°ΠΉΠ»Π° ΠΈ Π²ΡΡΠΎΠΊΡΡ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΠΎΡΡΡ β ΠΏΡΠΈ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠΈ ΠΌΠ°ΡΡΡΠ°Π±Π° ΠΏΠΈΠΊΡΠ΅Π»ΠΈ Π½Π΅ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°ΡΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ Π³ΡΠ°ΡΠΈΠΊΠΎΠΉ. Π Π΄Π°Π½Π½ΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ ΠΏΠΎΠΊΠ°ΠΆΠ΅ΠΌ, ΠΊΠ°ΠΊ Π²ΡΡΡΠ°ΠΈΠ²Π°ΡΡ Π²Π΅ΠΊΡΠΎΡΠ½ΡΡ Π³ΡΠ°ΡΠΈΠΊΡ Π½Π° ΠΠ°ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΠ°Π²ΡΠΊΠΈ: | ΠΠ½Π°Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΠ² 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, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ Π΄Π΅Π»Π°ΡΡ Π²Π°ΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ°ΠΊ, ΡΡΠΎΠ± ΠΎΠ½ΠΈ ΠΌΠΎΠ³Π»ΠΈ Π»ΡΡΡΠ΅ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½Π° ΡΠ°Π·Π½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ .
ΠΠΎΠ½Π²Π΅ΡΡΠΈΡΡΠ΅ΠΌ 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Β», Π²ΡΠ΄Π΅Π»ΡΠ΅ΠΌ ΠΊΠΎΠ΄, Π° Π·Π°ΡΠ΅ΠΌ ΠΆΠΌΠ΅ΠΌ Π½Π° ΠΈΠΊΠΎΠ½ΠΊΡ ΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ, ΡΠ°ΠΊ ΠΌΡ ΠΏΠΎΠ»ΡΡΠΈΠΌ Π² Π±ΡΡΠ΅Ρ ΠΊΠΎΠ΄ Π½Π°ΡΠ΅ΠΉ ΡΠ²Π³-ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ.
ΠΠ°ΡΠ΅ΠΌ ΠΏΠΎΠ»ΡΡΠ΅Π½Π½ΡΠΉ ΠΊΠΎΠ΄ Π²ΡΡΠ°Π²Π»ΡΠ΅ΠΌ Π² ΠΎΠΊΠ½ΠΎ Π²ΡΡΠ΅, ΠΆΠΌΠ΅ΠΌ 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 Β«Π»ΡΠ³ΠΊΠΈΠ΅Β» ΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΡΠ΅, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΌΠΎΠ΄ΠΈΡΠΈΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ΅ΡΠ΅Π· ΠΊΠΎΠ΄. ΠΠ½ΠΈ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°ΡΡ Π²ΡΡΠΎΠΊΠΎΠ΅ ΠΊΠ°ΡΠ΅ΡΡΠ²ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΊΡΠ°Π½Π°. Π‘ Π½ΠΈΠΌΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΊΠ°ΠΊ Ρ ΠΎΠ±ΡΡΠ½ΡΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΠ½Π»Π°ΠΉΠ½ Π² HTML. ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΎ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π°Ρ ΡΠΎΡΠΌΠ°ΡΠ° Π² ΡΡΠ°ΡΡΠ΅.
ΠΠ°ΡΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ SVG
ΠΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½Ρ ΡΡΡΠΊΠΈΠ΅, Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ ΠΈΠ»ΠΈ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°, ΠΈΠΊΠΎΠ½ΠΊΠΈ, Π»ΠΎΠ³ΠΎΡΠΈΠΏΡ, Π²Π΅ΠΊΡΠΎΡΠ½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΡΠΎΠΈΡ ΠΏΠΎΠ΄ΡΠΌΠ°ΡΡ ΠΎΠ± ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΠΎΡΠΌΠ°ΡΠ° SVG. ΠΠΈΠΆΠ΅ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Ρ Π΅Π³ΠΎ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΠΈ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π°.
ΠΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΡΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΠ΅ΠΌ ΠΊΠ°ΡΠ΅ΡΡΠ²Π° pixel perfect
ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΠΎΡΠΌΠ°ΡΠ° PNG ΠΈΠ»ΠΈ ΡΠ°ΡΡΡΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Ρ ΠΏΠΈΠΊΡΠ΅Π»ΡΠΌΠΈ. ΠΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΡΠ½ΠΈΠΆΠ°Π΅Ρ Π΅Ρ ΠΊΠ°ΡΠ΅ΡΡΠ²ΠΎ. ΠΠΎΡΡΠΎΠΌΡ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·Π½ΡΡ ΡΠΎΡΠΎ Π΄Π»Ρ Π΄Π΅Π²Π°ΠΉΡΠΎΠ² Ρ ΡΠ°Π·Π½ΡΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΊΡΠ°Π½Π°.
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ SVG ΡΠΎΡ ΡΠ°Π½ΡΡΡ ΠΊΠ°ΡΠ΅ΡΡΠ²ΠΎ ΠΏΡΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ Π½Π°ΡΠΈΡΠΎΠ²Π°Π½Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΠ΄Π°, Π° Π½Π΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.
Π‘ΡΠ°Π²Π½Π΅Π½ΠΈΠ΅ ΠΊΠ°ΡΠ΅ΡΡΠ²Π° ΡΠ°ΡΡΡΠΎΠ²ΡΡ ΠΈ Π²Π΅ΠΊΡΠΎΡΠ½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΌΠΎΠ΄ΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ SVG ΠΌΠΎΠΆΠ½ΠΎ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ»ΠΈ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅ΡΠ°, ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΡΡΠΈΡΡΡ ΠΈ ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅. ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²Π΅ΠΊΡΠΎΡΠ½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΌΠΎΠΆΠ½ΠΎ Π΄Π΅Π»Π°ΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌΠΈ.
ΠΠ΅Π±ΠΎΠ»ΡΡΠΎΠΉ Β«Π²Π΅ΡΒ» ΡΠ°ΠΉΠ»ΠΎΠ²
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ PNG ΡΡΠ°Π½ΠΎΠ²ΡΡΡΡ ΠΎΡΠ΅Π½Ρ Β«ΡΡΠΆΡΠ»ΡΠΌΠΈΒ», ΠΊΠΎΠ³Π΄Π° Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ Π²ΡΡΠΎΠΊΠΎΠ΅ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅. ΠΡΠΎ Π½Π΅Π³Π°ΡΠΈΠ²Π½ΠΎ Π²Π»ΠΈΡΠ΅Ρ Π½Π° ΡΠΊΠΎΡΠΎΡΡΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡΡ, ΡΡΠΎ Π² ΡΠ²ΠΎΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ ΠΌΠΎΠΆΠ΅Ρ ΡΡ ΡΠ΄ΡΠΈΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΡ ΡΠ°ΠΉΡΠ° Π² ΠΏΠΎΠΈΡΠΊΠΎΠ²ΠΎΠΉ Π²ΡΠ΄Π°ΡΠ΅.
Π€Π°ΠΉΠ»Ρ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ JPG ΡΡΡΡ Β«Π»Π΅Π³ΡΠ΅Β» ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ Π² PNG, Π½ΠΎ Π²ΡΡ ΡΠ°Π²Π½ΠΎ ΠΎΠ½ΠΈ ΡΠ»ΠΈΡΠΊΠΎΠΌ Β«ΡΡΠΆΡΠ»ΡΠ΅Β». Π ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ SVG ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡ ΡΠΎΠ±ΠΎΠΉ ΠΊΠΎΠ΄, ΠΏΠΎΡΡΠΎΠΌΡ ΠΎΠ½ΠΈ Β«Π²Π΅ΡΡΡΒ» ΠΎΡΠ΅Π½Ρ ΠΌΠ°Π»ΠΎ. ΠΠΎΡΡΠΎΠΌΡ ΡΠΌΠ΅Π»ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΡΠΎΡ ΡΠΎΡΠΌΠ°Ρ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΈΠΊΠΎΠ½ΠΎΠΊ, Π»ΠΎΠ³ΠΎΡΠΈΠΏΠΎΠ² ΠΈ Π΄ΡΡΠ³ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°.
ΠΠΎΡΡΡΠΏΠ½ΠΎΡΡΡ
ΠΡΠ»ΠΈ SVG-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°Ρ ΡΠ΅ΠΊΡΡ, ΠΏΠΎΠΈΡΠΊΠΎΠ²ΠΈΠΊΠΈ ΠΌΠΎΠ³ΡΡ ΠΈΡ ΠΈΠ½Π΄Π΅ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΠΈ Π²ΡΠ΄Π°Π²Π°ΡΡ Π² ΠΎΡΠ²Π΅Ρ Π½Π° Π·Π°ΠΏΡΠΎΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ. Π‘ΠΊΡΠΈΠ½ΡΠΈΠ΄Π΅ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΡΠ»Π°Π±ΠΎΠ²ΠΈΠ΄ΡΡΠΈΠ΅ ΠΈ ΡΠ»Π΅ΠΏΡΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ, ΡΠΎΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ SVG. ΠΡΠΎ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΡ ΡΠ°ΠΉΠ»ΠΎΠ² ΡΡΠΎΠ³ΠΎ ΡΠΎΡΠΌΠ°ΡΠ° Π΄Π»Ρ Π²ΡΠ΅Ρ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Π΅ΠΉ ΡΠ°ΠΉΡΠ°.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ SVG: ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½ΡΠ½Π½ΡΠ΅ ΠΏΡΠ°ΠΊΡΠΈΠΊΠΈ
ΠΠ΅ΠΊΡΠΎΡΠ½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄ΠΎΠ»Π³ΠΎ Π±ΡΠ»ΠΈ Π½Π΅ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠΌΠΈ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Π½Π΅ Π²ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΈΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π»ΠΈ. Π Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ ΡΡΠ° ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° ΡΠ΅ΡΠ΅Π½Π°. ΠΠΎΡΡΠΎΠΌΡ ΡΠΎΡΠΌΠ°Ρ Π°ΠΊΡΠΈΠ²Π½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠ΅ΡΠ΅Π½ΠΈΡ Π·Π°Π΄Π°Ρ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ. ΠΠ°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠ΅ ΠΊΠ΅ΠΉΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Ρ Π½ΠΈΠΆΠ΅.
ΠΠΎΠ³ΠΎΡΠΈΠΏΡ ΠΈ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π² SVG
ΠΠΎΠ³ΠΎΡΠΈΠΏΡ ΠΈ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠΎΡ ΡΠ°Π½ΡΡΡ ΠΊΠ°ΡΠ΅ΡΡΠ²ΠΎ Π½Π° ΡΠΊΡΠ°Π½Π°Ρ Ρ Π»ΡΠ±ΡΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ. Π§ΡΡΠΊΠΎΡΡΡ Π½ΡΠΆΠ½Π° Π²ΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° ΡΠ°ΠΉΡΠ°: ΠΎΡ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π΄ΠΎ ΡΠΊΡΠ°Π½Π½ΠΎΠΉ Π·Π°ΡΡΠ°Π²ΠΊΠΈ.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ SVG ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ Π½Π°Π΄ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Π»ΠΈΠ½ΠΈΠ΅ΠΉ, ΡΠΎΡΠΌΠΎΠΉ ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. Π’Π°ΠΊΠΆΠ΅ ΡΠΎΡΠΌΠ°Ρ ΠΎΠ±Π»Π΅Π³ΡΠ°Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΌΠ°Π½ΠΈΠΏΡΠ»ΠΈΡΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ.
ΠΠ½ΡΠΎΠ³ΡΠ°ΡΠΈΠΊΠ°
ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ SVG ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈ ΠΎΠ±Π½ΠΎΠ²Π»ΡΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ ΠΈΠ»ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π΄Π°Π½Π½ΡΡ . ΠΠΎΡΡΠΎΠΌΡ SVG β ΠΈΠ΄Π΅Π°Π»ΡΠ½ΡΠΉ Π²Π°ΡΠΈΠ°Π½Ρ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ ΠΊΠ°ΡΡ ΠΈ ΠΈΠ½ΡΠΎΠ³ΡΠ°ΡΠΈΠΊΠΈ.
ΠΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ SVG ΡΠ΄ΠΎΠ±Π½ΠΎ Π΄Π΅Π»Π°ΡΡ ΡΠ°Π·Π½ΡΠ΅ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠΎΡΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈΠ»ΠΈ ΠΏΡΠ΅Π²ΡΠ°ΡΠ΅Π½ΠΈΠ΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² Π΄ΡΡΠ³ΠΎΠΉ. Π ΠΏΡΠΈΠΌΠ΅ΡΡ, ΠΌΠΎΠΆΠ½ΠΎ ΠΌΠ΅Π½ΡΡΡ ΡΠΎΡΠΌΡ Π±ΡΠΊΠ² ΠΈΠ»ΠΈ ΡΡΠ°Π½ΡΡΠΎΡΠΌΠΈΡΠΎΠ²Π°ΡΡ ΠΎΠ΄ΠΈΠ½ Π»ΠΎΠ³ΠΎΡΠΈΠΏ Π² Π΄ΡΡΠ³ΠΎΠΉ.
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ
SVG ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ CSS-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΠΏΠΎΡΡΠΎΠΌΡ ΡΡΠΎΠ½ΡΠ΅Π½Π΄-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌ Π½Π΅ ΠΏΡΠΈΠ΄ΡΡΡΡ ΠΈΠ·ΡΡΠ°ΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ΅Ρ Π½ΠΈΠΊΠΈ. Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ SMIL SVG β ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠΌ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π²Π΅ΠΊΡΠΎΡΠ½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. SMIL ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌ Π΄Π°ΠΆΠ΅ Π±ΠΎΠ»ΡΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ, ΡΠ΅ΠΌ ΠΎΠ±ΡΡΠ½Π°Ρ CSS-Π°Π½ΠΈΠΌΠ°ΡΠΈΡ.
ΠΠ»Π»ΡΡΡΡΠ°ΡΠΈΠΈ ΠΈ ΡΠΈΡΡΠ½ΠΊΠΈ
ΠΠ±ΡΡΠ½ΡΠ΅ ΡΠΈΡΡΠ½ΠΊΠΈ ΠΈ ΠΈΠ»Π»ΡΡΡΡΠ°ΡΠΈΠΈ, Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΈ Π½Π΅ ΡΠ»ΠΈΡΠΊΠΎΠΌ ΡΠ»ΠΎΠΆΠ½ΡΠ΅, Π»Π΅Π³ΠΊΠΎ ΡΡΠ°Π½ΡΡΠΎΡΠΌΠΈΡΠΎΠ²Π°ΡΡ Π² SVG. Π’Π°ΠΊΠΆΠ΅ ΡΡΠΎ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΡΠΉ ΡΠΎΡΠΌΠ°Ρ Π΄Π»Ρ ΡΠΊΠ΅ΡΡΠ΅ΠΉ, ΡΡ Π΅ΠΌ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π΄Π»Ρ ΠΈΠ»Π»ΡΡΡΡΠ°ΡΠΈΠΉ, ΡΡ Π΅ΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡΠΈΡ ΠΏΡΠΈΠ½ΡΠΈΠΏ ΡΠ°Π±ΠΎΡΡ ΠΊΠ°ΠΊΠΎΠ³ΠΎ-ΡΠΎ ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌΠ°.
ΠΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΡ ΠΈ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ
SVG ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ»ΠΎΠΆΠ½ΡΡ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ½ΡΠ΅Π³ΡΠΈΡΡΡΡΡΡ Ρ Π½Π°ΡΡΡΠ΅Π½Π½ΡΠΌΠΈ ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡΠΌΠΈ (RIA, rich internet application). ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌ ΡΠΎΡΠΌΠ°ΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° ΠΏΠΎΠ»ΡΡΠ°ΡΡΡΡ Π»ΡΠ³ΠΊΠΈΠΌΠΈ, ΠΏΡΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌΠΈ ΠΈ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠΌΠΈ.
ΠΠ°Π»Π΅Π΅ ΡΠ΅ΡΡ ΠΏΠΎΠΉΠ΄ΡΡ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΡΠ°ΠΉΠ»Ρ SVG Π½Π° ΡΠ°ΠΉΡ.
ΠΠ·ΡΡΠ°ΠΉΡΠ΅ Π²ΡΡΡΡΠΊΡ Π½Π° Π₯Π΅ΠΊΡΠ»Π΅ΡΠ΅
Π ΡΠ°ΠΌΠΊΠ°Ρ ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΈ Β«ΠΠ΅ΡΡΡΠ°Π»ΡΡΠΈΠΊΒ» Π²Ρ ΠΈΠ·ΡΡΠΈΡΠ΅ HTML5 ΠΈ CSS3, Π½Π°ΡΡΠΈΡΠ΅ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Flex, Grid, Sass, Bootstrap. Π ΠΏΡΠΎΡΠ΅ΡΡΠ΅ ΠΎΠ±ΡΡΠ΅Π½ΠΈΡ ΡΠ²Π΅ΡΡΡΠ°Π΅ΡΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΠ»Π½ΠΎΡΠ΅Π½Π½ΡΡ Π»Π΅Π½Π΄ΠΈΠ½Π³ΠΎΠ² ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡΠ΅ ΠΈΡ Π² ΠΏΠΎΡΡΡΠΎΠ»ΠΈΠΎ. ΠΠ°Π·ΠΎΠ²ΡΠ΅ ΠΊΡΡΡΡ Π² ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΈ Π΄ΠΎΡΡΡΠΏΠ½Ρ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ SVG Π² HTML ΠΈ CSS
Π€Π°ΠΉΠ»Ρ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ SVG ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ ΡΠ°ΠΉΡΠ° ΡΡΠ΅Π΄ΡΡΠ²Π°ΠΌΠΈ HTML ΠΈ CSS.
Π’Π΅Π³ img
ΠΠ΅ΡΠ²ΡΠΉ ΡΠΏΠΎΡΠΎΠ± β URL ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ Π² Π°ΡΡΠΈΠ±ΡΡΠ΅ src ΡΠ΅Π³Π° img. Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π²Ρ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Ρ ΡΠΎΡΠΌΠ°ΡΠΎΠΌ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°ΠΌΠΈ jpg, png ΠΈ ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅.
ΠΡΠ»ΠΈ Π²Ρ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ΅ΡΠ΅Π· ΡΠ΅Π³ img, Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS. ΠΠΎ Π²Ρ Π½Π΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΌΠ°Π½ΠΈΠΏΡΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ JavaScript ΠΈ Π²Π½Π΅ΡΠ½ΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ. ΠΡΠΈ ΡΡΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ CSS ΠΈΠ½Π»Π°ΠΉΠ½ Π΄Π»Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΊΠΎΠ΄Π° SVG.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ SVG Π² CSS
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ SVG ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ Π² ΡΠ²ΠΎΠΉΡΡΠ²Π΅ background-image, ΠΊΠ°ΠΊ ΡΠΎΡΠΎ Π² Π΄ΡΡΠ³ΠΈΡ ΡΠΎΡΠΌΠ°ΡΠ°Ρ . ΠΠΈΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅Ρ ΠΊΠΎΠ΄Π°.
ΠΡΠΎΡ ΡΠΏΠΎΡΠΎΠ± ΡΠΎΡ ΡΠ°Π½ΡΠ΅Ρ Π²ΡΠ΅ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π° Π²Π΅ΠΊΡΠΎΡΠ½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, Π²ΠΊΠ»ΡΡΠ°Ρ Π²ΡΡΠΎΠΊΡΡ ΡΠ΅ΡΠΊΠΎΡΡΡ Π½Π° ΡΠΊΡΠ°Π½Π°Ρ Ρ Π»ΡΠ±ΡΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ. Π’Π°ΠΊΠΆΠ΅ ΡΡΠΎΡ ΡΠΏΠΎΡΠΎΠ± ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡ, ΠΏΠΎΠ²ΡΠΎΡΡΡΡ ΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
ΠΠ½Π»Π°ΠΉΠ½ SVG Π² HTML
Π€Π°ΠΉΠ» SVG ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΠΊΡΡΡΡ Π² Π»ΡΠ±ΠΎΠΌ ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠΌ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ΅, ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠΎΠ΄ ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π΅Π³ΠΎ Π² HTML-ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡΠΎ Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ SVG ΠΈΠ½Π»Π°ΠΉΠ½. ΠΡΠΈΠΌΠ΅Ρ Π½ΠΈΠΆΠ΅.
Π’Π°ΠΊΠΎΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ ΡΠΌΠ΅Π½ΡΡΠ°Π΅Ρ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ http-Π·Π°ΠΏΡΠΎΡΠΎΠ² ΠΈ ΡΠΎΠΊΡΠ°ΡΠ°Π΅Ρ Π²ΡΠ΅ΠΌΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡΡ. Π ΡΠ΅Π³Π°Ρ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΊΠ»Π°ΡΡΡ ΠΈ id ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΡ Π΄Π»Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ SVG Π² ΡΠΎΡΠΌΠ°ΡΠ΅ ΠΊΠΎΠ΄Π°
Π SVG-ΡΠ°ΠΉΠ»Π°Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΡΠΉ Π½Π° XML ΡΠ·ΡΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠΏΠΈΡΡΠ²Π°Π΅Ρ Π²Π΅ΠΊΡΠΎΡΠ½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠ°ΠΊ ΠΈ HTML, ΡΡΠΎ ΡΠ·ΡΠΊ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ. ΠΠΎ ΠΊΠΎΠ΄ SVG ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΌΠ°Π½ΠΈΠΏΡΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΠΊ Π½ΠΈΠΌ ΡΡΡΠ΅ΠΊΡΡ.
ΠΠΎΠ΄ SVG ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π² HTML-ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈΠ»ΠΈ ΠΏΠΈΡΠ°ΡΡ Π΅Π³ΠΎ Π² ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ ΡΠ°ΠΉΠ»Π°Ρ . ΠΠΈΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΎΠΊΡΡΠΆΠ½ΠΎΡΡΠΈ ΠΈ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ SVG.
ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΎ ΡΠ°Π±ΠΎΡΠ΅ Ρ ΠΏΡΠΎΡΡΡΠΌΠΈ ΡΠΈΠ³ΡΡΠ°ΠΌΠΈ Π½ΠΈΠΆΠ΅.
Π ΠΈΡΡΠ΅ΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ SVG: ΠΊΡΡΠ³
Π§ΡΠΎΠ±Ρ Π½Π°ΡΠΈΡΠΎΠ²Π°ΡΡ ΠΊΡΡΠ³, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΡΡΠΈ Π°ΡΡΠΈΠ±ΡΡΠ°:
ΠΠΎΠ΄, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΠΈΡΠΎΠ²Π°ΡΡ ΠΊΡΡΠ³, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π½ΠΈΠΆΠ΅. Π¦Π²Π΅Ρ Π»ΠΈΠ½ΠΈΠΈ ΠΈ ΡΠΎΠ½Π° ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΈΠ½Π»Π°ΠΉΠ½ ΠΈΠ»ΠΈ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ.
ΠΡΡΠ³ Π½Π°ΡΠΈΡΠΎΠ²Π°Π½ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΎΠ±ΡΡΠΆΠ΄Π°Π΅ΠΌΠΎΠ³ΠΎ ΡΠΎΡΠΌΠ°ΡΠ°
Π ΠΈΡΡΠ΅ΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ SVG: ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠΎΠ² Ρ ΠΏΠΎΠΌΠΎΡΡΡ SVG ΠΏΠΎΡ ΠΎΠΆΠ΅ Π½Π° ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΠΊΡΡΠΆΠ½ΠΎΡΡΠ΅ΠΉ. ΠΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ ΡΠ΅Π½ΡΡΠ° ΠΏΠΎ ΠΎΡΡΠΌ x ΠΈ y, Π° ΡΠ°ΠΊΠΆΠ΅ Π²ΡΡΠΎΡΡ ΠΈ ΡΠΈΡΠΈΠ½Ρ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ°. ΠΡΠΈΠΌΠ΅Ρ ΠΊΠΎΠ΄Π° Π½ΠΈΠΆΠ΅.
ΠΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ Π½Π°ΡΠΈΡΠΎΠ²Π°Π½ Ρ ΠΏΠΎΠΌΠΎΡΡΡ SVG
Π ΠΈΡΡΠ΅ΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ SVG: Π»ΠΈΠ½ΠΈΡ
Π§ΡΠΎΠ±Ρ Π½Π°ΡΠΈΡΠΎΠ²Π°ΡΡ Π»ΠΈΠ½ΠΈΡ, Π½ΡΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ ΠΏΠΎ ΠΎΡΡΠΌ x ΠΈ y Π΄Π²ΡΡ ΡΠΎΡΠ΅ΠΊ. Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΡΠ²Π΅Ρ ΠΈ ΡΠΎΠ»ΡΠΈΠ½Ρ Π»ΠΈΠ½ΠΈΠΈ. ΠΠΎΠ΄ Π½ΠΈΠΆΠ΅ Π½Π°Π²Π΅ΡΠ½ΡΠΊΠ° Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΏΠΎΠ½ΡΡΠ½Π΅Π΅ ΠΎΠ±ΡΡΡΠ½Π΅Π½ΠΈΡ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ.
Π ΠΈΡΡΠ΅ΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ SVG: Π·Π²Π΅Π·Π΄Π°
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ SVG ΠΌΠΎΠΆΠ½ΠΎ ΡΠΈΡΠΎΠ²Π°ΡΡ Π·Π²ΡΠ·Π΄Ρ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΠΌΠ½ΠΎΠ³ΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠΈ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ ΡΠΎΡΠ΅ΠΊ ΡΠ³Π»ΠΎΠ² ΡΠΈΠ³ΡΡΡ. ΠΡΠΈΠΌΠ΅Ρ ΠΊΠΎΠ΄Π° Π½ΠΈΠΆΠ΅.
Π‘Π»ΠΎΠΆΠ½ΡΠΉ ΠΌΠ½ΠΎΠ³ΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ SVG
Π ΠΈΡΡΠ΅ΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ SVG: ΠΏΡΡΠΈ
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΌΠΎΠΆΠ½ΠΎ ΡΠΈΡΠΎΠ²Π°ΡΡ Π»ΠΎΠΌΠ°Π½ΡΠ΅ ΠΊΡΠΈΠ²ΡΠ΅. ΠΠ½ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΎΠ±ΡΠ΅ΠΊΡΡ ΡΠ°Π·Π½ΠΎΠΉ ΡΠΎΡΠΌΡ. Π‘ ΠΏΠΎΠΌΠΎΡΡΡ Π°ΡΡΠΈΠ±ΡΡΠ° d ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΠΏΡΡΡ ΠΈΠ»ΠΈ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ Π»ΠΎΠΌΠ°Π½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ. ΠΠΎΠΌΠ°Π½Π΄Π° M ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, Π° m β Π΄Π»Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ. Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΠΌΠ°Π½Π΄Ρ L ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΡΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ Π½ΠΎΠ²ΠΎΠΉ ΡΠΎΡΠΊΠΈ.
ΠΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ path:
Π ΡΡΠΎ ΠΏΡΠΈΠΌΠ΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ Π»ΠΈΠ½ΠΈΠΉ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ path:
Π ΠΈΡΡΠ΅ΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ SVG: ΠΊΡΠΈΠ²ΡΠ΅
ΠΠ»Ρ ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΊΡΠΈΠ²ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΊΠΎΠΌΠ°Π½Π΄Π° C. Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π½ΠΈΠΆΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΡΡ Π½Π°ΡΠ°Π»ΠΎ ΠΊΡΠΈΠ²ΠΎΠΉ, ΡΠΎΡΠΊΠΈ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΈ ΠΊΠΎΠ½Π΅Ρ ΠΊΡΠΈΠ²ΠΎΠΉ.
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΠΌΠ°Π½Π΄Ρ S ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΡΡΡ ΠΊΡΠΈΠ²ΡΠ΅ ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠ»ΠΎΠΆΠ½ΡΠ΅ ΡΠΎΡΠΌΡ.
Π§ΠΈΡΠ°ΠΉΡΠ΅ ΡΠ°ΠΊΠΆΠ΅
ΠΠΎΠ³Π΄Π° ΡΠΎΠ±ΠΎΡΡ Π·Π°ΠΌΠ΅Π½ΡΡ Π²Π΅ΡΡΡΠ°Π»ΡΡΠΈΠΊΠΎΠ² Π½Π° ΡΡΠ½ΠΊΠ΅ ΡΡΡΠ΄Π°: Π±ΠΎΠ»ΡΡΠ°Ρ ΠΎΠ±Π·ΠΎΡΠ½Π°Ρ ΡΡΠ°ΡΡΡ ΠΎ ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΈ Ρ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡΠΌΠΈ ΡΠΊΡΠΏΠ΅ΡΡΠΎΠ².
ΠΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ SVG
Π€ΠΎΡΠΌΠ°Ρ SVG ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΠ΅Π³
ΠΠ±ΡΡΠ½ΡΠΉ ΡΠ΅ΠΊΡΡ ΡΠΎΠ·Π΄Π°Π½ Ρ ΠΏΠΎΠΌΠΎΡΡΡ SVG
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° stroke ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°ΡΡ ΡΠ²Π΅Ρ ΡΡΠΈΡΡΠ°. ΠΠΎΠ·ΠΈΡΠΈΡ ΡΠ΅ΠΊΡΡΠ° Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΠ°ΠΌΠΈ x ΠΈ y. Π ΡΠ²ΠΎΠΉΡΡΠ²Π°Ρ stroke ΠΈ fill ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΡ.
ΠΠ°ΠΊ ΡΠΏΡΠ°Π²Π»ΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ ΡΡΠΈΡΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ svg
SVG ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΏΡΠ°Π²Π»ΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ ΡΡΠΈΡΡΠ°:
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅Π³Π° ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΠ±ΡΠ°ΡΡ ΠΎΠ΄Π½ΠΎ ΠΈΠ»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ»ΠΎΠ² Π² ΡΠ΅ΠΊΡΡΠ΅ ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°.
Π’Π°ΠΊΠΆΠ΅ SVG ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠ΅ΡΠ΅Π²ΠΎΡΠ°ΡΠΈΠ²Π°ΡΡ ΡΠ΅ΠΊΡΡ, ΠΌΠ΅Π½ΡΡΡ ΡΠ²Π΅Ρ Π»ΠΈΠ½ΠΈΠΈ ΠΈ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π±ΡΠΊΠ² ΠΈ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ Π΄ΡΡΠ³ΠΈΠ΅ ΡΡΠ°Π½ΡΡΠΎΡΠΌΠ°ΡΠΈΠΈ. ΠΠΈΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠΎΠ½ΡΡΡΠ° ΡΠ΅ΠΊΡΡΠ°, Π½Π°ΠΏΠΈΡΠ°Π½Π½ΠΎΠ³ΠΎ ΡΠΏΡΠ°Π²Π° Π½Π°Π»Π΅Π²ΠΎ. ΠΠΎΡΠ»Π΅Π΄Π½Π΅Π΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ² direction ΠΈ unicode-bidi.
ΠΌΠΎΠΆΠ½ΠΎ ΡΠ²ΡΠ·ΡΠ²Π°ΡΡ ΡΠ΅ΠΊΡΡ Ρ ΠΏΡΡΡΠΌΠΈ. ΠΡΠΎ Π΄Π΅Π»Π°Π΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π°ΡΡΠΈΠ±ΡΡΠ° 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. ΠΠ½Π΅Π½ΠΈΠ΅ Π°Π²ΡΠΎΡΠ° ΠΎΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠ±Π»ΠΈΠΊΠ°ΡΠΈΠΈ ΠΌΠΎΠΆΠ΅Ρ Π½Π΅ ΡΠΎΠ²ΠΏΠ°Π΄Π°ΡΡ Ρ ΠΌΠ½Π΅Π½ΠΈΠ΅ΠΌ Π°Π΄ΠΌΠΈΠ½ΠΈΡΡΡΠ°ΡΠΈΠΈ Β«Π₯Π΅ΠΊΡΠ»Π΅ΡΠ°Β».
ΠΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΠΎΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΠΉΡΠ΅ΡΡ:
Π ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ Π³ΠΎΠ²ΠΎΡΡΡ, ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΡΡΠΎΡΠ½Π½ΠΎ ΡΡΠΈΡΡΡΡ Π΄Π°ΠΆΠ΅ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΏΡΠΎΡΡΠΎ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡΡ Π½Π° ΠΌΠ΅ΡΡΠ΅. Π Π°Π·Π²ΠΈΠ²Π°ΠΉΡΠ΅ΡΡ Ρ Π½Π°ΠΌΠΈ β Π½Π° Π₯Π΅ΠΊΡΠ»Π΅ΡΠ΅ Π΅ΡΡΡ ΡΠΎΡΠ½ΠΈ ΠΊΡΡΡΠΎΠ² ΠΏΠΎ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ Π½Π° ΡΠ°Π·Π½ΡΡ ΡΠ·ΡΠΊΠ°Ρ ΠΈ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡΡ
Π‘ Π½ΡΠ»Ρ Π΄ΠΎ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°. ΠΠΎΠ·Π²ΡΠ°ΡΠ°Π΅ΠΌ Π΄Π΅Π½ΡΠ³ΠΈ, Π΅ΡΠ»ΠΈ Π½Π΅ ΡΠ΄Π°Π»ΠΎΡΡ Π½Π°ΠΉΡΠΈ ΡΠ°Π±ΠΎΡΡ.