Svg и его друзья. Что с ним не так?

Question

[Andrew]

Доброго времени суток.
Подкинули мне недавно макет.psd . Есть в нем элемент "Vector smart object", я его экспортировал как .svg и попытался использовать в вёрстке.
если задать его так:
<img src="img/v.svg" alt="">
или так
background-image: url("img/v.svg");
- его не видно (внешней ссылкой тоже).
Если закинуть через обьект

<div id="ObjectTag">
      <object type="image/svg+xml" data="img/v.svg">
      Your browser does not support SVG.
    </object>
    </div>
    <img src="img/v.svg" alt="">

То видно и первый и второй вариант(img).
В Хроме и Опере - не видно, в Мозилле - видно.
Если открыть только его в новой ссылке - с ним всё ок.
Судя по всему, проблема в нём, мб как-то "специльно" надо в Фотошопе сохранять.
Облазил спецификации, но чет пока мимо.
Кто сталкивался?
Сам .svg

Comments

[Александр]

Не экспортируйте SVG из PS. Да вы получаете svg файл, но внутри обычный png

[Andrew]

Александр, альтернативы?

[Александр]

Andrew, векторный смарт объект можно открыть в AI. Кажется, на панеле параметров PS при выборе объекта появляется отдельная кнопка.

[Andrew]

Александр, так и сделаю, не думал, что в ФШ так не доработано это. Закиньте в "Ответы", - отмечу.

[Александр]

Andrew, это не относится к основному вопросу

[Andrew]

Александр,

Судя по всему, проблема в нём, мб как-то "специльно" надо в Фотошопе сохранять...
Кто сталкивался?

Не экспортируйте SVG из PS. Да вы получаете svg файл, но внутри обычный png

Мне показалось, что этого достаточно для ответа. Как угодно.

[Виктория]

Смарт-объекты из ФШ открываются в отдельной вкладке, на саму картину наложен слой обтравочной маски. Дабы это стало единым целым, надо объединить изображение с этим слоем. И уже потом можно с результатом работать. Александр прав, ФШ и свг - это разные вселенные.
А вообще, знаю это лого, знаю макет и компанию, которая разрабатывала этот проект. Похоже, мы с Вами из одного города.

[Andrew]

Виктория, О#са? :)

[Виктория]

Andrew, О#са-мама, верно.

Answer 1

[Lam Besis]

Я столкнулась с такой же проблемой как и у вас, и методом проб и ошибок поняла в чем дело. Вы правы, svg из фотошопа нужно "специально" сохранять. Самую простую форму/вектор фш экспортирует криво. Но если просто скопировать SVG-код слоя, создать файл.svg, и потом закинуть в него скопированный код, то все работает идеально.

К слову этот метод прекрасно работает даже когда формам заданы какие-нибудь параметры наложения.

Answer 2

[Aleksey Solovyev]

<svg class="icon icon-vk">
  <use xlink:href="img/sprite.svg#icon-vk"></use>
</svg>

В папке img находится файл sprite.svg

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg"><symbol id="icon-vk" viewBox="0 0 24 24">
    <path class="st0" d="M13.162 18.994c.609 0 .858-.406.851-.915-.031-1.917.714-2.949 2.059-1.604 1.488 1.488 1.796 2.519 3.603 2.519h3.2c.808 0 1.126-.26 1.126-.668 0-.863-1.421-2.386-2.625-3.504-1.686-1.565-1.765-1.602-.313-3.486C22.864 8.997 25.22 6 23.136 6h-3.981c-.772 0-.828.435-1.103 1.083-.995 2.347-2.886 5.387-3.604 4.922-.751-.485-.407-2.406-.35-5.261.015-.754.011-1.271-1.141-1.539A8.07 8.07 0 0 0 11.148 5c-2.273 0-3.841.953-2.95 1.119 1.571.293 1.42 3.692 1.054 5.16-.638 2.556-3.036-2.024-4.035-4.305C4.976 6.426 4.902 6 4.042 6H.787C.295 6 0 6.16 0 6.516c0 .602 2.96 6.72 5.786 9.77 2.756 2.975 5.48 2.708 7.376 2.708z"/>
</symbol></svg>

В sprite.svg добавляем другие иконки(добавляем symbol еще один

<svg>
  <symbol id="icon-vk"></symbol>
  <symbol id="icon-instagram"></symbol>
  ...
</svg>

. Использовать точно также. Только id поменяйте.

ps и еще. Надо поднять сервер, чтобы в chrome, opera отображались таким способом иконки(в firefox будут отображаться корректно всегда).Ибо chrome выдает ошибку
Unsafe attempt to load URL .../img/sprite.svg#icon-vk from frame with URL ...page.html. 'file:' URLs are treated as unique security origins. , которую можно решить разрешением XMLHttpRequests. Вот тут можно решение найти https://github.com/jonathantneal/svg4everybody/iss...
или вставлять инлайн. Тогда ошибки не будет и будут отображаться

Comments

[Andrew]

Вы немного неправильно меня поняли, судя по всему.
Т.к. с .svg вообще не было проблем, были проблемы конкретно с этим макетом/svg .
Т.е. если взять другой рандомный .svg, то всё прекрасно работает.
И тут скорее проблема в Photoshop'е.
Но спасибо за совет по организации .svg.