Экспортированные из Illustrator файлы .svg не будут отображаться в HTML

Я не уверен, что это совпадение, но кажется, что если я экспортирую файлы svg из Illustrator или даже пытаюсь использовать файлы svg, которые я нахожу в Интернете, которые были экспортированы из Illustrator, они не отображаются.

Я использую приведенный ниже код, может быть, кто-то с глубоким знанием svg и HTML может сказать мне, что может быть не так с моим файлом svg?

<!DOCTYPE html>
<html lang="en">
  <style>
    html {
      background-image: url(https://dl.dropboxusercontent.com/u/7146901/svgbkgnd%5B1%5D.svg);
      background-size: contain;
      height: 100%;
    }
  </style>
  <head>......</head>
</html>

Я попробовал приведенный выше код и заменил ссылку на другой файл svg, и он работает, поэтому я предполагаю, что что-то не так с моим файлом svg?


svg html css adobe-illustrator
person mvcNewbie    schedule 13.05.2013    source источник
comment
Почему вы применяете CSS к элементу html, а не к элементу body?   -  person Oded    schedule 13.05.2013
comment
Мне нужен фон для всей страницы, а не только для тела. Несмотря на это, приведенная выше разметка работает с разными файлами svg, поэтому кажется, что с этим файлом что-то не так, и я хочу попытаться понять, что это такое, но не имею ни малейшего представления, с чего начать.   -  person mvcNewbie    schedule 13.05.2013
comment
Эм. Если его нет в body, он не будет отображаться. Отображается только содержимое элемента body.   -  person Oded    schedule 13.05.2013
comment
Я считаю, что это утверждение неверно. Я использовал ту же разметку с изображениями и другими файлами svg, и все было хорошо. В качестве теста я также попытался изменить его на тело, но svg по-прежнему не отображается.   -  person mvcNewbie    schedule 13.05.2013
comment
@Oded: [Отказ от ответственности - я не гуру CSS. ] Насколько я понимаю, вы и mvcNewbie оба правы. Вы можете добавить фоновое изображение в html. Но вы также правы, потому что, если вы поместите свое фоновое изображение в тело, оно поднимется до полного окна просмотра html, если вы также не укажете цвет фона в теле. Дайте мне знать, если я ошибаюсь... Мне нравится учиться! :)   -  person markE    schedule 14.05.2013

Ответы (1)


arrow_upward
1
arrow_downward

Он работает так, как ожидалось. См. http://jsfiddle.net/PA8zn/show. Здесь я включил SVG в элемент HTML. :

html {
    background: url(https://dl.dropboxusercontent.com/u/7146901/svgbkgnd%5B1%5D.svg) no-repeat;

}

SVG — очень тяжелый файл, поэтому для его отображения требуется довольно много времени. Вы можете попробовать очистить его, чтобы улучшить производительность. Либо вручную, либо с помощью такого инструмента, как Scour: http://codedread.com/scour/

person David Storey    schedule 13.05.2013
comment
То же самое с вашим результатом, отлично работает в IE10 / win7 - хотя загрузка медленная. - person markE; 14.05.2013
comment
Большое спасибо за jsfiddle dstore, я возился с ним весь день, и ваш простой пример помог, возможно, это могло быть частью того, как я обслуживал контент. - person mvcNewbie; 14.05.2013