3

Здравствуйте, у меня такая проблема, что при загрузке страницы svg файлы сначала разносятся на всю страницу, а уже потом подгоняются в заданный размер, очень некрасиво смотрится, preloader не действует на svg файлы, как с этим бороться? Заранее благодарю.

P.S. Вот ссылка на видео, для наглядности

https://yadi.sk/i/tSh_5j1L3GGNf2

7
  • 1
    1. Задайте высоту\ширину контейнерам, в которых находятся свг. 2. preloader не действует на svg файлы - сделайте тогда прелоадер на весь сайт :)
    – YozhEzhi
    Commented 23 мар. 2017 в 7:26
  • 1
    @LiEm Покажите код пожалуйста, где вы подключаете SVG файлы в Html. Commented 23 мар. 2017 в 8:03
  • 1. У меня всегда есть ширина и высота у контейнеров, в которые я ставлю любое изображение, если бы я ее не давал, то свг файл был бы таким огромным всегда, а не только в мгновение, только при загрузке страницы.
    – LiEm
    Commented 24 мар. 2017 в 8:27
  • 2. Я на весь сайт и делаю прилодер а как иначе? Просто свг файлы не поддаются влиянию прилодера, у них почему-то своя жизнь, пнг файлы это другое дело
    – LiEm
    Commented 24 мар. 2017 в 8:28
  • 1
    @LiEm Если вам помог чей-то ответ, нажмите на галочку ниже треугольника. Если нет, то уточняйте дополнительными вопросами. Commented 28 мар. 2017 в 18:33

2 ответа 2

3
  1. Подключать svg файл лучшего всего через тег <object>

 <object type="image/svg+xml" data="SvgImg.svg" width="200" height="200">
          <img src="SvgImg.png" width="200" height="200" alt="image format png"/>
    </object>    

  1. Браузер не понимающий SVG проигнорирует тег <object> и перейдет к следующему тегу <img> и обработает его, как обычный HTML тег и выведет картинку. Подробнее здесь. Так надо делать, если вы хотите использовать интерактивность svg и это лучший способ добавления svg файлов в html.
  2. Ставить диагноз по TV, а в вашем случае по предложенному видео,- сродни шаманству, но попробую:

У вас вероятнее всего в самом файле svg отсутствует viewport, поэтому картинка растягивается в каких-то моментах на весь экран. Браузер, если не указан viewport svg считает его по умолчанию: width="100%" и height="100%" (это и есть viewport по умолчанию) Поэтому попробуйте явно задать в шапке svg файла viewport и viewBox с равными величинами. Например:

<svg id="svg1" version="1.1"
       xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
	  width="200" height="200" viewBox="0 0 200 200">

Кратко:

  • Сначала дорабатываете файл svg
  • Изменяете способ добавления svg файла в Html страничку
2

Можно попробовать скрыть все svg и img до момента загрузки стилей:

<style>svg, img { display: none; }</style>
<link rel="stylesheet" href="styles.css" />

Ну а в css файле выставляем нужный display.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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