4

Также хотелось бы уточнить, если логотипа нет в svg, то что использовать как альтернативу?

3
  • Альтернатива img + атрибут srcset developer.mozilla.org/ru/docs/Web/HTML/Element/img. Пример - <img src="logo.png" srcset="[email protected] 2x, [email protected] 3x" alt="Logo">, где [email protected] и [email protected] - размер лого в 2 раза и 3 раза больше исходного.
    – soledar10
    20 апр 2020 в 5:32
  • Я правильно понял? "_" это вроде набора возможных изображений, с определенными размерами, которые используются при изменении размера окна? 20 апр 2020 в 7:59
  • это для экранов с более высокой плотностью пикселей, чтобы изображение не было размытым
    – soledar10
    20 апр 2020 в 8:33

3 ответа 3

10

При добавлении svg изображения с помощью <img> или c помощью CSS свойства background-image
вы не только лишаетесь всех преимуществ формата SVG, как-то, - адаптивность, интерактивность, но и не сможете стилизовать своё лого.
Изменять цвет SVG можно будет, только с помощью CSS или SVG фильтров. Что не очень удобно.

То есть, при этом способе добавления <img src="https://"> забудьте об обычных и привычных способах стилизации изображений с помощью правил CSS

Зачем тогда SVG формат, проще добавить PNG картинку


Для использования всех преимуществ SVG формата, можно добавлять его инлайн способом, то есть непосредственным копирование в HTML
Если есть необходимость добавлять, отдельно лежащий файл SVG, то лучше использовать тег <object>

<object type="image/svg+xml" data="images/test.svg">
  Your  browser does not support SVG 
</object>

Далее вызываете иконки по ID

<svg class="inline-svg-icon"> 
<use  xlink:href="test.svg#cloud"></use> 
</svg>
5
  • Уважаемый, таинственный минусующий, я что-то ответил не так? Или вы знаете эту тему лучше? Так выйдете из тени и дайте свой ответ, либо отзовите свой минус, если поставили его не по технической стороне, а по каким-то иным соображениям. 19 апр 2020 в 20:22
  • у вас появился тайный ненавистник) +
    – meine
    19 апр 2020 в 22:02
  • Всё же адаптивность, интерактивность и стилизация нужны далеко не всегда (пример этого можно посмотреть прямо на этой странице в верхнем левом углу), так что люто записывать это в недостатки несколько однобокая точка зрения. (Если что, я не являюсь таинственным минусующим)
    – andreymal
    19 апр 2020 в 22:04
  • Для использования всех преимуществ SVG формата, можно добавлять его инлайн способом, то есть непосредственным копирование в HTML это как ?
    – Leks
    19 апр 2020 в 22:25
  • 6
    При <img> мы не лишаемся всех преимуществ, а только некоторых. Основное преимущество - это масштаб без потерь и чёткость на любых ppi. Что такое адаптивность svg? И везде ли требуется интерактивность? Скорее очень редко. И добавлять png не проще - png не векторный например. Думаю что вопрос в целом не корректен, потому что у svg очень много применений, и лучший способ в каждой ситуации разный. Например инлайновый svg не кэшируется, а object не может быть фоном элемента.
    – user347472
    20 апр 2020 в 0:33
4

Добавление примеров по комментариям

@Pavel Grishaev
у svg очень много применений, и лучший способ в каждой ситуации разный. Например инлайновый svg не кэшируется, а object не может быть фоном элемента

Согласен, в каждом конкретном проекте нужно выбирать наиболее оптимальный вариант добавления SVG в HTML страничку

Вот наиболее распространенные способы добавления SVG


@Leks `Для использования всех преимуществ SVG формата, можно добавлять его инлайн способом, то есть непосредственным копирование в HTML` это как?

Инлайн способ

.container {
width:7vw;
height: auto;
}
<div class="container">
<svg  viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink">
<line x1="20" y1="30" x2="50" y2="30" stroke="black" stroke-width="5" stroke-linecap="round"/>
<line x1="20" y1="40" x2="50" y2="40" stroke="black" stroke-width="5" stroke-linecap="round"/>
<line x1="20" y1="50" x2="50" y2="50" stroke="black" stroke-width="5" stroke-linecap="round"/>
</svg> 
</div>

<img>

Сохраняем код в файл *.svg и вызываем его

<img src="https://svg-art.ru/files/menubutton.svg" />

Пример стилизации SVG, добавленного с помощью тега <img>

  1. с помощью CSS фильтров

.twa-arrow {
  background-image: url("https://twemoji.maxcdn.com/svg/1f500.svg");
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  height: 3em;
  width: 3em;
  margin: 0 0.15em 0 0.3em;
  vertical-align: -0.3em;
  background-size: 3em 3em;
}
.grey-out {
  opacity: 0.4;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
}
.hue-rotate {
  filter: hue-rotate(90deg);
  -webkit-filter: hue-rotate(90deg);
}
.invert {
  filter: invert(100%);
  -webkit-filter: invert(100%);
}
<body>
  <span class="twa-arrow"></span>
  <span class="twa-arrow grey-out"></span>
  <span class="twa-arrow hue-rotate"></span>
  <span class="twa-arrow invert"></span>
</body>

  1. SVG фильтры

.icon {
width:25vw; 
filter:url(#solid);
}
.icon:hover {
filter:url(#solid2);
}
<div class="container">
 <img class="icon" src="https://twemoji.maxcdn.com/svg/1f500.svg">
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1" height="1" > 

    <defs>
   <filter id="solid" x="0" y="0" width="1" height="1" >
     <feFlood result="flood" flood-color="dodgerblue" />
    <feComposite in="flood" in2="SourceAlpha" operator="atop" result="maskedflood"/>
    <feBlend in="SourceGraphic" in2="maskedflood" mode="lighten" />
  </filter> 
    <!-- Фильтр работает при наведении-->
   <filter id="solid2" x="0" y="0" width="1" height="1" >
     <feFlood result="flood" flood-color="crimson" />
    <feComposite in="flood" in2="SourceAlpha" operator="atop" result="maskedflood"/>
    <feBlend in="SourceGraphic" in2="maskedflood" mode="lighten" />
  </filter>
    
     </defs>
  
</svg>

3
  • Саша всегда есть тот кто имеет что то против ...не парся этим - ни докажешь всё равно 20 апр 2020 в 8:32
  • @MaximLensky А я и не парюсь этим. Всегда допускаю возможность, что кто-то знает, что-то ещё и с удовольствием посмотрю альтернативный ответ, чтобы и самому узнать, что-то новое 20 апр 2020 в 8:36
  • автор вопроса хоть и не отметил решением но сказал спасибо ...значит мнение ему важно больше 20 апр 2020 в 8:39
2

Лучше всего в теге img (если речь о логотипе), потому что 1) так он будет кэшироваться как отдельный ресурс на разных страницах сайта, и 2) к отдельным элементам логотипа вряд ли нужен доступ, и использовать тег svg поэтому не обязательно.

Img потом можно обернуть в ссылку <a href="/">...</a>, чтобы с других страниц сайта был переход на главную страницу кликом по логотипу.

Также у этой ссылки можно прописать логотип фоном background: url(...) no-repeat вместо тега картинки внутри.

Если нет лого в формате svg, то для лого обычно используют png.

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.