ΠΠΊΠΎΠ½ΠΊΠΈ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ ΡΡΠΈΡΡΠ° Π΄Π»Ρ ΡΠ°ΠΉΡΠ°
ΠΠ»Π°Π²Π½Π°Ρ / HTML ΠΈ CSS
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ, ΡΡΠΎ ΡΠ°ΠΊΠΎΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ ΡΡΠΈΡΡΠ°, ΠΈ ΠΊΠ°ΠΊΠΈΠ΅ ΠΎΠ½ΠΈ ΠΈΠΌΠ΅ΡΡ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π° ΠΈ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠΈ. ΠΡΠΎΠΌΠ΅ ΡΡΠΎΠ³ΠΎ, ΡΠ°Π·Π±Π΅ΡΡΠΌ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΠΏΡΠΈΠ½ΡΠΈΠΏΡ ΡΠ°Π±ΠΎΡΡ Ρ ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ ΡΡΠΈΡΡΠ° ΠΈ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ ΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ.
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ ΡΡΠΈΡΡΠ°
ΠΠΊΠΎΠ½ΠΊΠΈ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ ΡΡΠΈΡΡΠ° ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΠΏΡΠΎΡΡΠΎ ΡΡΠΈΡΡ. ΠΠΎ Π² ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ ΠΎΠ±ΡΡΠ½ΡΡ ΡΡΠΈΡΡΠΎΠ² ΠΎΠ½ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠ°Ρ Π½Π΅ Π±ΡΠΊΠ²Ρ ΠΈ ΡΠΈΡΡΡ, Π° Π·Π½Π°ΡΠΊΠΈ (ΠΈΠΊΠΎΠ½ΠΊΠΈ).
ΠΠΊΠΎΠ½ΠΊΠΈ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ ΡΡΠΈΡΡΠ° ΠΈΠΌΠ΅ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π° ΠΏΠ΅ΡΠ΅Π΄ ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ Π² Π²ΠΈΠ΄Π΅ ΡΠ°ΡΡΡΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ:
- ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΠΊ Π½ΠΈΠΌ Π»ΡΠ±ΡΠ΅ CSS ΡΡΠΈΠ»ΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΠΊ ΠΎΠ±ΡΡΠ½ΠΎΠΌΡ ΡΠ΅ΠΊΡΡΡ;
- Π₯ΠΎΡΠΎΡΠΎ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΡΡΡΡ, Ρ.ΠΊ. ΠΈΠΊΠΎΠ½ΠΊΠΈ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ ΡΡΠΈΡΡΠ° ΡΠ²Π»ΡΡΡΡΡ Π²Π΅ΠΊΡΠΎΡΠ½ΡΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ. Π’.Π΅. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°ΡΡ ΠΈΠ»ΠΈ ΡΠΌΠ΅Π½ΡΡΠ°ΡΡ ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΡ Π±Π΅Π· ΠΏΠΎΡΠ΅ΡΠΈ ΠΊΠ°ΡΠ΅ΡΡΠ²Π°;
- ΠΠ΅Π½ΡΡΠ΅Π΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ HTTP-Π·Π°ΠΏΡΠΎΡΠΎΠ², ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΡΡΠ΅Π±ΠΎΠ²Π°ΡΡΡΡ Π΄Π»Ρ ΠΈΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΏΠΎ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ Ρ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎΠΌ HTTP-Π·Π°ΠΏΡΠΎΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΡ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΡΡΠ΅Π±ΠΎΠ²Π°ΡΡΡΡ Π΄Π»Ρ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈΠΊΠΎΠ½ΠΎΠΊ Π² Π²ΠΈΠ΄Π΅ ΡΠ°ΡΡΡΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ;
- ΠΠΎΠ»Π΅Π΅ Π±ΡΡΡΡΠ°Ρ Π·Π°Π³ΡΡΠ·ΠΊΠ° ΠΈΠΊΠΎΠ½ΠΎΠΊ, Ρ.
ΠΊ. ΠΎΠ½ΠΈ ΠΈΠΌΠ΅ΡΡ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΡΠ°Π·ΠΌΠ΅Ρ;
- ΠΠ°Π±ΠΎΡΡ ΠΈΠΊΠΎΠ½ΠΎΠΊ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ ΡΡΠΈΡΡΠ° ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ Π²ΡΠ΅ΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ, ΠΈΠ·-Π·Π° ΡΠΎΠ³ΠΎ ΡΡΠΎ ΠΎΠ½ΠΈ ΠΏΠΎΡΡΠ°Π²Π»ΡΡΡΡΡ Π² ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠΎΡΠΌΠ°ΡΠ°Ρ : eot, ttf, woff, svg ΠΈ Π΄Ρ. Π’.Π΅. Π΅ΡΠ»ΠΈ Π±ΡΠ°ΡΠ·Π΅Ρ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠΎΡΠΌΠ°ΡΠ°, ΡΠΎ ΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π΄ΡΡΠ³ΠΎΠΉ;
- ΠΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ Π½Π°Π±ΠΎΡΠΎΠ² ΠΈΠΊΠΎΠ½ΠΎΠΊ (Font Awesome, Glyphicons ΠΈ Π΄Ρ.) ΡΠΎΠ΄Π΅ΡΠΆΠ°Ρ Π² ΡΠ²ΠΎΡΠΌ Π½Π°Π±ΠΎΡΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ SVG (Π² ΡΠΎΡΠΌΠ°ΡΠ΅ ΡΡΠΈΡΡΠ°), ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ²Π»ΡΡΡΡΡ ΠΎΡΠ΅Π½Ρ ΡΡΡΠΊΠΈΠΌΠΈ ΠΈ ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΡΡΡΡ.
ΠΠ½Π°ΡΠΊΠΈ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ ΡΡΠΈΡΡΠ° ΠΎΠ±ΡΡΠ½ΠΎ Π½Π°Ρ ΠΎΠ΄ΡΡ ΡΠΈΡΠΎΠΊΠΎΠ΅ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΏΡΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΡΠ°ΠΉΡΠ°, Ρ.Π΅. ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π΄Π»Ρ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ Π΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈΠ»ΠΈ Π±Π»ΠΎΠΊΠΎΠ².
ΠΠΎ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ ΡΡΠΈΡΡΠ° ΠΊΡΠΎΠΌΠ΅ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ², ΠΈΠΌΠ΅ΡΡ Π΅ΡΡ ΠΈ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠΈ:
- ΠΈΡ Π·Π°ΡΡΡΠ΄Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΠΈΠΊΠΎΠ½ΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ²Π»ΡΡΡΡΡ ΡΠ»ΠΎΠΆΠ½ΡΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ, Π° Π½Π΅ ΠΏΡΠΎΡΡΠΎ Π·Π½Π°ΡΠΊΠ°ΠΌΠΈ;
- ΡΠ²Π΅Ρ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ ΡΡΠΈΡΡΠ° ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ ΠΎΠ΄Π½ΠΈΠΌ ΡΠ²Π΅ΡΠΎΠΌ.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈΠΊΠΎΠ½ΠΎΠΊ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ ΡΡΠΈΡΡΠ°
ΠΠΊΠΎΠ½ΠΊΠΈ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ ΡΡΠΈΡΡΠ° Π½Π΅Π²Π΅ΡΠΎΡΡΠ½ΠΎ ΠΏΡΠΎΡΡΡ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ.
Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ Ρ ΠΏΠ°ΠΊΠ΅ΡΠ°ΠΌΠΈ ΠΈΠΊΠΎΠ½ΠΎΠΊ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ ΡΡΠΈΡΡΠ°:
-
Π‘ΠΊΠ°ΡΠ°ΡΡ Ρ ΡΠ°ΠΉΡΠ° ΠΏΠ°ΠΊΠ΅Ρ ΠΈΠΊΠΎΠ½ΠΎΠΊ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ ΡΡΠΈΡΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½Π° ΡΠ²ΠΎΡΠΌ ΡΠ°ΠΉΡΠ΅. Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ Π½Π°ΡΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Π½Π° ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Font Awesome.
-
Π‘ΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ ΡΠ°ΠΉΠ» CSS ΠΏΠΎΡΡΠ°Π²Π»ΡΠ΅ΠΌΡΠΉ Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΠΏΠ°ΠΊΠ΅ΡΠΎΠΌ ΠΈΠΊΠΎΠ½ΠΎΠΊ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ ΡΡΠΈΡΡΠ°. ΠΡΠ»ΠΈ ΠΎΡΠΊΡΡΡΡ Π΄Π°Π½Π½ΡΠΉ ΡΠ°ΠΉΠ», ΡΠΎ ΠΡ ΡΠ²ΠΈΠ΄Π΅ΡΠ΅, ΡΡΠΎ ΠΎΠ½ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΈΠ½ΡΡΡΡΠΊΡΠΈΡ
@font-face
, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠΎΠ΄Π³ΡΡΠΆΠ°Π΅Ρ ΡΡΠΈΡΡΡ ΠΈ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅Ρ ΠΈΡ Π½Π°ΡΡΡΠΎΠΉΠΊΡ. ΠΡΠΎΠΌΠ΅ ΡΡΠΎΠ³ΠΎ, ΡΡΠΎΡ ΡΠ°ΠΉΠ» ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ ΠΏΡΠ°Π²ΠΈΠ»Π° CSS, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΡΠΎΡΡΡ ΡΠΏΡΠΎΡΠ°Π΅ΡΡΡ ΡΠ°Π±ΠΎΡΠ° Ρ ΡΡΠΈΠΌ Π½Π°Π±ΠΎΡΠΎΠΌ ΡΡΠΈΡΡΠΎΠ².<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
- Π‘ΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠ°ΡΠ°Π»ΠΎΠ³ Β«fontsΒ», ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ ΡΡΠΈΡΡΡ, Π² ΠΠ°ΡΡ Π΄ΠΈΡΠ΅ΠΊΡΠΎΡΠΈΡ Π½Π° ΡΠ°ΠΉΡΠ΅. ΠΡΠ»ΠΈ ΡΠΆΠ΅ Π΅ΡΡΡ ΡΠ°ΠΊΠ°Ρ Π΄ΠΈΡΠ΅ΠΊΡΠΎΡΠΈΡ, ΡΠΎ ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΡΠΎ ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΊΠ°ΡΠ°Π»ΠΎΠ³Π° Β«fontsΒ» Π² ΡΡΡ Π΄ΠΈΡΠ΅ΠΊΡΠΎΡΠΈΡ.
- Π Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΠΏΠ°ΠΊΠ΅ΡΠ° ΠΈΠΊΠΎΠ½ΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅, Π·Π½Π°ΡΠΊΠΈ ΠΎΠ±ΡΡΠ½ΠΎ Π²ΡΡΠ°Π²Π»ΡΡΡΡΡ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· Π΄Π²ΡΡ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ²:
- Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΊΠ°Π·Π°Π½ΠΈΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΡ
ΠΊΠ»Π°ΡΡΠΎΠ² Π² Π°ΡΡΠΈΠ±ΡΡΠ΅
class
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°i
ΠΈΠ»ΠΈspan
.<!-- ΠΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π² Font Awesome --> <span></span> <i></i>
-
Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΊΠ°Π·Π°Π½ΠΈΡ Π½ΠΎΠΌΠ΅ΡΠ° Π·Π½Π°ΡΠΊΠ° Π² Π°ΡΡΠΈΠ±ΡΡΠ΅ data:
<!--Π¨ΡΠΈΡΡ Elegant Icon Font --> <!--ΠΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΊΠ°Π·Π°Π½ΠΈΡ Π½ΠΎΠΌΠ΅ΡΠ° Π·Π½Π°ΡΠΊΠ° Π² Π°ΡΡΠΈΠ±ΡΡΠ΅ data --> <span data-icon="?"></span>
<!-- ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ²Π΅Π»ΠΈΡΠΈΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π² 4 ΡΠ°Π·Π° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ»Π°ΡΡΠ° Font Awesome fa-4x --> <i></i> <!-- ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΊΠ°Π·Π°Π½ΠΈΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΡ ΠΏΡΠ°Π²ΠΈΠ» CSS --> <!-- Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΠΌ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈ Π΅Ρ ΡΠ²Π΅Ρ --> <i></i>
ΠΠΎ ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ ΠΈΠΊΠΎΠ½ΠΎΠΊ ΠΎΠ±ΡΡΠ½ΠΎ Π½Π΅ Π·Π°Π΄Π°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π°ΡΡΠΈΠ±ΡΡΠ° style
, Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΠΊΠ»Π°ΡΡΡ:
.large-green { font-size: 50px; color: green; } HTML: <i></i>
ΠΡΠΈΠΌΠ΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΈΠΊΠΎΠ½ΠΎΠΊ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ ΡΡΠΈΡΡΠ°
Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ, Π³Π΄Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ ΡΡΠΈΡΡΠ°.
-
ΠΠΊΠΎΠ½ΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² ΠΊΠ½ΠΎΠΏΠΊΠ°Ρ :
<button><i></i> ΠΠ½ΠΎΠΏΠΊΠ°1</button> <button><i></i> ΠΠ½ΠΎΠΏΠΊΠ°2</button> <button><i></i> ΠΠ½ΠΎΠΏΠΊΠ°3</button> <button><i></i> ΠΠ½ΠΎΠΏΠΊΠ°4</button>
-
ΠΠΊΠΎΠ½ΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² ΠΌΠ΅Π½Ρ:
-
ΠΠΊΠΎΠ½ΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΡ Π²ΠΈΠ΄ΠΆΠ΅ΡΠ°Ρ :
-
ΠΠΊΠΎΠ½ΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠΎΡΠΈΠ°Π»ΡΠ½ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ:
-
ΠΠΊΠΎΠ½ΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² ΠΊΠ½ΠΎΠΏΠΊΠ°Ρ , Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΡΠΎΡΡΡ ΠΎΡΡΡΠ΅ΡΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ°Π±ΠΎΡΠ° Ρ Π·Π°ΠΏΠΈΡΡΠΌΠΈ Π² ΡΠ°Π±Π»ΠΈΡΠ΅:
ΠΠΎΠΏΡΠ»ΡΡΠ½ΡΠ΅ ΠΏΠ°ΠΊΠ΅ΡΡ ΠΈΠΊΠΎΠ½ΠΎΠΊ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ ΡΡΠΈΡΡΠ°
Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠ΅ ΠΏΠ°ΠΊΠ΅ΡΡ ΠΈΠΊΠΎΠ½ΠΎΠΊ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ ΡΡΠΈΡΡΠ°.
Glyphicons
Font Awesome
Foundation Icon Fonts
Brandico
Elegant Icon Font
Themify Icons
Ionicons
Octicons
Open Iconic
Typicons
Stroke 7
Ligature symbols
Π Π°Π·Π»ΠΈΡΠ½ΡΠ΅ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΠΈ ΠΈΠΊΠΎΠ½ΠΎΠΊ
ΠΠΈΠ½ΡΡΡ ΠΈ ΠΏΠ»ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΈΠΊΠΎΠ½ΠΎΡΠ½ΡΡ ΡΡΠΈΡΡΠΎΠ²
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π΄Π²Π° ΠΏΡΠΈΠ½ΡΠΈΠΏΠΈΠ°Π»ΡΠ½ΠΎ ΡΠ°Π·Π½ΡΡ ΡΠΏΠΎΡΠΎΠ±Π°, Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΠΈΠΊΠΎΠ½ΠΎΠΊ Π½Π° ΡΠ°ΠΉΡ:
- Π² Π²ΠΈΠ΄Π΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ (ΡΠ°ΡΡΡΠΎΠ²ΠΎΠΉ ΠΈΠ»ΠΈ Π²Π΅ΠΊΡΠΎΡΠ½ΠΎΠΉ)
- Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΈΠΊΠΎΠ½ΠΎΡΠ½ΠΎΠ³ΠΎ ΡΡΠΈΡΡΠ°
Π Π°Π·ΡΠΌΠ΅Π΅ΡΡΡ, ΡΡΠΎ Ρ ΠΎΠ±ΠΎΠΈΡ
Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² Π΅ΡΡΡ ΡΠ²ΠΎΠΈ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠΈ ΠΈ Π²ΠΎΠΎΠ±ΡΠ΅ Π½Π΅ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΡΠΏΠΎΡΠΎΠ±Π°, ΠΊΠ°ΠΊ Π²ΡΡΠ°Π²ΠΈΡΡ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π½Π° ΡΠ°ΠΉΡ. Π Π΅ΡΡΡ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΡΡΠΈΠΉ ΡΠΏΠΎΡΠΎΠ±, Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠΉ ΡΠΈΡΡΠ°ΡΠΈΠΈ.
Π‘Π΅Π³ΠΎΠ΄Π½Ρ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π²ΡΠ΅ ΠΌΠΈΠ½ΡΡΡ ΠΈ ΠΏΠ»ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π½Π° ΡΠ°ΠΉΡΠ°Ρ ΠΈΠΊΠΎΠ½ΠΎΡΠ½ΡΡ ΡΡΠΈΡΡΠΎΠ².
ΠΡΠ°ΡΠ·Π΅ΡΠ½Π°Ρ ΠΈΠ½ΡΠ΅ΡΠΏΡΠ΅ΡΠ°ΡΠΈΡ
Π‘Π»Π΅Π΄ΡΠ΅Ρ ΠΏΠΎΠΌΠ½ΠΈΡΡ, ΡΡΠΎ ΠΈΠΊΠΎΠ½ΠΎΡΠ½ΡΠΉ ΡΡΠΈΡΡ β ΡΡΠΎ Π²ΡΠ΅Π³ΠΎ Π»ΠΈΡΡ ΡΠ΅ΠΊΡΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎ ΡΠ°Π·Π½ΠΎΠΌΡ (Π±ΠΎΠ»Π΅Π΅ ΠΈΠ»ΠΈ ΠΌΠ΅Π½Π΅Π΅ ΡΠ°Π·ΠΌΡΡΡΠΌ) Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊΠΎΠΉ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΌΠΎΠ³ΡΡ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΡΠ²ΠΎΠΈ Π΄Π΅ΡΠΎΠ»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Ρ ΡΡΠΈΠ»Π΅ΠΉ, ΠΊΠ°ΡΠ°Π΅ΠΌΡΠ΅ Π»ΡΠ±ΡΡ ΡΡΠΈΡΡΠΎΠ², Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ line-height. Π§ΡΠΎ Π² ΡΠ²ΠΎΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ Π½Π° ΡΡΡΠ΄Π½ΠΎΡΡΡΡ Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΈΠΊΠΎΠ½ΠΎΠΊ. ΠΡ, Π½Π΅ ΠΌΠΎΠΆΠ΅ΠΌ Π±ΡΡΡ ΡΠ²Π΅ΡΠ΅Π½Π½ΡΠΌΠΈ, ΡΡΠΎ ΠΈΠΊΠΎΠ½ΠΊΠ° Π² ΠΌΠ°ΠΊΠ΅ΡΠ΅, Π±ΡΠ΄Π΅Ρ ΠΈΠ΄Π΅Π½ΡΠΈΡΠ½Π° Π½Π° 100% ΡΠΎΠΉ, ΡΡΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΡΠ²ΠΈΠ΄ΠΈΡ Π½Π° ΡΠ²ΠΎΠ΅ΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π΅.
ΠΠ΄Π½ΠΎΡΠ²Π΅ΡΠ½ΡΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ
Π£ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π½Π΅Π»ΡΠ·Ρ Π·Π°Π΄Π°ΡΡ ΡΠ²Π΅Ρ Π΄Π»Ρ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ Π΅Ρ ΡΠ°ΡΡΠ΅ΠΉ, ΠΎΠ½ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡΡ ΠΊΠΎ Π²ΡΠ΅ΠΉ ΠΈΠΊΠΎΠ½ΠΊΠ΅. ΠΠ΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΎΡΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΠΌΠ½ΠΎΠ³ΠΎΡΠ²Π΅ΡΠ½ΡΡ ΠΈΠΊΠΎΠ½ΠΊΡ, Π±Π΅Π· Ρ ΠΈΡΡΠΎΠ³ΠΎ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΈΠΊΠΎΠ½ΠΎΠΊ Π΄ΡΡΠ³ Π½Π° Π΄ΡΡΠ³Π°.
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ
ΠΠΎΠΆΠ½ΠΎ Π·Π°Π±ΡΡΡ ΠΏΡΠΎ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ.
ΠΡΡΡΡΠ΅ ΡΠ΅Π³ΠΈ ΠΈ ΡΠ΅ΠΌΠ°Π½ΡΠΈΠΊΠ°
ΠΠ±ΡΡΠ½ΠΎ ΡΡΠΈΡΡΠΎΠ²ΡΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π²ΡΡΠ°Π²Π»ΡΡΡΡΡ Π² HTML ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ ΡΠ΅ΡΠ΅Π· ΠΏΡΡΡΡΠ΅ ΡΠ΅Π³ΠΈ span ΠΈ i. Π ΡΠ°ΠΌΠΈ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π²ΡΠ²ΠΎΠ΄ΡΡΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ ΡΠ΅ΡΠ΅Π· ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΡ after ΠΈΠ»ΠΈ before. ΠΠΎΠ»ΡΡΠ°Π΅ΡΡΡ, ΡΡΠΎ ΡΡΡΠ°Π½ΠΈΡΠ° Π½Π°ΠΏΠΎΠ»Π½Π΅Π½Π° ΠΏΡΡΡΡΠΌΠΈ ΡΠ΅Π³Π°ΠΌΠΈ. Π‘ ΡΠΎΡΠΊΠΈ Π·ΡΠ΅Π½ΠΈΡ ΡΠ΅ΠΌΠ°Π½ΡΠΈΠΊΠΈ, ΡΡΠΎ Π½Π΅ ΡΠΎΠ²ΡΠ΅ΠΌ Ρ
ΠΎΡΠΎΡΠΎ.
<span><i ></i></span>
Π‘Π»ΠΎΠΆΠ½ΠΎΡΡΠΈ Π½Π° Π±ΠΎΠ»ΡΡΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠ°Ρ
ΠΡΠΈ ΡΠ΅Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ ΡΠ°ΠΉΡΠ°, Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΠ»ΠΎΠΆΠ½ΠΎ ΠΎΡΡΠ»Π΅Π΄ΠΈΡΡ, ΡΡΠΎ ΠΊΠ°ΠΊΠΈΡ -ΡΠΎ ΠΈΠΊΠΎΠ½ΠΎΠΊ ΡΠΆΠ΅ Π½Π΅Ρ Π½Π° ΡΠ°ΠΉΡΠ΅. ΠΠ΅Π΄Ρ ΠΎΠ½ΠΈ ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ ΠΏΡΠΈΡΡΡΡΡΠ²ΡΡΡ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅ Π² Π²ΠΈΠ΄Π΅ ΠΏΡΡΡΡΡ ΡΠ΅Π³ΠΎΠ². Π ΠΈΡΠΎΠ³Π΅ ΠΎΠ±ΡΠ°Π·ΡΡΡΡΡ ΠΌΠ΅ΡΡΠ²ΡΠ΅ ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ Π½Π΅ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΡ ΠΈΠΊΠΎΠ½ΠΎΠΊ.
ΠΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½
ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΉ Π½Π°Π±ΠΎΡ ΠΈΠΊΠΎΠ½ΠΎΠΊ, Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ΅ΠΌΠΈ ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΆΠ΅ Π΅ΡΡΡ Π² ΡΡΠΈΡΡΠ΅.
ΠΠ΅ΠΊΡΠΎΡΠ½ΡΠΉ ΡΠΎΡΠΌΠ°Ρ
ΠΠΊΠΎΠ½ΠΊΠΈ ΡΡΠΈΡΡΠΎΠ² ΠΈΠΌΠ΅ΡΡ Π²Π΅ΠΊΡΠΎΡΠ½ΡΠΉ ΡΠΎΡΠΌΠ°Ρ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΡΡΡΡ Π±Π΅Π· ΠΏΠΎΡΠ΅ΡΠΈ ΠΊΠ°ΡΠ΅ΡΡΠ²Π° (ΡΠ΅Π³ΠΎ Π½Π΅ ΡΠΊΠ°ΠΆΠ΅ΡΡ ΠΎ ΡΠ°ΡΡΡΠΎΠ²ΠΎΠΌ ΡΠΎΡΠΌΠ°ΡΠ΅).
CSS ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅
ΠΠ»Ρ ΠΈΠΊΠΎΠ½ΠΎΠΊ Π΄ΠΎΡΡΡΠΏΠ½Ρ Π²ΡΠ΅ CSS ΡΡΠΈΠ»ΠΈ, ΠΊΠ°ΠΊ ΠΈ Π΄Π»Ρ ΠΎΠ±ΡΡΠ½ΡΡ ΡΡΠΈΡΡΠΎΠ². ΠΠΎΠ»ΡΡΠ°Ρ Π³ΠΈΠ±ΠΊΠΎΡΡΡ Π² ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡΠ²Π΅ΡΠ° ΡΠ²Π»ΡΠ΅ΡΡΡ Π±Π΅ΡΡΠΏΠΎΡΠ½ΡΠΌ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²ΠΎΠΌ.
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ
Π£ ΠΈΠΊΠΎΠ½ΠΎΡΠ½ΠΎΠ³ΠΎ ΡΡΠΈΡΡΠ° Ρ
ΠΎΡΠΎΡΠ°Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ.
ΠΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½Π½ΠΈΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ (Font Awesome) β Π»ΠΈΡΠ½ΠΈΠΉ HTTP-Π·Π°ΠΏΡΠΎΡ ΠΊ ΡΠ΅ΡΠ²Π΅ΡΡ, Π½Π° ΠΊΠΎΡΠΎΡΡΠΉ ΡΡΠ³Π°Π΅ΡΡΡ Google PageSpeed ΠΏΡΠΈ ΡΠ΅ΡΡΠ΅ Π½Π° ΡΠΊΠΎΡΠΎΡΡΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΠ°ΠΉΡΠ°. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ SVG ΠΈΠΊΠΎΠ½ΠΎΠΊ, Π½Π΅ Π±ΡΠ΄Π΅Ρ Π½ΠΈ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π·Π°ΠΏΡΠΎΡΠ° ΠΊ ΡΠ΅ΡΠ²Π΅ΡΡ. ΠΡΠΈ ΡΡΠ»ΠΎΠ²ΠΈΠΈ, ΡΡΠΎ SVG ΠΊΠΎΠ΄ ΠΈΠΊΠΎΠ½ΠΎΠΊ Π²ΡΡΡΠΎΠ΅Π½ Π² HTML ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ, Π° Π½Π΅ Π²ΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΎΠΉ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ SVG.
ΠΠΎ Ρ Π΄ΡΡΠ³ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ, Π΄Π»Ρ Π·Π°Π³ΡΡΠ·ΠΊΠΈ Π²ΡΠ΅Ρ ΠΈΠΊΠΎΠ½ΠΎΠΊ Π½ΡΠΆΠ΅Π½ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄ΠΈΠ½ HTTP
<ul>
<li>
<img src="man.png" alt="">
</li>
<li>
<img src="female.png" alt="">
</li>
<li>
<img src="boss.
png" alt="">
</li>
</ul>
ΠΡΠ²ΠΎΠ΄Ρ
ΠΠ°ΠΊ Π²ΠΈΠ΄ΠΈΡΠ΅ ΠΌΠΈΠ½ΡΡΠΎΠ² Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ ΠΏΠ»ΡΡΠΎΠ². ΠΠ° ΡΠ΅ΠΊΡΡΠΈΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠΈΡΠ΅Π»ΡΠ½Π΅Π΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ SVG ΠΈΠΊΠΎΠ½ΠΊΠΈ. Π’ΠΎΠ»ΡΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΡ SVG ΠΈΠΊΠΎΠ½ΠΎΠΊ Π²
Π£Π·Π½Π°ΠΉΡΠ΅ Π² ΡΡΠΎΠΌ Π²ΠΈΠ΄Π΅ΠΎΠΊΡΡΡΠ΅ Π²ΡΠ΅ ΠΌΠΎΠΈ ΡΠ΅ΠΊΡΠ΅ΡΡ ΡΡΠΏΠ΅ΡΠ½ΠΎΠ³ΠΎ Π²Π΅Π΄Π΅Π½ΠΈΡ Π±ΠΈΠ·Π½Π΅ΡΠ° ΠΏΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°ΠΉΡΠΎΠ² Π½Π° Π·Π°ΠΊΠ°Π·.
- Π‘ΠΎΠ·Π΄Π°Π½ΠΎ 21.02.2020 10:01:09
- ΠΠΈΡ Π°ΠΈΠ» Π ΡΡΠ°ΠΊΠΎΠ²
ΠΠΎΠΏΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»ΠΎΠ² ΡΠ°Π·ΡΠ΅ΡΠ°Π΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Ρ ΡΠΊΠ°Π·Π°Π½ΠΈΠ΅ΠΌ Π°Π²ΡΠΎΡΠ° (ΠΠΈΡ Π°ΠΈΠ» Π ΡΡΠ°ΠΊΠΎΠ²) ΠΈ ΠΈΠ½Π΄Π΅ΠΊΡΠΈΡΡΠ΅ΠΌΠΎΠΉ ΠΏΡΡΠΌΠΎΠΉ ΡΡΡΠ»ΠΊΠΎΠΉ Π½Π° ΡΠ°ΠΉΡ (http://myrusakov.ru)!
ΠΠΎΠ±Π°Π²Π»ΡΠΉΡΠ΅ΡΡ ΠΊΠΎ ΠΌΠ½Π΅ Π² Π΄ΡΡΠ·ΡΡ ΠΠΠΎΠ½ΡΠ°ΠΊΡΠ΅: http://vk.com/myrusakov.
ΠΡΠ»ΠΈ ΠΡ Ρ
ΠΎΡΠΈΡΠ΅ Π΄Π°ΡΡ ΠΎΡΠ΅Π½ΠΊΡ ΠΌΠ½Π΅ ΠΈ ΠΌΠΎΠ΅ΠΉ ΡΠ°Π±ΠΎΡΠ΅, ΡΠΎ Π½Π°ΠΏΠΈΡΠΈΡΠ΅ Π΅Ρ Π² ΠΌΠΎΠ΅ΠΉ Π³ΡΡΠΏΠΏΠ΅: http://vk.com/rusakovmy.
ΠΡΠ»ΠΈ ΠΡ Π½Π΅ Ρ
ΠΎΡΠΈΡΠ΅ ΠΏΡΠΎΠΏΡΡΡΠΈΡΡ Π½ΠΎΠ²ΡΠ΅ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Ρ Π½Π° ΡΠ°ΠΉΡΠ΅,
ΡΠΎ ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ΄ΠΏΠΈΡΠ°ΡΡΡΡ Π½Π° ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ: ΠΠΎΠ΄ΠΏΠΈΡΠ°ΡΡΡΡ Π½Π° ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ
ΠΡΠ»ΠΈ Ρ ΠΠ°Ρ ΠΎΡΡΠ°Π»ΠΈΡΡ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ Π²ΠΎΠΏΡΠΎΡΡ, Π»ΠΈΠ±ΠΎ Ρ ΠΠ°Ρ Π΅ΡΡΡ ΠΆΠ΅Π»Π°Π½ΠΈΠ΅ Π²ΡΡΠΊΠ°Π·Π°ΡΡΡΡ ΠΏΠΎ ΠΏΠΎΠ²ΠΎΠ΄Ρ ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠΈ, ΡΠΎ ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΡΡΠ°Π²ΠΈΡΡ ΡΠ²ΠΎΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ Π²Π½ΠΈΠ·Ρ ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΡΠ»ΠΈ ΠΠ°ΠΌ ΠΏΠΎΠ½ΡΠ°Π²ΠΈΠ»ΡΡ ΡΠ°ΠΉΡ, ΡΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΠ΅ ΡΡΡΠ»ΠΊΡ Π½Π° Π½Π΅Π³ΠΎ (Ρ ΡΠ΅Π±Ρ Π½Π° ΡΠ°ΠΉΡΠ΅, Π½Π° ΡΠΎΡΡΠΌΠ΅, Π² ΠΊΠΎΠ½ΡΠ°ΠΊΡΠ΅):
Π·Π½Π°ΡΠΊΠΎΠ² ΡΡΠΈΡΡΠΎΠ² β ΡΠ΅ΠΌΡ Sass
ΠΠ°ΡΠΈΠ½Π°Ρ Ρ Π²ΡΠΏΡΡΠΊΠ° R1 2017, ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ Kendo ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΈΠ½ΡΠ΅Π³ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π·Π½Π°ΡΠΊΠΈ ΡΡΠΈΡΡΠΎΠ², ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Π½ΡΠ΅ Π΄Π»Ρ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΠΈ Π²ΠΈΠ΄ΠΆΠ΅ΡΠΎΠ² Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ ΠΏΠ°ΠΊΠ΅ΡΠ°.
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΎΠ΄Π½Ρ ΠΈΠ· ΡΠ΅ΠΌ SASS, ΡΡΠΎΠ±Ρ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ, ΡΡΠΎ Π²ΡΠ΅ Π·Π½Π°ΡΠΊΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ. Π§ΡΠΎΠ±Ρ ΡΠ·Π½Π°ΡΡ, ΠΊΠ°ΠΊ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠ΅ΠΌΡ SASS, ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅ ΡΡΠ°ΡΡΡ ΠΎΠ± ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ΅.
ΠΠΎΡΠ΅ΡΠΈΡΠ΅ ΡΠ°Π·Π΄Π΅Π» Β«ΠΡΠ½ΠΎΠ²Π½ΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅Β», ΡΡΠΎΠ±Ρ ΡΠ·Π½Π°ΡΡ, ΠΊΠ°ΠΊ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ Π·Π½Π°ΡΠΎΠΊ.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΊΠ°ΡΡ Π·Π½Π°ΡΠΊΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΏΠ°Π½Π΅Π»Ρ ΠΏΠΎΠΈΡΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ (CTRL + F).
Π¨ΡΠΈΡΡΡIcon β ΡΡΠΎ ΡΡΠΈΡΡΡ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠ΅ Π²Π΅ΠΊΡΠΎΡΠ½ΡΠ΅ Π³Π»ΠΈΡΡ Π²ΠΌΠ΅ΡΡΠΎ Π±ΡΠΊΠ² ΠΈ ΡΠΈΡΡ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π²ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΡΠΈΠ»Ρ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΊ ΠΎΠ±ΡΡΠ½ΠΎΠΌΡ ΡΠ΅ΠΊΡΡΡ Π² ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠ΅.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΡΠΈΡΡΠΎΠ² Π·Π½Π°ΡΠΊΠΎΠ² Π² ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠΌ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ΅ (UI) Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΠΏΡΠΈΡ
ΠΎΠ΄ΠΈΡ Π½Π° ΡΠΌΠ΅Π½Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΡΠ°ΡΠ΅Π²ΡΠ΅ΠΉ ΡΠ΅Ρ
Π½ΠΈΠΊΠ΅ ΡΠΏΡΠ°ΠΉΡΠΎΠ² Π·Π½Π°ΡΠΊΠΎΠ².
Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΡΡΡ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π°, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ:
- Π£Π»ΡΡΡΠ΅Π½Π½Π°Ρ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΠΎΡΡΡ. Π ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ ΡΠΏΡΠ°ΠΉΡΡ Π·Π½Π°ΡΠΊΠΎΠ² ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡ ΡΠΎΠ±ΠΎΠΉ ΡΠ°ΡΡΡΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ ΠΏΠ»ΠΎΡ
ΠΎ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΡΡΡΡ, ΡΡΠΈΡΡΡ Π·Π½Π°ΡΠΊΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ Π²Π΅ΠΊΡΠΎΡΠ½ΡΡ Π³ΡΠ°ΡΠΈΠΊΡ, ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ Π²ΡΠ³Π»ΡΠ΄ΡΡ Π½Π° Π΄ΠΈΡΠΏΠ»Π΅ΡΡ
Retina, Π° ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ ΡΠ°ΠΊ ΠΆΠ΅ ΠΏΡΠΎΡΡΠΎ, ΠΊΠ°ΠΊ Π½Π°ΡΡΡΠΎΠΉΠΊΠ°
ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°
ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠΈ. - Π£Π»ΡΡΡΠ΅Π½Π½ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π° β Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΡΡΡΠ΅ΠΊΡΡ CSS Π½Π° Π»Π΅ΡΡ, ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Ρ ΡΠ²Π΅Ρ ΡΠ΅ΠΊΡΡΠ°, ΡΠ΅Π½Ρ ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ Π΄Π»Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π½Π°
:hover
. - Π£Π»ΡΡΡΠ΅Π½Π½Π°Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ° β Π·Π½Π°ΡΠΊΠΈ ΡΡΠΈΡΡΠΎΠ² Π½Π΅ Π·Π°Π²ΠΈΡΡΡ ΠΎΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ Π²ΡΠ΅ΠΌΠΈ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ.
- Π£ΠΌΠ΅Π½ΡΡΠ΅Π½ΠΎ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ HTTP-Π·Π°ΠΏΡΠΎΡΠΎΠ². Π§ΡΠΎΠ±Ρ Π·Π°Π³ΡΡΠ·ΠΈΡΡ Π·Π½Π°ΡΠΎΠΊ ΡΡΠΈΡΡΠ°, Π²Π°ΠΌ ΠΏΠΎΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΌΠ°ΠΊΡΠΈΠΌΡΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ HTTP-Π·Π°ΠΏΡΠΎΡΠΎΠ².
- Π£ΠΌΠ΅Π½ΡΡΠ΅Π½Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ°ΠΉΠ»Π° β ΡΠ°ΠΉΠ» ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ 100 ΠΠ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ 500 Π²Π΅ΠΊΡΠΎΡΠ½ΡΡ Π·Π½Π°ΡΠΊΠΎΠ².
Π§ΡΠΎΠ±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π·Π½Π°ΡΠΊΠΈ ΡΡΠΈΡΡΠΎΠ² Kendo UI:
- ΠΠ°Π³ΡΡΠ·ΠΈΡΠ΅ ΡΠ΅ΠΌΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° Kendo Π² ΡΠ²ΠΎΠΉ ΠΏΡΠΎΠ΅ΠΊΡ.
ΠΠ°Π·Π½Π°ΡΡΡΠ΅ ΠΊΠ»Π°ΡΡ CSS
k-icon
, Π·Π° ΠΊΠΎΡΠΎΡΡΠΌ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΏΡΠ΅Π΄ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΉ ΠΊΠ»Π°ΡΡ ΠΈΠ· ΡΠΏΠΈΡΠΊΠ° Π·Π½Π°ΡΠΊΠΎΠ² ΡΡΠΈΡΡΠΎΠ², ΡΠ΅Π³Ρ HTML. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ»Π΅ΠΌΠ΅Π½Ρ
Π₯ΠΎΡΡ ΡΡΠΈΡΡ Π²Π΅Π±-Π·Π½Π°ΡΠΊΠΎΠ² ΠΏΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ Ρ Π½Π°Π±ΠΎΡΠΎΠΌ ΠΏΡΠ΅Π΄ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ
ΠΊΠ»Π°ΡΡΠΎΠ² CSS, Π²Π°ΠΌ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΡΡΠ΅Π±ΠΎΠ²Π°ΡΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π·Π½Π°ΡΠΊΠΈ Ρ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΌ ΠΈΠΌΠ΅Π½Π΅ΠΌ ΠΊΠ»Π°ΡΡΠ° CSS. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ :before
Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠ΅Π²Π΄ΠΎΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π΄Π»Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅Π³ΠΎ Π·Π½Π°ΡΠΊΠ°.
<ΡΡΠΈΠ»Ρ> .my-custom-icon-class: ΠΏΠ΅ΡΠ΅Π΄ { ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅: "\e13a"; /* ΠΠΎΠ±Π°Π²Π»ΡΠ΅Ρ Π³Π»ΠΈΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π½ΠΎΠΌΠ΅Ρ ΡΠΈΠΌΠ²ΠΎΠ»Π° Unicode */ }Π¨ΡΠΈΡΡΡ
Icon ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ»ΡΡΡΠ΅Π½ΠΈΡ:
- ΠΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ°Π·Π½ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ².
- ΠΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠΎΠ² Π·Π½Π°ΡΠΊΠΎΠ².
- ΠΠ΅ΡΠ΅Π»ΠΈΡΡΡΠ²Π°Π½ΠΈΠ΅ ΠΈΠΊΠΎΠ½ΠΎΠΊ.
Π Π΅Π³ΡΠ»ΠΈΡΠΎΠ²ΠΊΠ° ΡΠ°Π·ΠΌΠ΅ΡΠ°
ΠΠ½Π°ΡΠΊΠΈ ΡΡΠΈΡΡΠΎΠ² Kendo UI ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π½Ρ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΠ΅ΡΠΊΠΈ 16 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. Π§ΡΠΎΠ±Ρ Π΄ΠΎΠ±ΠΈΡΡΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠΈΠΊΡΠΎΠ³ΡΠ°ΠΌΠΌ Ρ ΡΠΎΡΠ½ΠΎΡΡΡΡ Π΄ΠΎ ΠΏΠΈΠΊΡΠ΅Π»Ρ, ΡΠ²Π΅Π»ΠΈΡΡΡΠ΅ ΠΌΠ°ΡΡΡΠ°Π±, ΡΠΎΡ
ΡΠ°Π½ΠΈΠ² 16-Π΅Π΄ΠΈΠ½ΠΈΡΠ½ΡΡ ΠΌΠ΅ΡΡ (32, 48, 64 ΠΈ Ρ. Π΄.).
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡ Π·Π½Π°ΡΠΊΠΈ, ΠΏΡΠΎΡΡΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ² ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠΈ font-size
.
<ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΠΊ> <ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΠΊ> <ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΠΊ> <ΡΡΠΈΠ»Ρ> .k-Π·Π½Π°ΡΠΎΠΊ-32 { ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°: 32px; /* Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ Π·Π½Π°ΡΠΊΠ° Π½Π° 32 ΠΏΠΈΠΊΡΠ΅Π»Ρ */ } .k-Π·Π½Π°ΡΠΎΠΊ-48 { ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°: 48px; /* Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ Π·Π½Π°ΡΠΊΠ° Π½Π° 48 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ */ } .k-Π·Π½Π°ΡΠΎΠΊ-64 { ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°: 64px; /* Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ Π·Π½Π°ΡΠΊΠ° Π² 64 ΠΏΠΈΠΊΡΠ΅Π»Ρ */ }
ΠΠ°ΡΡΡΠΎΠΉΠΊΠ° ΡΠ²Π΅ΡΠΎΠ²
Π§ΡΠΎΠ±Ρ Π·Π°Π΄Π°ΡΡ ΡΠ²Π΅Ρ Π·Π½Π°ΡΠΊΠ°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ CSS color
.
<ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΠΊ> <ΡΡΠΈΠ»Ρ> .ΡΠ²Π΅ΡΠ½ΠΎΠΉ Π·Π½Π°ΡΠΎΠΊ { ΡΠ²Π΅Ρ: Π·Π΅Π»Π΅Π½ΡΠΉ; }
ΠΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΎΡΡΠ°ΠΆΠ΅Π½ΠΈΡ
Π§ΡΠΎΠ±Ρ Π»ΡΡΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ Π·Π½Π°ΡΠΎΠΊ Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ, ΠΏΠ΅ΡΠ΅Π²Π΅ΡΠ½ΠΈΡΠ΅ Π΅Π³ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΡΠ΅Π΄ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ
ΠΊΠ»Π°ΡΡΠΎΠ² CSS k-flip-h
ΠΈ k-flip-v
.
<ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΠΊ> <ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΠΊ> <ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΠΊ>
ΠΠΊΠΎΠ½ΠΎΡΠ½ΡΠ΅ ΡΡΠΈΡΡΡ ΠΏΡΠΎΡΠΈΠ² SVG β ΠΊΠ°ΠΊΠΎΠΉ ΠΈΠ· Π½ΠΈΡ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ?
ΠΠΎΠ΄ΠΈ ΠΡΡΠ΅Π½ΠΎ
ΠΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΎ 10 ΠΌΠ°ΡΡΠ° 2023 Π³.
ΠΡΠ»ΠΈ Π²Ρ ΡΠΎΠ·Π΄Π°Π΅ΡΠ΅ Π²Π΅Π±-ΡΠ°ΠΉΡ ΠΈΠ»ΠΈ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Π·Π°Π΄Π°Π΅ΡΠ΅ΡΡ Π²ΠΎΠΏΡΠΎΡΠΎΠΌ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π»ΠΈ ΠΈΠΊΠΎΠ½ΠΎΡΠ½ΡΠ΅ ΡΡΠΈΡΡΡ ΠΈΠ»ΠΈ SVG, Π²Ρ ΠΏΠΎΠΏΠ°Π»ΠΈ Π² Π½ΡΠΆΠ½ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ. Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΏΠ»ΡΡΡ ΠΈ ΠΌΠΈΠ½ΡΡΡ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π²Π°ΡΠΈΠ°Π½ΡΠ° ΠΈ ΠΏΠΎΠΌΠΎΠΆΠ΅ΠΌ Π²Π°ΠΌ ΡΠ΅ΡΠΈΡΡ, ΠΊΠ°ΠΊΠΎΠΉ ΠΈΠ· Π½ΠΈΡ Π»ΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ°.
ΠΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ Π·Π½Π°ΡΠΊΠΈ ΡΠ²Π»ΡΡΡΡΡ Π²Π°ΠΆΠ½ΡΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠΌ ΠΏΠΎΡΡΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ° ΠΈΠ»ΠΈ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ. Π₯ΠΎΡΡ Π·Π½Π°ΡΠΊΠΈ ΠΎΠ±ΡΡΠ½ΠΎ ΠΈΠΌΠ΅ΡΡ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΏΠΎ ΡΠ²ΠΎΠ΅ΠΉ ΠΏΡΠΈΡΠΎΠ΄Π΅, Π²ΡΠ±ΠΎΡ ΡΠΎΡΠΌΠ°ΡΠ° Π΄Π»Ρ Π²Π΅Π±-Π·Π½Π°ΡΠΊΠΎΠ² β Π½Π΅ΡΡΠΈΠ²ΠΈΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅. ΠΠΎΠΌΠΈΠΌΠΎ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΡ ΡΠΎΡΠΌΠ°ΡΠΎΠ² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, Ρ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² Π΅ΡΡΡ Π΄Π²Π° ΠΎΡΠ½ΠΎΠ²Π½ΡΡ Π²Π°ΡΠΈΠ°Π½ΡΠ°: SVG ΠΈΠ»ΠΈ ΠΈΠΊΠΎΠ½ΠΎΡΠ½ΡΠ΅ ΡΡΠΈΡΡΡ. ΠΠ°ΠΊΠΎΠΉ ΠΈΠ· Π½ΠΈΡ Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ? ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΠΊΠ°ΠΊ ΡΡΠΈ Π΄Π²Π° ΡΠΎΡΠΌΠ°ΡΠ° ΡΡΠ°Π²Π½ΠΈΠ²Π°ΡΡΡΡ Ρ ΡΠΎΡΠΊΠΈ Π·ΡΠ΅Π½ΠΈΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ, Π³ΠΈΠ±ΠΊΠΎΡΡΠΈ ΠΈ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΠΈ.
ΠΠ²ΠΎΠ»ΡΡΠΈΡ Π²Π΅Π±-ΠΈΠΊΠΎΠ½ΠΎΠΊ
ΠΠ΅Π±-ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΏΡΠΎΡΠ»ΠΈ Π΄ΠΎΠ»Π³ΠΈΠΉ ΠΏΡΡΡ Ρ ΠΏΠ΅ΡΠ²ΡΡ
Π΄Π½Π΅ΠΉ ΡΡΡΠ΅ΡΡΠ²ΠΎΠ²Π°Π½ΠΈΡ ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ°. ΠΠΎ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ CSS Π²Π΅Π±-ΠΈΠΊΠΎΠ½ΠΊΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΠ»ΠΈ Π±ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠ°ΠΉΠ»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΈΠΌΠ΅ΡΡ Π±ΠΎΠ»ΡΡΠΎΠΉ ΡΠ°Π·ΠΌΠ΅Ρ, Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ Π²ΡΠ΅Π³Π΄Π° ΠΏΡΡΠ°Π»ΠΈΡΡ Π½Π°ΠΉΡΠΈ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠ΅ ΠΌΠ΅ΡΠΎΠ΄Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΡ
Π·Π½Π°ΡΠΊΠΎΠ².
Π Π½Π°ΡΠ°Π»Π΅ 2000-Ρ Π·Π½Π°ΡΠΊΠΈ ΡΠ°ΡΡΠΎ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ»ΠΈ ΡΠΎΠ±ΠΎΠΉ ΠΏΡΠΎΡΡΡΡ ΠΏΠΈΠΊΡΠ΅Π»ΡΠ½ΡΡ Π³ΡΠ°ΡΠΈΠΊΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»Π°ΡΡ Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ Π΄Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΠΈ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΡΡΠ»ΠΎΠΊ. ΠΠΎ ΠΌΠ΅ΡΠ΅ ΡΠ°Π·Π²ΠΈΡΠΈΡ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΌΠ΅Π½ΡΠ»ΠΎΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈΠΊΠΎΠ½ΠΎΠΊ.
ΠΠ΄Π½ΠΈΠΌ ΠΈΠ· ΠΏΠ΅ΡΠ²ΡΡ ΠΊΡΡΠΏΠ½ΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π² ΡΠ²ΠΎΠ»ΡΡΠΈΠΈ Π²Π΅Π±-ΠΈΠΊΠΎΠ½ΠΎΠΊ ΡΡΠ°Π»ΠΎ Π²Π²Π΅Π΄Π΅Π½ΠΈΠ΅ ΡΡΠΈΡΡΠΎΠ² Π΄Π»Ρ ΠΈΠΊΠΎΠ½ΠΎΠΊ. ΠΠΊΠΎΠ½ΠΎΡΠ½ΡΠ΅ ΡΡΠΈΡΡΡ Π±ΡΠ»ΠΈ Π²ΠΏΠ΅ΡΠ²ΡΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Ρ Π² 2010 Π³ΠΎΠ΄Ρ ΠΈ Π±ΡΡΡΡΠΎ Π·Π°Π²ΠΎΠ΅Π²Π°Π»ΠΈ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΠΎΡΡΡ ΠΊΠ°ΠΊ ΡΠΏΠΎΡΠΎΠ± Π»Π΅Π³ΠΊΠΎ Π²ΡΡΡΠ°ΠΈΠ²Π°ΡΡ Π·Π½Π°ΡΠΊΠΈ Π² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½. ΠΠ½ΠΈ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠΈΠ»ΠΈ Π»Π΅Π³ΠΊΡΡ ΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΡΡ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π΄Π»Ρ Π·Π½Π°ΡΠΊΠΎΠ².
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ°Π» ΡΠ°Π·Π²ΠΈΠ²Π°ΡΡΡΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ SVG (ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΠΎΠΉ Π²Π΅ΠΊΡΠΎΡΠ½ΠΎΠΉ Π³ΡΠ°ΡΠΈΠΊΠΈ) ΡΡΠ°Π»ΠΎ Π±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΠΌ. SVG ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°ΡΡ Π±ΠΎΠ»ΡΡΡΡ Π³ΠΈΠ±ΠΊΠΎΡΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π»Π΅Π³ΠΊΠΎ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½Ρ Π±Π΅Π· ΠΏΠΎΡΠ΅ΡΠΈ ΠΊΠ°ΡΠ΅ΡΡΠ²Π°. ΠΡΠΎ ΡΠ΄Π΅Π»Π°Π»ΠΎ ΠΈΡ
ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠΌ Π²ΡΠ±ΠΎΡΠΎΠΌ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΡ
Π·Π½Π°ΡΠΊΠΎΠ² ΠΈ Π³ΡΠ°ΡΠΈΠΊΠΈ.
ΠΠ½Π΅Π΄ΡΠ΅Π½ΠΈΠ΅ ΠΏΠ»ΠΎΡΠΊΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π² ΡΠ΅ΡΠ΅Π΄ΠΈΠ½Π΅ 2010-Ρ Π³ΠΎΠ΄ΠΎΠ² ΡΠ°ΠΊΠΆΠ΅ ΠΎΠΊΠ°Π·Π°Π»ΠΎ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π²Π»ΠΈΡΠ½ΠΈΠ΅ Π½Π° ΡΠ²ΠΎΠ»ΡΡΠΈΡ Π²Π΅Π±-ΠΈΠΊΠΎΠ½ΠΎΠΊ. ΠΠ»ΠΎΡΠΊΠΈΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π» ΠΏΡΠΎΡΡΠΎΡΡ ΠΈ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΠ·ΠΌ Ρ ΡΠΏΠΎΡΠΎΠΌ Π½Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΡΠΎΡΡΡΡ ΡΠΎΡΠΌ ΠΈ ΡΠΌΠ΅Π»ΡΡ ΡΠ²Π΅ΡΠΎΠ². ΠΡΠΎ ΠΏΡΠΈΠ²Π΅Π»ΠΎ ΠΊ ΡΠΈΡΠΎΠΊΠΎΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΏΡΠΎΡΡΡΡ , ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΡΡΠΈΡΠ½ΡΡ ΠΈΠΊΠΎΠ½ΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ»ΠΈ Π»Π΅Π³ΠΊΠΎ ΡΠ·Π½Π°Π²Π°Π΅ΠΌΡ ΠΈ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½Ρ.
Π ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π΅ Π²ΡΠ΅ΠΌΡ ΡΠ΅Π½Π΄Π΅Π½ΡΠΈΡ ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΠΈΠΊΠΎΠ½ΠΎΠΊ ΡΡΠ°Π»Π° Π±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΠΎΠΉ. ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π·Π½Π°ΡΠΊΠΈ ΠΌΠΎΠ³ΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΡΡΠΈ ΠΈ Π²ΠΎΠ²Π»Π΅ΡΠ΅Π½Π½ΠΎΡΡΠΈ Π² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½, ΡΡΠΎ Π΄Π΅Π»Π°Π΅Ρ ΠΈΡ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠΌ Π²ΡΠ±ΠΎΡΠΎΠΌ Π΄Π»Ρ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ² ΠΈ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. ΠΡΠ΅ ΠΎΠ΄Π½ΠΎ Π½Π΅Π΄Π°Π²Π½Π΅Π΅ ΡΠ°Π·Π²ΠΈΡΠΈΠ΅ Π²Π΅Π±-ΠΈΠΊΠΎΠ½ΠΎΠΊ β ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ 3D-Π³ΡΠ°ΡΠΈΠΊΠΈ ΠΈ ΠΈΠ·ΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°. ΠΡΠΈ ΡΡΠΈΠ»ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π³Π»ΡΠ±ΠΈΠ½Ρ ΠΈ ΡΠ°Π·ΠΌΠ΅Ρ Π·Π½Π°ΡΠΊΠ°ΠΌ, Π΄Π΅Π»Π°Ρ ΠΈΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΌΠΈ ΠΈ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠΌΠΈ.
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ ΠΈΠΊΠΎΠ½ΠΎΡΠ½ΡΠ΅ ΡΡΠΈΡΡΡ?
ΠΠΊΠΎΠ½ΠΎΡΠ½ΡΠ΅ ΡΡΠΈΡΡΡ β ΡΡΠΎ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠ΅ ΡΠ°ΠΉΠ»Ρ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS. Π‘Π»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, ΠΎΠ½ΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΡΡΡΡ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ Π»ΡΡΡΠ΅, ΡΠ΅ΠΌ ΡΠ°ΡΡΡΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΈΠΊΠΎΠ½ΠΎΡΠ½ΠΎΠ³ΠΎ ΡΡΠΈΡΡΠ° Π½Π΅ ΡΡ
ΡΠ΄ΡΠ°Π΅Ρ Π΅Π³ΠΎ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΊΠ°ΡΠ΅ΡΡΠ²ΠΎ. ΠΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ ΠΈΠ»ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ΅Π½Ρ ΡΠ°ΠΊ ΠΆΠ΅ ΠΏΡΠΎΡΡΠΎ, ΠΊΠ°ΠΊ ΠΈ ΠΎΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ΅ΠΊΡΡ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ Π½Π°ΠΉΡΠΈ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΠ΅ ΠΈΠΊΠΎΠ½ΠΎΡΠ½ΡΠ΅ ΡΡΠΈΡΡΡ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π½Π° ΡΠ²ΠΎΠ΅ΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅ ΠΈΠ»ΠΈ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ²ΠΎΠΉ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ. ΠΠ΄Π½ΠΈΠΌ ΠΈΠ· Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΈΠΊΠΎΠ½ΠΎΡΠ½ΡΡ
ΡΡΠΈΡΡΠΎΠ² ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎ, ΡΡΠΎ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ Π½Π°Π±ΠΎΡΠΎΠ² ΡΡΠΈΡΡΠΎΠ² ΡΠΎΠ΄Π΅ΡΠΆΠ°Ρ Π·Π½Π°ΡΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, Π½Π΅ Π±ΡΠ΄Π΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΈΡ
Π±ΡΠ΄Π΅Ρ Π²ΡΠ΅Π³ΠΎ 9.0121 Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ ΠΌΠ΅ΡΡΠΎ .
ΠΠ°ΠΊ ΠΈ CSS-ΡΠΏΡΠ°ΠΉΡΡ Π΄ΠΎ Π½ΠΈΡ , ΠΈΠΊΠΎΠ½ΠΎΡΠ½ΡΠ΅ ΡΡΠΈΡΡΡ Π½Π°ΡΠΈΠ½Π°ΡΡ ΡΠ΅ΡΡΡΡ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΠΎΡΡΡ Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ². ΠΠ»Ρ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΡΠΈΡΡΠΎΠ² Π·Π½Π°ΡΠΊΠΎΠ² ΡΠ°ΡΡΠΎ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ, ΡΡΠΎΠ±Ρ Π±ΡΠ°ΡΠ·Π΅Ρ Π΄Π΅Π»Π°Π» Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π°ΠΏΡΠΎΡΡ ΠΊ ΡΠ΅ΡΠ²Π΅ΡΡ, ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ²Π΅ΡΡΠΈ ΠΊ FOIT ΠΈΠ»ΠΈ ΠΌΠΈΠ³Π°Π½ΠΈΡ Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ° Π½Π° Π·Π½Π°ΡΠΊΠ°Ρ , ΠΏΠΎΠΊΠ° Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ ΡΡΠΈΡΡΠΎΠ² Π²ΡΠ΅ Π΅ΡΠ΅ Π·Π°Π³ΡΡΠΆΠ°ΡΡΡΡ. ΠΡΠ»ΠΈ Π±ΡΠ°ΡΠ·Π΅Ρ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ ΠΈΠ½ΡΠ΅ΡΠΏΡΠ΅ΡΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠΈΡΡΡ, ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΡΠΎΡΡΠΎ ΡΠ²ΠΈΠ΄ΠΈΡ ΠΏΡΡΡΡΠ΅ ΡΠΈΠΌΠ²ΠΎΠ»Ρ. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠ°ΠΊΠΈΠ΅ ΡΡΠ΅Π½Π°ΡΠΈΠΈ Π½Π΅ΠΏΡΠΈΠ΅ΠΌΠ»Π΅ΠΌΡ Π΄Π»Ρ ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ², Π²ΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² ΠΎΠ±ΡΠ°ΡΠ°ΡΡΡΡ ΠΊ SVG.
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ SVG?
SVG (ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΠ°Ρ Π²Π΅ΠΊΡΠΎΡΠ½Π°Ρ Π³ΡΠ°ΡΠΈΠΊΠ°) ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ Π²Π΅ΠΊΡΠΎΡΠ½ΡΡ Π³ΡΠ°ΡΠΈΠΊΡ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅. SVG Π±ΡΡΡΡΠΎ ΡΡΠ°Π½ΠΎΠ²ΡΡΡΡ Π½ΠΎΠ²ΡΠΌ ΡΡΠ°Π½Π΄Π°ΡΡΠΎΠΌ Π΄Π»Ρ Π²Π΅Π±-ΠΈΠΊΠΎΠ½ΠΎΠΊ ΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ. ΠΠ½ΠΈ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°ΡΡ ΠΏΡΠ΅Π²ΠΎΡΡ
ΠΎΠ΄Π½ΠΎΠ΅ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, Π½ΠΎ ΠΈ ΡΠ°ΡΡΠΎ ΡΠ΅Π½Π΄Π΅ΡΡΡΡΡ Π±ΡΡΡΡΠ΅Π΅ ΠΈ Π½Π°Π΄Π΅ΠΆΠ½Π΅Π΅, ΡΠ΅ΠΌ ΠΈΠΊΠΎΠ½ΠΎΡΠ½ΡΠ΅ ΡΡΠΈΡΡΡ. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π²Π΅ΠΊΡΠΎΡΠ½Π°Ρ Π³ΡΠ°ΡΠΈΠΊΠ° ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠΎΡΡΠΎΠΈΡ ΠΈΠ· ΠΊΠΎΠ΄Π°, Π΅Π΅ Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ· Π±ΠΎΠ»ΡΡΠΈΡ
Π²Π½Π΅ΡΠ½ΠΈΡ
ΡΠ°ΠΉΠ»ΠΎΠ². ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΠΎΠ½ΠΈ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½ΡΡΠ΅ ΠΏΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡ, ΡΠ΅ΠΌ ΡΠΈΠΏΠΈΡΠ½ΡΠ΅ ΡΠ°ΠΉΠ»Ρ JPG ΠΈΠ»ΠΈ PNG, Π° ΡΠ°ΠΊΠΆΠ΅ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ ΠΈΠΊΠΎΠ½ΠΎΡΠ½ΡΡ
ΡΡΠΈΡΡΠΎΠ².
Π§ΡΠΎΠ±Ρ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ SVG, ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΡΡΠ΅Π±ΠΎΠ²Π°ΡΡΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΎΠ±ΡΡΠ΅Π½ΠΈΠ΅, Π½ΠΎ Π²ΠΎΠ·Π½Π°Π³ΡΠ°ΠΆΠ΄Π΅Π½ΠΈΠ΅ ΡΠΎΠ³ΠΎ ΡΡΠΎΠΈΡ.
ΠΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°ΡΡ SVG
ΠΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ SVG ΠΊΠ°ΠΊ Π² ΠΎΠ±ΡΡΠ½ΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅
Π² Π²Π°ΡΠ΅ΠΌ HTML, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π°ΡΡΠΈΠ±ΡΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ Π΄Π»Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ². ΠΠ΄Π½Π°ΠΊΠΎ ΡΡΠΎΡ ΠΌΠ΅ΡΠΎΠ΄ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΎΠ³ΡΠ°Π½ΠΈΡΠΈΠ²Π°Π΅Ρ Π²Π°ΡΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΠΏΠΎ Π½Π°ΡΡΡΠΎΠΉΠΊΠ΅ SVG.
ΠΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½Π° Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠ΅ΠΉ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ Π·Π½Π°ΡΠΊΠΎΠ² SVG Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ ΠΈΠ· HTML, Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ Π²ΡΡΡΠΎΠΈΡΡ SVG, ΠΏΡΠΎΡΡΠΎ Π²ΡΡΠ°Π²ΠΈΠ² ΠΊΠΎΠ΄ ΠΏΡΡΠΌΠΎ Π² HTML-Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ. ΠΠ°ΡΠ΅ΠΌ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ ΠΈΠ»ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΡΠΈΠ»ΡΡΡΡ, Π½Π°ΡΡΡΠΎΠΈΠ² Π΅Π³ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS. ΠΠΎΡ ΠΊΠ°ΠΊ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΏΡΠΈΠΌΠ΅Ρ ΠΈΠΊΠΎΠ½ΠΊΠΈ SVG:
ΠΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠΉ Π²ΡΡΠ΅ ΠΊΠΎΠ΄, Π²Π΄ΠΎΡ Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠΉ Mozilla, ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΡΠ°ΠΊΡΡ ββΠ³ΡΠ°ΡΠΈΠΊΡ:
Π₯ΠΎΡΡ Π½Π° ΠΏΠ΅ΡΠ²ΡΠΉ Π²Π·Π³Π»ΡΠ΄ ΠΊΠΎΠ΄ SVG ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡΡΡ ΠΏΡΠ³Π°ΡΡΠΈΠΌ, ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ° Π·Π½Π°ΡΠΊΠΎΠ² SVG ΠΈ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΈΠΌΠΈ ΠΎΠ±ΠΌΠ°Π½ΡΠΈΠ²ΠΎ ΠΏΡΠΎΡΡΡ. Π€Π°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ°ΠΊΡΡ ββΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ, ΠΊΠ°ΠΊ Adobe Illustrator, Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠΉ Π²Π΅ΠΊΡΠΎΡΠ½ΠΎΠΉ Π³ΡΠ°ΡΠΈΠΊΠΈ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π·Π½Π°ΡΠΊΠΎΠ². ΠΡΠΎΡΡΠΎ ΡΠΎΡ ΡΠ°Π½ΠΈΡΠ΅ ΠΈΡ ΠΊΠ°ΠΊ ΡΠ°ΠΉΠ»Ρ SVG ΠΈΠ»ΠΈ ΡΠ³Π΅Π½Π΅ΡΠΈΡΡΠΉΡΠ΅ ΠΊΠΎΠ΄ Π² ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ΅ Illustrator. ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΡΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠΈΡΡΠ½ΠΊΠΈ ΠΈΠ· ΠΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠ² Google Π² Π²ΠΈΠ΄Π΅ ΡΠ°ΠΉΠ»ΠΎΠ² SVG.
ΠΠΊΠΎΠ½ΠΎΡΠ½ΡΠ΅ ΡΡΠΈΡΡΡ Π²ΡΠ΅ Π΅ΡΠ΅ ΠΏΠΎΠ»Π΅Π·Π½Ρ?
ΠΠΊΠΎΠ½ΠΎΡΠ½ΡΠ΅ ΡΡΠΈΡΡΡ Π΄Π°Π»Π΅ΠΊΠΎ Π½Π΅ ΡΡΡΠ°ΡΠ΅Π»ΠΈ. Π₯ΠΎΡΡ ΠΈΠΊΠΎΠ½ΠΎΡΠ½ΡΠ΅ ΡΡΠΈΡΡΡ Π½Π΅ Π²ΡΠ΅Π³Π΄Π° ΡΠ²Π»ΡΡΡΡΡ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΡΠΌΠΈ ΠΈ Π½Π°Π΄Π΅ΠΆΠ½ΡΠΌΠΈ, ΠΎΠ½ΠΈ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΡΠΎΡΡΡ ΠΈ Π»Π΅Π³ΠΊΠΈ Π² ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ°ΡΡ ΠΈΡ
ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ. Π Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ
Π·Π½Π°ΡΠΊΠΎΠ² ΠΌΠΎΠΆΠ΅Ρ Π½Π΅ ΡΡΠΎΠΈΡΡ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΡ ΡΡΠΈΡΡΡ Π·Π½Π°ΡΠΊΠΎΠ² Π΄Π»Ρ SVG Π² Π²Π°ΡΠΈΡ
ΡΡΠ°ΡΡΡ
ΠΏΡΠΎΠ΅ΠΊΡΠ°Ρ
; ΡΠ΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, SVG β ΡΡΠΎ ΠΎΠΊΠΎΠ½ΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± Π±ΡΠ΄ΡΡΠ΅Π³ΠΎ, ΡΠ°ΠΊ ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΏΠΎΠΊΠΎΠΉΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΡ
Π² Π±ΡΠ΄ΡΡΠ΅ΠΌ.
Π‘ΡΠ°Π²Π½Π΅Π½ΠΈΠ΅ SVG ΠΈ ΡΡΠΈΡΡΠΎΠ² Π·Π½Π°ΡΠΊΠΎΠ²
Π§ΡΠΎΠ±Ρ ΠΏΠΎΠΌΠΎΡΡ Π²Π°ΠΌ ΡΠ΅ΡΠΈΡΡ, ΠΊΠ°ΠΊΠΎΠΉ ΡΠΎΡΠΌΠ°Ρ Π·Π½Π°ΡΠΊΠΎΠ² Π²ΡΠ±ΡΠ°ΡΡ, Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΠΊΠ°ΠΊ ΡΡΠΈ Π΄Π²Π° Π²Π°ΡΠΈΠ°Π½ΡΠ° ΡΡΠ°Π²Π½ΠΈΠ²Π°ΡΡΡΡ Π² ΡΠ°Π·Π½ΡΡ ΠΎΡΠ΄Π΅Π»Π°Ρ .
ΠΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π° ΠΈΠΊΠΎΠ½ΠΎΡΠ½ΡΡ ΡΡΠΈΡΡΠΎΠ²
ΠΠΊΠΎΠ½ΠΎΡΠ½ΡΠ΅ ΡΡΠΈΡΡΡ ΡΡΡΠ΅ΡΡΠ²ΡΡΡ ΡΠΆΠ΅ Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²ΡΠ΅ΠΌΡ ΠΈ ΡΠ²Π»ΡΡΡΡΡ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠΌ Π²ΡΠ±ΠΎΡΠΎΠΌ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π·Π½Π°ΡΠΊΠΎΠ² Π½Π° Π²Π΅Π±-ΡΠ°ΠΉΡΠ°Ρ ΠΈ ββΠ² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡΡ . ΠΠΎΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ· ΠΈΡ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²:
ΠΡΠΎΡΡΠΎΡΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ : ΠΠΊΠΎΠ½ΠΎΡΠ½ΡΠ΅ ΡΡΠΈΡΡΡ ΠΏΡΠΎΡΡΡ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΈ ΡΡΠ΅Π±ΡΡΡ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ. ΠΡΠ΅, ΡΡΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ, ΡΡΠΎ Π²ΠΊΠ»ΡΡΠΈΡΡ ΡΠ°ΠΉΠ»Ρ ΡΡΠΈΡΡΠΎΠ² Π² Π²Π°Ρ ΠΏΡΠΎΠ΅ΠΊΡ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ CSS Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π·Π½Π°ΡΠΊΠΎΠ². ΠΡ Π΄Π°ΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΡΡΡΠΎΠΈΡΡ Π·Π½Π°ΡΠΊΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ, ΡΠ°Π·ΠΌΠ΅Ρ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°.
ΠΠ±Π»Π΅Π³ΡΠ΅Π½Π½ΡΠΉ : ΠΠΊΠΎΠ½ΠΎΡΠ½ΡΠ΅ ΡΡΠΈΡΡΡ Π»Π΅Π³ΠΊΠΈΠ΅ ΠΈ Π½Π΅ ΡΠΈΠ»ΡΠ½ΠΎ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°ΡΡ Π²ΡΠ΅ΠΌΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡΡ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°.
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π·Π½Π°ΡΠΊΠΈ ΠΊΠΎΠ΄ΠΈΡΡΡΡΡΡ ΠΊΠ°ΠΊ Π³Π»ΠΈΡΡ ΡΡΠΈΡΡΠ°, ΠΎΠ½ΠΈ ΠΏΠΎ ΡΡΡΠΈ ΡΠ²Π»ΡΡΡΡΡ ΡΠ΅ΠΊΡΡΠΎΠΌ ΠΈ Π½Π΅ ΡΡΠ΅Π±ΡΡΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ ΡΠ°ΠΉΠ»ΠΎΠ² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.
Π¨ΠΈΡΠΎΠΊΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ : ΠΠΊΠΎΠ½ΠΎΡΠ½ΡΠ΅ ΡΡΠΈΡΡΡ ΡΠΈΡΠΎΠΊΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ ΠΈ ΠΌΠΎΠ³ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π½Π° Π»ΡΠ±ΠΎΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π΅ ΠΈΠ»ΠΈ ΠΏΠ»Π°ΡΡΠΎΡΠΌΠ΅. ΠΠ½ΠΈ ΡΠ°ΠΊΠΆΠ΅ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡ ΡΠΎ ΡΡΠ΅Π΄ΡΡΠ²Π°ΠΌΠΈ ΡΡΠ΅Π½ΠΈΡ Ρ ΡΠΊΡΠ°Π½Π° ΠΈ Π΄ΡΡΠ³ΠΈΠΌΠΈ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΠΌΠΈ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡΠΌΠΈ, ΡΡΠΎ Π΄Π΅Π»Π°Π΅Ρ ΠΈΡ Π΄ΠΎΡΡΡΠΏΠ½ΡΠΌΠΈ Π΄Π»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ Ρ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΡΠΌΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΠΌΠΈ.
ΠΠ΅Π΄ΠΎΡΡΠ°ΡΠΊΠΈ ΡΡΠΈΡΡΠΎΠ²-ΠΈΠΊΠΎΠ½ΠΎΠΊ
ΠΠ΄Π½Π°ΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΡΠΈΡΡΠΎΠ²-ΠΈΠΊΠΎΠ½ΠΎΠΊ ΠΈΠΌΠ΅Π΅Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠΈ:
ΠΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½Π°Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠ° : Π₯ΠΎΡΡ ΡΡΠΈΡΡΡ-ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS, ΠΎΠ½ΠΈ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Ρ Ρ ΡΠΎΡΠΊΠΈ Π·ΡΠ΅Π½ΠΈΡ Π³ΠΈΠ±ΠΊΠΎΡΡΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π°. ΠΡ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Ρ ΠΏΡΠ΅Π΄ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΌ Π½Π°Π±ΠΎΡΠΎΠΌ Π·Π½Π°ΡΠΊΠΎΠ², Π²ΠΊΠ»ΡΡΠ΅Π½Π½ΡΡ Π² ΡΡΠΈΡΡ, ΠΈ Π½Π΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠ²ΠΎΠΈ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ Π·Π½Π°ΡΠΊΠΈ.
ΠΡΠΎΠ±Π»Π΅ΠΌΡ Ρ ΠΊΠ°ΡΠ΅ΡΡΠ²ΠΎΠΌ : ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΡΠΈΡΡΡ ΡΠΎ Π·Π½Π°ΡΠΊΠ°ΠΌΠΈ ΠΌΠΎΠ³ΡΡ ΠΈΠΌΠ΅ΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Ρ ΠΊΠ°ΡΠ΅ΡΡΠ²ΠΎΠΌ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Π½Π΅ΡΠΎΠ²Π½ΡΠ΅ ΠΊΡΠ°Ρ ΠΈΠ»ΠΈ ΠΏΠΈΠΊΡΠ΅Π»ΠΈΠ·Π°ΡΠΈΡ, ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ ΠΏΡΠΈ ΠΌΠ΅Π½ΡΡΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ°Ρ .
ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ Π·Π°ΠΌΠ΅ΡΠ½ΠΎ Π½Π° ΡΠΊΡΠ°Π½Π°Ρ Ρ Π²ΡΡΠΎΠΊΠΈΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ.
ΠΡΠΎΠ±Π»Π΅ΠΌΡ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΠΈ : ΠΠ΅ΡΠΌΠΎΡΡΡ Π½Π° ΡΠΎ, ΡΡΠΎ ΠΈΠΊΠΎΠ½ΠΎΡΠ½ΡΠ΅ ΡΡΠΈΡΡΡ ΠΎΠ±ΡΡΠ½ΠΎ Π΄ΠΎΡΡΡΠΏΠ½Ρ, ΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π²ΡΠ·ΡΠ²Π°Π΅Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠΏΠ°ΡΠ΅Π½ΠΈΡ. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ΠΈ Π·Π°ΠΊΠΎΠ΄ΠΈΡΠΎΠ²Π°Π½Ρ ΠΊΠ°ΠΊ Π³Π»ΠΈΡΡ ΡΡΠΈΡΡΠ°, ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ ΡΡΠ΅Π½ΠΈΡ Ρ ΡΠΊΡΠ°Π½Π° ΠΌΠΎΠ³ΡΡ ΠΈΡΠΏΡΡΡΠ²Π°ΡΡ ΡΡΡΠ΄Π½ΠΎΡΡΠΈ Ρ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠ΅ΠΉ ΠΈΡ ΠΊΠ°ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΌΠΎΠ³ΡΡ Π½Π΅ ΠΈΠΌΠ΅ΡΡ Π΄ΠΎΡΡΡΠΏΠ° ΠΊ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΌ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠΌ ΠΎΠΏΠΈΡΠ°Π½ΠΈΡΠΌ.
ΠΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π° SVG
SVG ΡΡΠ°Π½ΠΎΠ²ΡΡΡΡ Π²ΡΠ΅ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠΌΠΈ Π² ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠ΅ Π³ΠΎΠ΄Ρ ΠΈ Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ ΡΠΈΡΠΎΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π·Π½Π°ΡΠΊΠΎΠ² Π½Π° Π²Π΅Π±-ΡΠ°ΠΉΡΠ°Ρ ΠΈ ββΠ² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡΡ . ΠΠΎΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ· ΠΈΡ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²:
ΠΠΈΠ±ΠΊΠΎΡΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π° : SVG ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°ΡΡ Π±ΠΎΠ»ΡΡΡΡ Π³ΠΈΠ±ΠΊΠΎΡΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΡΠ΅ΠΌ ΠΈΠΊΠΎΠ½ΠΎΡΠ½ΡΠ΅ ΡΡΠΈΡΡΡ, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ Π·Π½Π°ΡΠΊΠΈ ΠΈ Π³ΡΠ°ΡΠΈΠΊΡ. ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΡΠ°ΡΡΠΈΡΠ΅Π½Π½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ ΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΊ SVG Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS ΠΈΠ»ΠΈ JavaScript.
ΠΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΠΎΡΡΡ : SVG ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΡ ΠΈ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½Ρ Π±Π΅Π· ΠΏΠΎΡΠ΅ΡΠΈ ΠΊΠ°ΡΠ΅ΡΡΠ²Π°.
ΠΡΠΎ Π΄Π΅Π»Π°Π΅Ρ ΠΈΡ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΡΠΌΠΈ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π½Π° ΡΠΊΡΠ°Π½Π°Ρ Ρ Π²ΡΡΠΎΠΊΠΈΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΈΠ»ΠΈ Π² Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅, Π³Π΄Π΅ ΡΠ°Π·ΠΌΠ΅Ρ Π·Π½Π°ΡΠΊΠΎΠ² Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΈΠ»ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΊΡΠ°Π½Π°.
Π‘ΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ : SVG Π±ΠΎΠ»Π΅Π΅ Π΄ΠΎΡΡΡΠΏΠ½Ρ, ΡΠ΅ΠΌ ΠΈΠΊΠΎΠ½ΠΎΡΠ½ΡΠ΅ ΡΡΠΈΡΡΡ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΈΡ Π»Π΅Π³ΠΊΠΎ ΡΠ°ΡΠΏΠΎΠ·Π½Π°ΡΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ°ΠΌΠΈ ΡΡΠ΅Π½ΠΈΡ Ρ ΡΠΊΡΠ°Π½Π° ΠΈ Π΄ΡΡΠ³ΠΈΠΌΠΈ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΠΌΠΈ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡΠΌΠΈ. ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΡΡ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠ΅ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠ΅ ΠΎΠΏΠΈΡΠ°Π½ΠΈΡ Π΄Π»Ρ SVG, ΡΠ΄Π΅Π»Π°Π² ΠΈΡ Π΄ΠΎΡΡΡΠΏΠ½ΡΠΌΠΈ Π΄Π»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ Ρ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΡΠΌΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΠΌΠΈ.
ΠΠ΅Π΄ΠΎΡΡΠ°ΡΠΊΠΈ SVG
ΠΠ΄Π½Π°ΠΊΠΎ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ SVG Π΅ΡΡΡ ΠΈ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠΈ:
Π‘Π»ΠΎΠΆΠ½Π°Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠ° ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠ΅ Π·Π½Π°ΡΠΊΠΈ. ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Π°ΠΌ ΠΏΠΎΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎΠ΅ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΈ ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΠΈ Π²Π°ΡΠΈΡ SVG.
ΠΠΎΠ»ΡΡΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠ°ΠΉΠ»ΠΎΠ² : SVG ΠΌΠΎΠ³ΡΡ ΠΈΠΌΠ΅ΡΡ Π±ΠΎΠ»ΡΡΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠ°ΠΉΠ»ΠΎΠ², ΡΠ΅ΠΌ ΠΈΠΊΠΎΠ½ΠΎΡΠ½ΡΠ΅ ΡΡΠΈΡΡΡ, ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠ°Ρ ΡΠ»ΠΎΠΆΠ½ΡΡ Π³ΡΠ°ΡΠΈΠΊΡ ΠΈΠ»ΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ.
ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠ²Π»ΠΈΡΡΡ Π½Π° Π²ΡΠ΅ΠΌΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π²Π°ΡΠ΅Π³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°.
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ° : Π₯ΠΎΡΡ SVG ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎΠΌ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ², Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΡΠ°ΡΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΌΠΎΠ³ΡΡ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΠΈΡ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ. ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ²Π΅ΡΡΠΈ ΠΊ Π½Π΅ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎΠΌΡ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Ρ ΠΈΠ»ΠΈ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°ΠΌ Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π΄Π»Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ.
ΠΠ°ΠΊΠΎΠΉ Π²ΡΠ±ΡΠ°ΡΡ?
ΠΡΠ°ΠΊ, ΠΊΠ°ΠΊΠΎΠΉ Π²Π°ΡΠΈΠ°Π½Ρ Π²ΡΠ±ΡΠ°ΡΡ? Π ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΌ ΠΈΡΠΎΠ³Π΅ ΡΡΠΎ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΡ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΠΉ ΠΈ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠΉ Π²Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ°. ΠΠΎΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΡΠ°ΠΊΡΠΎΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΡΠΈΡΡΠ²Π°ΡΡ ΠΏΡΠΈ Π²ΡΠ±ΠΎΡΠ΅ ΡΡΠΈΡΡΠΎΠ²-Π·Π½Π°ΡΠΊΠΎΠ² ΠΈ SVG:
1. Π Π°Π·ΠΌΠ΅Ρ
ΠΡΠ»ΠΈ Π²Ρ ΡΠ΅ΡΠΈΡΠ΅ Π²ΡΡΡΠΎΠΈΡΡ ΡΠ²ΠΎΠΈ SVG Π΄Π»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ, ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡΡΠΎ ΡΠ²Π΅Π»ΠΈΡΠΈΡΡΡΡ Π² ΡΠ°Π·ΠΌΠ΅ΡΠ΅, Π° ΠΊΠΎΠ΄ ΠΌΠΎΠΆΠ΅Ρ ΡΡΠ°ΡΡ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ Π³ΡΠΎΠΌΠΎΠ·Π΄ΠΊΠΈΠΌ. Π’Π°ΠΊΠΆΠ΅ ΡΡΠΎΠΈΡ ΠΎΡΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ ΠΊΠΎΠ΄ SVG Π½Π΅ ΠΊΡΡΠΈΡΡΠ΅ΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ. Π‘ Π΄ΡΡΠ³ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ, Π²Π½Π΅ΡΠ½ΠΈΠ΅ ΡΠ°ΠΉΠ»Ρ SVG ΠΌΠΎΠΆΠ½ΠΎ ΠΊΡΡΠΈΡΠΎΠ²Π°ΡΡ. ΠΡΠ»ΠΈ Ρ Π²Π°Ρ ΠΌΠ½ΠΎΠ³ΠΎ Π·Π½Π°ΡΠΊΠΎΠ² Π½Π° ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅, ΡΡΠΈΡΡΡ Π·Π½Π°ΡΠΊΠΎΠ² ΠΌΠΎΠ³ΡΡ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΏΠ»Π°Π²Π½ΡΠΉ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ, ΡΠ΅ΠΌ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠ΅ SVG. ΠΠΎΠ½Π΅ΡΠ½ΠΎ, Π΅ΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ Π³ΠΎΡΠΎΠ²ΡΠΉ Π½Π°Π±ΠΎΡ ΡΡΠΈΡΡΠΎΠ² Π΄Π»Ρ Π·Π½Π°ΡΠΊΠΎΠ², Π²Ρ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, Π±ΡΠ΄Π΅ΡΠ΅ ΡΡΠ°ΡΠΈΡΡ ΡΠ΅ΡΡΡΡΡ Π½Π° Π½Π΅ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ Π·Π½Π°ΡΠΊΠΈ.
ΠΠ΄Π΅ΡΡ ΡΡΠΎΠΈΡ ΠΎΡΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ 10 ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ SVG-ΠΈΠΊΠΎΠ½ΠΎΠΊ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, Π±ΡΠ΄ΡΡ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½ΡΡΠ΅, ΡΠ΅ΠΌ Π²ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° ΠΈΠΊΠΎΠ½ΠΎΠΊ. ΠΠ΄Π½Π°ΠΊΠΎ, Π΅ΡΠ»ΠΈ Π²Ρ ΡΠΎΠ·Π΄Π°Π΄ΠΈΡΠ΅ ΡΠ²ΠΎΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ Π·Π½Π°ΡΠΊΠΎΠ², ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ΅ Π·Π½Π°ΡΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Π°ΠΌ Π½ΡΠΆΠ½Ρ, ΡΡΠΈΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Π·Π½Π°ΡΠΊΠΎΠ² Π² ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΌ ΠΈΡΠΎΠ³Π΅ ΡΡΠ°Π½Π΅Ρ ΠΌΠ΅Π½ΡΡΠ΅.
2. ΠΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ
ΠΠΊΠΎΠ½ΠΎΡΠ½ΡΠ΅ ΡΡΠΈΡΡΡ ΠΌΠΎΠ³ΡΡ ΠΊΡΡΠΈΡΠΎΠ²Π°ΡΡΡΡ, ΡΡΠΎ ΡΡΠΊΠΎΡΡΠ΅Ρ ΠΈΡ Π·Π°Π³ΡΡΠ·ΠΊΡ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ ΠΈΠ· Π±ΡΠ°ΡΠ·Π΅ΡΠ°. ΠΠ΄Π½Π°ΠΊΠΎ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠΎΠΌ ΡΡΠΎΠ³ΠΎ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎ, ΡΡΠΎ ΠΎΠ½ΠΈ ΡΠΎΠ·Π΄Π°ΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ HTTP-Π·Π°ΠΏΡΠΎΡ. Π‘ Π΄ΡΡΠ³ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ, Π΅ΡΠ»ΠΈ Π²Ρ Π²ΡΡΡΠ°ΠΈΠ²Π°Π΅ΡΠ΅ Π·Π½Π°ΡΠΊΠΈ SVG, Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ HTTP-Π·Π°ΠΏΡΠΎΡΡ Π½Π΅ ΡΡΠ΅Π±ΡΡΡΡΡ, ΠΎΠ΄Π½Π°ΠΊΠΎ ΠΎΠ½ΠΈ Π½Π΅ ΠΌΠΎΠ³ΡΡ ΠΊΡΡΠΈΡΠΎΠ²Π°ΡΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ.
ΠΠ΄Π½Π°ΠΊΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΊΠ»ΡΡΠΈΡΡ ΡΠ°ΠΉΠ»Ρ SVG Π²ΠΎ Π²Π½Π΅ΡΠ½ΠΈΠΉ ΡΠ°ΠΉΠ», ΡΡΠΎ ΡΠ΄Π΅Π»Π°Π΅Ρ ΠΈΡ
ΠΊΡΡΠΈΡΡΠ΅ΠΌΡΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ. ΠΠΏΡΡΡ ΠΆΠ΅, Ρ ΡΠΎΡΠΊΠΈ Π·ΡΠ΅Π½ΠΈΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ ΡΠ°Π·Π½ΠΈΡΠ° Π² ΡΠΊΠΎΡΠΎΡΡΠΈ Π±ΡΠ΄Π΅Ρ Π·Π°Π²ΠΈΡΠ΅ΡΡ ΠΎΡ ΡΠΎΠ³ΠΎ, Π½Π°ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²Π΅Π»ΠΈΠΊ Π²Π°Ρ ΡΡΠΈΡΡ Π·Π½Π°ΡΠΊΠΎΠ²/SVG. ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ Π·Π°ΠΏΡΡΡΠΈΡΡ ΡΠ΅ΡΡΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Ρ ΠΎΠ±ΠΎΠΈΠΌΠΈ, ΡΡΠΎΠ±Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ, ΠΊΠ°ΠΊΠΎΠΉ ΠΈΠ· Π½ΠΈΡ
Π·Π°Π³ΡΡΠΆΠ°Π΅ΡΡΡ Π±ΡΡΡΡΠ΅Π΅.
3. ΠΠΈΠ±ΠΊΠΎΡΡΡ
ΠΠ±Π° ΡΠΎΡΠΌΠ°ΡΠ° ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΎΡΠΎΡΠΌΠ»Π΅Π½Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS, Π½ΠΎ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠ΅ SVG ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΡΡ Π³ΠΎΡΠ°Π·Π΄ΠΎ Π±ΠΎΠ»ΡΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ, ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ ΠΎΠ±Π²ΠΎΠ΄ΠΊΠ° Π³Π»ΠΈΡΠΎΠ² ΠΈ ΡΠ°Π·Π½ΠΎΡΠ²Π΅ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠΊΠΈ. ΠΡ Π΄Π°ΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠΌΠ΅ΡΡ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π²Π΅Π±-ΠΈΠΊΠΎΠ½ΠΊΠΈ.
4. ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ²
ΠΠ°ΠΊΠΎΠΉ Π±Ρ ΡΠΎΡΠΌΠ°Ρ Π·Π½Π°ΡΠΊΠΎΠ² Π²Ρ Π½ΠΈ Π²ΡΠ±ΡΠ°Π»ΠΈ, Π²Π°ΠΌ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΡΡΠ΅Π±ΠΎΠ²Π°ΡΡΡΡ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΠΈΡ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠΌΠΈ ΡΠΎ ΡΡΠ°ΡΡΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ΠΈ ΡΡΡΠ΅ΡΡΠ²ΡΡΡ Π΄ΠΎΠ»ΡΡΠ΅, ΠΈΠΊΠΎΠ½ΠΎΡΠ½ΡΠ΅ ΡΡΠΈΡΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ Π±ΠΎΠ»Π΅Π΅ ΡΠΈΡΠΎΠΊΠΎ. ΠΡΠ±ΠΎΠΉ, ΠΊΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ IE 6 ΠΈΠ»ΠΈ Π²ΡΡΠ΅, ΡΡΠΎ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π²ΡΠ΅Ρ , Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π²ΠΈΠ΄Π΅ΡΡ Π²Π°ΡΠΈ ΡΡΠΈΡΡΡ Π·Π½Π°ΡΠΊΠΎΠ². ΠΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ SVG, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Ρ Π·Π°Ρ ΠΎΡΠΈΡΠ΅ Π²ΠΊΠ»ΡΡΠΈΡΡ ΠΏΠΎΠ»ΠΈΡΠΈΠ»Π» JS Π΄Π»Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ ΡΠ΅Ρ , ΠΊΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ IE 8 ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ ΡΠ°Π½Π½ΡΡ Π²Π΅ΡΡΠΈΡ.
ΠΠ΄Π½Π°ΠΊΠΎ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ ΠΎΡΠΊΠ°Π·Π°Π»ΠΈΡΡ ΠΎΡ ΡΡΡΠ°ΡΠ΅Π²ΡΠΈΡ
Π²Π΅ΡΡΠΈΠΉ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ², ΡΡΠΎ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π²ΡΠ·ΡΠ²Π°ΡΡ ΠΎΡΠΎΠ±ΠΎΠ³ΠΎ Π±Π΅ΡΠΏΠΎΠΊΠΎΠΉΡΡΠ²Π°, Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, Π²ΡΠ±ΠΈΡΠ°Π΅ΡΠ΅ Π»ΠΈ Π²Ρ ΡΡΠΈΡΡΡ Π·Π½Π°ΡΠΊΠΎΠ² ΠΈΠ»ΠΈ SVG. ΠΠ΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ ΠΎΡΡΡΡΡΡΠ²ΠΈΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ Ρ ΡΠΎΡΠΊΠΈ Π·ΡΠ΅Π½ΠΈΡ Π·Π½Π°ΡΠΊΠΎΠ² SVG ΠΈ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² ΡΠ²ΡΠ·Π°Π½ΠΎ Ρ IE, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅Ρ ΡΠ°ΠΉΠ»Ρ SVG (ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΡΡΡΡ Π°ΡΡΠΈΠ±ΡΡΡ Π²ΡΡΠΎΡΡ ΠΈ ΡΠΈΡΠΈΠ½Ρ).
5. ΠΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΠΎΡΡΡ
Π₯ΠΎΡΡ ΠΈ SVG, ΠΈ ΡΡΠΈΡΡΡ Π·Π½Π°ΡΠΊΠΎΠ² ΠΎΡΠ½ΠΎΠ²Π°Π½Ρ Π½Π° Π²Π΅ΠΊΡΠΎΡΠ°Ρ , Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΈΠ½ΡΠ΅ΡΠΏΡΠ΅ΡΠΈΡΡΡΡ ΡΡΠΈΡΡΡ Π·Π½Π°ΡΠΊΠΎΠ² ΠΊΠ°ΠΊ ΡΠ΅ΠΊΡΡ, ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΎΠ½ΠΈ ΠΏΠΎΠ΄Π»Π΅ΠΆΠ°Ρ ΡΠ³Π»Π°ΠΆΠΈΠ²Π°Π½ΠΈΡ. ΠΠΎΡΡΠΎΠΌΡ SVG, ΠΊΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, Π²ΡΠ³Π»ΡΠ΄ΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ΅ΡΡΠ΅, ΡΠ΅ΠΌ ΠΈΠΊΠΎΠ½ΠΎΡΠ½ΡΠ΅ ΡΡΠΈΡΡΡ.
6. ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠΈΡΡΡ Π·Π½Π°ΡΠΊΠΎΠ² Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ Π²ΡΡΠ°Π²Π»Π΅Π½Ρ ΡΠ΅ΡΠ΅Π· ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π·Π½Π°ΡΠΊΠΎΠ² ΡΡΠΈΡΡΠΎΠ² ΠΌΠΎΠΆΠ΅Ρ ΠΎΠΊΠ°Π·Π°ΡΡΡΡ ΡΠ»ΠΎΠΆΠ½ΠΎΠΉ Π·Π°Π΄Π°ΡΠ΅ΠΉ. ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Π°ΠΌ ΠΏΡΠΈΠ΄Π΅ΡΡΡ ΡΡΠΈΡΡΠ²Π°ΡΡ Π²ΡΡΠΎΡΡ ΡΡΡΠΎΠΊΠΈ
, Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅
ΠΈ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ Π±ΡΠΊΠ²Π°ΠΌΠΈ
ΡΡΠ΅Π΄ΠΈ Π΄ΡΡΠ³ΠΈΡ
ΡΠ°ΠΊΡΠΎΡΠΎΠ², ΡΡΠΎΠ±Ρ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠΉ Π³Π»ΠΈΡ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ ΡΠΎΠ²ΠΏΠ°Π΄Π°Π»ΠΈ. ΠΠ»Ρ SVG Π²Π°ΠΌ ΠΏΡΠΎΡΡΠΎ Π½ΡΠΆΠ½ΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠ°Π·ΠΌΠ΅Ρ.
7. ΠΠΎΡΡΡΠΏΠ½ΠΎΡΡΡ
ΠΡΠ»ΠΈ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΡ ΡΠ²Π»ΡΠ΅ΡΡΡ Π³Π»Π°Π²Π½ΡΠΌ ΠΏΡΠΈΠΎΡΠΈΡΠ΅ΡΠΎΠΌ Π΄Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ°, SVG ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π»ΡΡΡΠΈΠΌ Π²ΡΠ±ΠΎΡΠΎΠΌ. Π ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ ΠΈΠΊΠΎΠ½ΠΎΡΠ½ΡΡ
ΡΡΠΈΡΡΠΎΠ², SVG ΠΈΠΌΠ΅ΡΡ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠ΅ ΡΠ΅ΠΌΠ°Π½ΡΠΈΡΠ΅ΡΠΊΠΈ Π·Π½Π°ΡΠΈΠΌΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΏΠΎΡΡΠΎΠΌΡ Π²Π°ΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎ Π²ΠΊΠ»ΡΡΠ°ΡΡ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ ΠΎΠ±Ρ
ΠΎΠ΄Π½ΡΠ΅ ΠΏΡΡΠΈ, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π²Π°ΡΠΈ ΡΡΠΈΡΡΡ Π΄ΠΎΡΡΡΠΏΠ½ΡΠΌΠΈ Π΄Π»Ρ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌ ΡΡΠ΅Π½ΠΈΡ Ρ ΡΠΊΡΠ°Π½Π°.
ΠΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ ΠΈ ΡΠ΅ΡΡΡΡΡ Π΄Π»Ρ Π·Π½Π°ΡΠΊΠΎΠ² SVG
Π‘Π΅ΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² Mozilla ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΠ΅ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΏΠΎ SVG, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΎΠ±ΡΡΡΠ½ΡΠ΅ΡΡΡ, ΠΊΠ°ΠΊ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ Π·Π½Π°ΡΠΊΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠ³ΠΎ CSS. Π Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ Adobe Illustrator ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠΌΠΎΠ³ΡΡ Π²Π°ΠΌ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ Π·Π½Π°ΡΠΊΠΈ SVG. IcoMoon β ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΡΠ΅ΡΡΡΡ Π΄Π»Ρ Π³ΠΎΡΠΎΠ²ΡΡ SVG ΠΈ Π·Π½Π°ΡΠΊΠΎΠ² ΡΡΠΈΡΡΠΎΠ², Π° ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ IcoMoon ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅. ΠΡΠ»ΠΈ Π²Ρ ΠΈΡΠ΅ΡΠ΅ ΡΡΠΎ-ΡΠΎ Ρ ΠΎΡΠΊΡΡΡΡΠΌ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ, Inkscape β ΡΡΠΎ Π±Π΅ΡΠΏΠ»Π°ΡΠ½Π°Ρ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ° Π΄Π»Ρ Π²Π΅ΠΊΡΠΎΡΠ½ΠΎΠ³ΠΎ ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠΊΡΠΏΠΎΡΡΠΈΡΡΠ΅Ρ ΡΠ°ΠΉΠ»Ρ SVG. Π’Π°ΠΊΠΈΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ, ΠΊΠ°ΠΊ Convertio, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²ΡΠ²Π°ΡΡ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠΎΡΠΌΠ°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π² ΡΠ°ΠΉΠ»Ρ SVG.
ΠΠ°ΠΆΠ½ΠΎ ΠΎΡΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ ΡΠ°ΠΊΠΈΠ΅ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ, ΠΊΠ°ΠΊ Illustrator ΠΈ Inkscape, ΡΠ°ΡΡΠΎ Π²ΡΡΡΠ°ΠΈΠ²Π°ΡΡ Π² ΡΠΊΡΠΏΠΎΡΡΠΈΡΡΠ΅ΠΌΡΠ΅ ΡΠ°ΠΉΠ»Ρ SVG Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π²Π°ΠΌ Π½Π΅ Π½ΡΠΆΠ½Π° . Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΠ²ΠΎΠΈ Π·Π½Π°ΡΠΊΠΈ SVG Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ° ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΠΈ, ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΊΠ°ΠΊ SVGO ΠΈΠ»ΠΈ SVG Minifier, ΡΡΠΎΠ±Ρ ΠΎΠ±ΡΠ΅Π·Π°ΡΡ ΠΈΡ
, ΠΏΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π½Π° ΡΠ²ΠΎΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ.