3

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

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

https://yadi.sk/i/tSh_5j1L3GGNf2

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

Ваш ответ

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

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