Π Π°Π·Π½ΠΎΠ΅

Иконки ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹: Font Awesome β€” ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚ ΠΈ CSS-инструмСнтарий

03.07.2023

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

Иконки Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Π° для сайта

Главная / HTML ΠΈ CSS

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ рассмотрим, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Π°, ΠΈ ΠΊΠ°ΠΊΠΈΠ΅ ΠΎΠ½ΠΈ ΠΈΠΌΠ΅ΡŽΡ‚ прСимущСства ΠΈ нСдостатки. ΠšΡ€ΠΎΠΌΠ΅ этого, Ρ€Π°Π·Π±Π΅Ρ€Ρ‘ΠΌ основныС ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΡ‹ Ρ€Π°Π±ΠΎΡ‚Ρ‹ с ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΈ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ ΠΈΡ… использования.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Π°

Иконки Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Π° прСдставляСт собой просто ΡˆΡ€ΠΈΡ„Ρ‚. Но Π² ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Ρ… ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² ΠΎΠ½ΠΈ содСрТат Π½Π΅ Π±ΡƒΠΊΠ²Ρ‹ ΠΈ Ρ†ΠΈΡ„Ρ€Ρ‹, Π° Π·Π½Π°Ρ‡ΠΊΠΈ (ΠΈΠΊΠΎΠ½ΠΊΠΈ).

Иконки Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΈΠΌΠ΅ΡŽΡ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ прСимущСства ΠΏΠ΅Ρ€Π΅Π΄ ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ Π² Π²ΠΈΠ΄Π΅ растровых ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ:

  • Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΊ Π½ΠΈΠΌ Π»ΡŽΠ±Ρ‹Π΅ CSS стили, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΊ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠΌΡƒ тСксту;
  • Π₯ΠΎΡ€ΠΎΡˆΠΎ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΡŽΡ‚ΡΡ, Ρ‚.ΠΊ. ΠΈΠΊΠΎΠ½ΠΊΠΈ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Π° ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹ΠΌΠΈ изобраТСниями. Π’.Π΅. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Ρ‚ΡŒ ΠΈΠ»ΠΈ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Ρ‚ΡŒ ΠΈΡ… Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ Π±Π΅Π· ΠΏΠΎΡ‚Π΅Ρ€ΠΈ качСства;
  • МСньшСС количСство HTTP-запросов, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΡ‚Ρ€Π΅Π±ΠΎΠ²Π°Ρ‚ΡŒΡΡ для ΠΈΡ… Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ ΠΏΠΎ ΡΡ€Π°Π²Π½Π΅Π½ΠΈΡŽ с количСством HTTP-запросов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΡ‚Ρ€Π΅Π±ΠΎΠ²Π°Ρ‚ΡŒΡΡ для Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ ΠΈΠΊΠΎΠ½ΠΎΠΊ Π² Π²ΠΈΠ΄Π΅ растровых ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ;
  • Π‘ΠΎΠ»Π΅Π΅ быстрая Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° ΠΈΠΊΠΎΠ½ΠΎΠΊ, Ρ‚. ΠΊ. ΠΎΠ½ΠΈ ΠΈΠΌΠ΅ΡŽΡ‚ нСбольшой Ρ€Π°Π·ΠΌΠ΅Ρ€;
  • Наборы ΠΈΠΊΠΎΠ½ΠΎΠΊ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ всСми Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ, ΠΈΠ·-Π·Π° Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ ΠΏΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ΡΡ Π² Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°Ρ…: eot, ttf, woff, svg ΠΈ Π΄Ρ€. Π’.Π΅. Ссли Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°, Ρ‚ΠΎ ΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π΄Ρ€ΡƒΠ³ΠΎΠΉ;
  • Π‘ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ Π½Π°Π±ΠΎΡ€ΠΎΠ² ΠΈΠΊΠΎΠ½ΠΎΠΊ (Font Awesome, Glyphicons ΠΈ Π΄Ρ€.) содСрТат Π² своём Π½Π°Π±ΠΎΡ€Π΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ SVG (Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Π°), ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠ²Π»ΡΡŽΡ‚ΡΡ ΠΎΡ‡Π΅Π½ΡŒ Ρ‡Ρ‘Ρ‚ΠΊΠΈΠΌΠΈ ΠΈ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΡŽΡ‚ΡΡ.

Π—Π½Π°Ρ‡ΠΊΠΈ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ находят ΡˆΠΈΡ€ΠΎΠΊΠΎΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΏΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π° сайта, Ρ‚.Π΅. ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для оформлСния Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Π΅Π³ΠΎ элСмСнтов ΠΈΠ»ΠΈ Π±Π»ΠΎΠΊΠΎΠ².

Но ΠΈΠΊΠΎΠ½ΠΊΠΈ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΊΡ€ΠΎΠΌΠ΅ прСимущСств, ΠΈΠΌΠ΅ΡŽΡ‚ Π΅Ρ‰Ρ‘ ΠΈ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ нСдостатки:

  • ΠΈΡ… Π·Π°Ρ‚Ρ€ΡƒΠ΄Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для ΠΈΠΊΠΎΠ½ΠΎΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠ²Π»ΡΡŽΡ‚ΡΡ слоТными изобраТСниями, Π° Π½Π΅ просто Π·Π½Π°Ρ‡ΠΊΠ°ΠΌΠΈ;
  • Ρ†Π²Π΅Ρ‚ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ ΠΎΠ΄Π½ΠΈΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠΌ.

ИспользованиС ΠΈΠΊΠΎΠ½ΠΎΠΊ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Π°

Иконки Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Π° нСвСроятно просты Π² использовании.

Рассмотрим основныС дСйствия для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с ΠΏΠ°ΠΊΠ΅Ρ‚Π°ΠΌΠΈ ΠΈΠΊΠΎΠ½ΠΎΠΊ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Π°:

  1. Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ с сайта ΠΏΠ°ΠΊΠ΅Ρ‚ ΠΈΠΊΠΎΠ½ΠΎΠΊ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° своём сайтС. Рассмотрим наши дСйствия Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Font Awesome.

  2. Π‘ΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Ρ„Π°ΠΉΠ» CSS поставляСмый вмСстС с ΠΏΠ°ΠΊΠ΅Ρ‚ΠΎΠΌ ΠΈΠΊΠΎΠ½ΠΎΠΊ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Π°. Если ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ Π΄Π°Π½Π½Ρ‹ΠΉ Ρ„Π°ΠΉΠ», Ρ‚ΠΎ Π’Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚Π΅, Ρ‡Ρ‚ΠΎ ΠΎΠ½ содСрТит ΠΈΠ½ΡΡ‚Ρ€ΡƒΠΊΡ†ΠΈΡŽ @font-face, которая ΠΏΠΎΠ΄Π³Ρ€ΡƒΠΆΠ°Π΅Ρ‚ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ ΠΈ выполняСт ΠΈΡ… настройку. ΠšΡ€ΠΎΠΌΠ΅ этого, этот Ρ„Π°ΠΉΠ» Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»Π° CSS, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… упрощаСтся Ρ€Π°Π±ΠΎΡ‚Π° с этим Π½Π°Π±ΠΎΡ€ΠΎΠΌ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ².

    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  3. Π‘ΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³ Β«fontsΒ», содСрТащий ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹, Π² Π’Π°ΡˆΡƒ Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΎΡ€ΠΈΡŽ Π½Π° сайтС. Если ΡƒΠΆΠ΅ Π΅ΡΡ‚ΡŒ такая дирСктория, Ρ‚ΠΎ Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ просто ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ содСрТимоС ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³Π° Β«fontsΒ» Π² эту Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΎΡ€ΠΈΡŽ.
  4. Π’ зависимости ΠΎΡ‚ ΠΏΠ°ΠΊΠ΅Ρ‚Π° ΠΈΠΊΠΎΠ½ΠΎΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π’Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅, Π·Π½Π°Ρ‡ΠΊΠΈ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Π²ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ΡΡ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· Π΄Π²ΡƒΡ… способов:
  • с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ указания ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… классов Π² Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π΅ class элСмСнта i ΠΈΠ»ΠΈ span.
    <!-- ΠžΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π² Font Awesome -->
    <span></span>
    <i></i>
  • с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ указания Π½ΠΎΠΌΠ΅Ρ€Π° Π·Π½Π°Ρ‡ΠΊΠ° Π² Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π΅ data:
    <!--Π¨Ρ€ΠΈΡ„Ρ‚ Elegant Icon Font -->
    <!--ΠžΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ указания Π½ΠΎΠΌΠ΅Ρ€Π° Π·Π½Π°Ρ‡ΠΊΠ° Π² Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π΅ data -->
    <span data-icon="&#x3f;"></span>
  • ΠŸΡ€ΠΈ нСобходимости ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ отобраТСния ΠΈΠΊΠΎΠ½ΠΊΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ стилСй CSS.
    <!-- НапримСр, ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π² 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 стили, ΠΊΠ°ΠΊ ΠΈ для ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Ρ… ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ². Π‘ΠΎΠ»ΡŒΡˆΠ°Ρ Π³ΠΈΠ±ΠΊΠΎΡΡ‚ΡŒ Π² ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ Ρ†Π²Π΅Ρ‚Π° являСтся бСсспорным прСимущСством.

    ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ

    Π£ ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½ΠΎΠ³ΠΎ ΡˆΡ€ΠΈΡ„Ρ‚Π° Ρ…ΠΎΡ€ΠΎΡˆΠ°Ρ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ.

    Если большая доля посСтитСлСй просматриваСт сайт Π·Π°ΠΊΠ°Π·Ρ‡ΠΈΠΊΠ° с IE7, Ρ‚ΠΎΠ³Π΄Π° ΠΎΠ΄Π½ΠΎΠ·Π½Π°Ρ‡Π½ΠΎ стоит ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚. Но ΠΌΠ½Π΅ Ρ‚Ρ€ΡƒΠ΄Π½ΠΎ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Ρ‚Π°ΠΊΡƒΡŽ ΡΠΈΡ‚ΡƒΠ°Ρ†ΠΈΡŽ, просто Π½Π° Π³Ρ€Π°Π½ΠΈ фантастики.

    ΠŸΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ сторонних Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ (Font Awesome) – лишний HTTP-запрос ΠΊ сСрвСру, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ругаСтся Google PageSpeed ΠΏΡ€ΠΈ тСстС Π½Π° ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ сайта. НапримСр, ΠΏΡ€ΠΈ использовании SVG ΠΈΠΊΠΎΠ½ΠΎΠΊ, Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Π½ΠΈ ΠΎΠ΄Π½ΠΎΠ³ΠΎ запроса ΠΊ сСрвСру. ΠŸΡ€ΠΈ условии, Ρ‡Ρ‚ΠΎ SVG ΠΊΠΎΠ΄ ΠΈΠΊΠΎΠ½ΠΎΠΊ встроСн Π² HTML Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ, Π° Π½Π΅ вставляСтся ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΎΠΉ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ SVG.

    Но с Π΄Ρ€ΡƒΠ³ΠΎΠΉ стороны, для Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ всСх ΠΈΠΊΠΎΠ½ΠΎΠΊ Π½ΡƒΠΆΠ΅Π½ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ HTTP

    -запрос. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅, ΠΊΠ°ΠΊ ΠΌΠ½ΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ запросов ΠΊ сСрвСру, ΠΏΡ€ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΡ‡Π½Ρ‹Ρ… ΠΈΠΊΠΎΠ½ΠΎΠΊ, нСпосрСдствСнно Π² HTML-ΠΊΠΎΠ΄.

    <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 ΠΈΠΊΠΎΠ½ΠΎΠΊ Π²

    HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ Π½Π΅ ΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΎΡ‰ΡƒΡ‚ΠΈΠΌΠΎΠ³ΠΎ влияния Π½Π° ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ сайта ΠΈ позволяСт Π½Π΅ Ρ‚Π΅Ρ€ΡΡ‚ΡŒ качСство ΠΈΠΊΠΎΠ½ΠΎΠΊ ΠΏΡ€ΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π²Π΅ΠΊΡ‚ΠΎΡ€ выглядит ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ ΠΏΡ€ΠΈ Π»ΡŽΠ±Ρ‹Ρ… Ρ€Π°Π·ΠΌΠ΅Ρ€Π°Ρ… экранов.

    Π£Π·Π½Π°ΠΉΡ‚Π΅ Π² этом видСокурсС всС ΠΌΠΎΠΈ сСкрСты ΡƒΡΠΏΠ΅ΡˆΠ½ΠΎΠ³ΠΎ вСдСния бизнСса ΠΏΠΎ созданию сайтов Π½Π° Π·Π°ΠΊΠ°Π·.

    • Π‘ΠΎΠ·Π΄Π°Π½ΠΎ 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:

    1. Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚Π΅ Ρ‚Π΅ΠΌΡƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса Kendo Π² свой ΠΏΡ€ΠΎΠ΅ΠΊΡ‚.
    2. ΠΠ°Π·Π½Π°Ρ‡ΡŒΡ‚Π΅ класс 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:

     
        
        
        KeyCDN
    
     

    ΠŸΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹ΠΉ Π²Ρ‹ΡˆΠ΅ ΠΊΠΎΠ΄, Π²Π΄ΠΎΡ…Π½ΠΎΠ²Π»Π΅Π½Π½Ρ‹ΠΉ Mozilla, ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ Ρ‚Π°ΠΊΡƒΡŽ ​​графику:

    Π₯отя Π½Π° ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ взгляд ΠΊΠΎΠ΄ SVG ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ ΠΏΡƒΠ³Π°ΡŽΡ‰ΠΈΠΌ, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° Π·Π½Π°Ρ‡ΠΊΠΎΠ² SVG ΠΈ ΡƒΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΈΠΌΠΈ ΠΎΠ±ΠΌΠ°Π½Ρ‡ΠΈΠ²ΠΎ просты. ЀактичСски, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ просто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π°ΠΊΡƒΡŽ ​​программу, ΠΊΠ°ΠΊ Adobe Illustrator, для создания собствСнной Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ для использования Π² качСствС Π·Π½Π°Ρ‡ΠΊΠΎΠ². ΠŸΡ€ΠΎΡΡ‚ΠΎ сохранитС ΠΈΡ… ΠΊΠ°ΠΊ Ρ„Π°ΠΉΠ»Ρ‹ SVG ΠΈΠ»ΠΈ сгСнСрируйтС ΠΊΠΎΠ΄ Π² интСрфСйсС Illustrator. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΊΡΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ рисунки ΠΈΠ· Π”ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠ² Google Π² Π²ΠΈΠ΄Π΅ Ρ„Π°ΠΉΠ»ΠΎΠ² SVG.

    Π˜ΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ всС Π΅Ρ‰Π΅ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹?

    Π˜ΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ Π΄Π°Π»Π΅ΠΊΠΎ Π½Π΅ устарСли. Π₯отя ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ Π½Π΅ всСгда ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ эффСктивными ΠΈ Π½Π°Π΄Π΅ΠΆΠ½Ρ‹ΠΌΠΈ, ΠΎΠ½ΠΈ ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ просты ΠΈ Π»Π΅Π³ΠΊΠΈ Π² Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ, поэтому ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°ΡŽΡ‚ ΠΈΡ… ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ. Π’ зависимости ΠΎΡ‚ количСства ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Ρ… Π·Π½Π°Ρ‡ΠΊΠΎΠ² ΠΌΠΎΠΆΠ΅Ρ‚ Π½Π΅ ΡΡ‚ΠΎΠΈΡ‚ΡŒ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ Π·Π½Π°Ρ‡ΠΊΠΎΠ² для SVG Π² Π²Π°ΡˆΠΈΡ… старых ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ…; Ρ‚Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, SVG β€” это ΠΎΠΊΠΎΠ½Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ способ Π±ΡƒΠ΄ΡƒΡ‰Π΅Π³ΠΎ, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ спокойно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ… Π² Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΌ.

    Π‘Ρ€Π°Π²Π½Π΅Π½ΠΈΠ΅ SVG ΠΈ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Π·Π½Π°Ρ‡ΠΊΠΎΠ²

    Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π²Π°ΠΌ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ, ΠΊΠ°ΠΊΠΎΠΉ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ Π·Π½Π°Ρ‡ΠΊΠΎΠ² Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ, Π΄Π°Π²Π°ΠΉΡ‚Π΅ посмотрим, ΠΊΠ°ΠΊ эти Π΄Π²Π° Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π° ΡΡ€Π°Π²Π½ΠΈΠ²Π°ΡŽΡ‚ΡΡ Π² Ρ€Π°Π·Π½Ρ‹Ρ… ΠΎΡ‚Π΄Π΅Π»Π°Ρ….

    ΠŸΡ€Π΅ΠΈΠΌΡƒΡ‰Π΅ΡΡ‚Π²Π° ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Ρ… ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ²

    Π˜ΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ ΡƒΠΆΠ΅ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ врСмя ΠΈ ΡΠ²Π»ΡΡŽΡ‚ΡΡ популярным Π²Ρ‹Π±ΠΎΡ€ΠΎΠΌ для отобраТСния Π·Π½Π°Ρ‡ΠΊΠΎΠ² Π½Π° Π²Π΅Π±-сайтах ΠΈ ​​в прилоТСниях. Π’ΠΎΡ‚ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠ· ΠΈΡ… прСимущСств:

    1. ΠŸΡ€ΠΎΡΡ‚ΠΎΡ‚Π° использования : Π˜ΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ просты Π² использовании ΠΈ Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ минимальной настройки. ВсС, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, это Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Ρ„Π°ΠΉΠ»Ρ‹ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Π² ваш ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ CSS для отобраТСния Π·Π½Π°Ρ‡ΠΊΠΎΠ². Π’Ρ‹ Π΄Π°ΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π·Π½Π°Ρ‡ΠΊΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚, Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ свойства.

    2. ΠžΠ±Π»Π΅Π³Ρ‡Π΅Π½Π½Ρ‹ΠΉ : Π˜ΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ Π»Π΅Π³ΠΊΠΈΠ΅ ΠΈ Π½Π΅ сильно ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°ΡŽΡ‚ врСмя Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ страницы вашСго сайта. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π·Π½Π°Ρ‡ΠΊΠΈ ΠΊΠΎΠ΄ΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΠΊΠ°ΠΊ Π³Π»ΠΈΡ„Ρ‹ ΡˆΡ€ΠΈΡ„Ρ‚Π°, ΠΎΠ½ΠΈ ΠΏΠΎ сути ΡΠ²Π»ΡΡŽΡ‚ΡΡ тСкстом ΠΈ Π½Π΅ Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… Ρ„Π°ΠΉΠ»ΠΎΠ² ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.

    3. Π¨ΠΈΡ€ΠΎΠΊΠΎ поддСрТиваСтся : Π˜ΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ ΡˆΠΈΡ€ΠΎΠΊΠΎ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ практичСски Π½Π° любом устройствС ΠΈΠ»ΠΈ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ΅. Они Ρ‚Π°ΠΊΠΆΠ΅ совмСстимы со срСдствами чтСния с экрана ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ тСхнологиями, Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ ΠΈΡ… доступными для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ с ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Ρ‹ΠΌΠΈ возмоТностями.

    НСдостатки ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ²-ΠΈΠΊΠΎΠ½ΠΎΠΊ

    Однако использованиС ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ²-ΠΈΠΊΠΎΠ½ΠΎΠΊ ΠΈΠΌΠ΅Π΅Ρ‚ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ нСдостатки:

    1. ΠžΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Π°Ρ настройка : Π₯отя ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹-ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS, ΠΎΠ½ΠΈ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Ρ‹ с Ρ‚ΠΎΡ‡ΠΊΠΈ зрСния гибкости Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π’Ρ‹ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Ρ‹ ΠΏΡ€Π΅Π΄ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ Π½Π°Π±ΠΎΡ€ΠΎΠΌ Π·Π½Π°Ρ‡ΠΊΠΎΠ², Π²ΠΊΠ»ΡŽΡ‡Π΅Π½Π½Ρ‹Ρ… Π² ΡˆΡ€ΠΈΡ„Ρ‚, ΠΈ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ свои собствСнныС Π·Π½Π°Ρ‡ΠΊΠΈ.

    2. ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ с качСством : НСкоторыС ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ со Π·Π½Π°Ρ‡ΠΊΠ°ΠΌΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ с качСством, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Π½Π΅Ρ€ΠΎΠ²Π½Ρ‹Π΅ края ΠΈΠ»ΠΈ пиксСлизация, особСнно ΠΏΡ€ΠΈ ΠΌΠ΅Π½ΡŒΡˆΠΈΡ… Ρ€Π°Π·ΠΌΠ΅Ρ€Π°Ρ…. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ особСнно Π·Π°ΠΌΠ΅Ρ‚Π½ΠΎ Π½Π° экранах с высоким Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ.

    3. ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ доступности : НСсмотря Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ доступны, ΠΈΡ… использованиС Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ опасСния. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ΠΈ Π·Π°ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²Π°Π½Ρ‹ ΠΊΠ°ΠΊ Π³Π»ΠΈΡ„Ρ‹ ΡˆΡ€ΠΈΡ„Ρ‚Π°, ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ чтСния с экрана ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΡ‹Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ трудности с ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠ΅ΠΉ ΠΈΡ… ΠΊΠ°ΠΊ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π½Π΅ ΠΈΠΌΠ΅Ρ‚ΡŒ доступа ΠΊ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΌ тСкстовым описаниям.

    ΠŸΡ€Π΅ΠΈΠΌΡƒΡ‰Π΅ΡΡ‚Π²Π° SVG

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

    1. Π“ΠΈΠ±ΠΊΠΎΡΡ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½Π° : SVG ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΠ²Π°ΡŽΡ‚ Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ Π³ΠΈΠ±ΠΊΠΎΡΡ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Ρ‡Π΅ΠΌ ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹, позволяя ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ собствСнныС Π·Π½Π°Ρ‡ΠΊΠΈ ΠΈ Π³Ρ€Π°Ρ„ΠΈΠΊΡƒ. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½Π½Ρ‹Π΅ эффСкты ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ ΠΊ SVG с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS ΠΈΠ»ΠΈ JavaScript.

    2. ΠœΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΠΎΡΡ‚ΡŒ : SVG ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΡ‹ ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½Ρ‹ Π±Π΅Π· ΠΏΠΎΡ‚Π΅Ρ€ΠΈ качСства. Π­Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ ΠΈΡ… ΠΈΠ΄Π΅Π°Π»ΡŒΠ½Ρ‹ΠΌΠΈ для использования Π½Π° экранах с высоким Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ ΠΈΠ»ΠΈ Π² Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅, Π³Π΄Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€ Π·Π½Π°Ρ‡ΠΊΠΎΠ² Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ Π² зависимости ΠΎΡ‚ устройства ΠΈΠ»ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° экрана.

    3. Π‘ΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ возмоТности : SVG Π±ΠΎΠ»Π΅Π΅ доступны, Ρ‡Π΅ΠΌ ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΈΡ… Π»Π΅Π³ΠΊΠΎ Ρ€Π°ΡΠΏΠΎΠ·Π½Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°ΠΌΠΈ чтСния с экрана ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ тСхнологиями. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹Π΅ тСкстовыС описания для SVG, сдСлав ΠΈΡ… доступными для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ с ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Ρ‹ΠΌΠΈ возмоТностями.

    НСдостатки SVG

    Однако Ρƒ использования SVG Π΅ΡΡ‚ΡŒ ΠΈ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ нСдостатки:

    1. БлоТная настройка собствСнныС ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ Π·Π½Π°Ρ‡ΠΊΠΈ. Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Π°ΠΌ потрСбуСтся ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ спСциализированноС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ΅ обСспСчСниС ΠΈΠ»ΠΈ инструмСнты для создания ΠΈ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ Π²Π°ΡˆΠΈΡ… SVG.

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

    3. ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° : Π₯отя 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, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒ ΠΈΡ…, ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ Π½Π° свой Π²Π΅Π±-сайт.

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

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