Загрузка страницы с SVG файлами

329
25 марта 2017, 00:05

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

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

https://yadi.sk/i/tSh_5j1L3GGNf2

Answer 1
  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 страничку
Answer 2

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

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

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

READ ALSO
Поддержка UTF-8 в JDBC соединении к MySQL

Поддержка UTF-8 в JDBC соединении к MySQL

При записи в базу данных строк, содержащих кириллицу, отображаются знаки неверной кодировки:

214
Ошибки на slave, как реагировать?

Ошибки на slave, как реагировать?

Связка master-slave master ( 101

399
Не получается подключиться к mysql в golang

Не получается подключиться к mysql в golang

Как правильно задавать настройки подключения к БД? Параметры настроек правильные, подключался через терминалНа странице выводит только:...

426