Почему при экспорте из фотошопа у иконки svg атрибут image?

Question

[Сергей Бурдужа]

Добрый день.
Экспортирую иконку из фотошопа как svg, в результате получаю тег svg, а внутри тег image.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
  <defs>
    <style>
      .cls-1 {
        opacity: 0.3;
      }
    </style>
  </defs>
  <image id="login.svg" class="cls-1" width="16" height="16" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAyUlEQVQ4jYWTzQrCQAyEv5biL3gX9B0EPXnwID67V6+CzyB4UBRqqUxJQdpNOlC2Jcl0JslmdV3jIANOwNjeu/jqKbxqg1csqLaIFAhzIAe6SfreA5MhBa8gJgsNu4cpsAzi+RDBG9gBm0hiYU3KHJ8lsLb4xSM42pnqZtujlZ09EiXMIol/WKSUiuAczHoLjICn5fVUiuAe/FXFDyuuUgnRHmiMN+Aa+YrG+BkobuxEBOGOt32LLCjhYFZSO6KLFhIIGrGXUwHlD0DMJrAktGJgAAAAAElFTkSuQmCC"/>
</svg>

Вот ссылка на файл https://www.dropbox.com/s/gsjmqjv7bb6u65s/login.sv...

Этот недоработка дизайнера, или у меня руки кривые?

Заранее благодарен.

Comments

[RAX7]

ну наверное дизайнер вставил в макет иконку в png. ФШ сам её в вектор не переведет

[yarovikov]

Да, дизайнер мудак)

[Сергей Бурдужа]

RAX7, мне нужен точный ответ. То есть, тег image присутствует потому, что иконка в формате svg?

[Сергей Бурдужа]

Просто, когда я пытаюсь экспортировать из avocode, то там тоже висит восклицательный знак. Значит проблема в иконке?
Спасибо.
Можете переответить, чтобы сделать ваш ответ выбранным?

[RAX7]

Сергей Бурдужа, для точного ответа нужно видеть что у вас там в psd.

[yarovikov]

Сергей Бурдужа, что непонятного-то? Там написано, что пнг, а не вектор. Пусть дизайнер рисует вектор, а не херней страдает))

[Ankhena]

Сергей Бурдужа, Кликните 2 раза на слой, фотошоп откроет или предложит открыть SVG в том, что открывает SVG по умолчанию ваша операционка.
Оттуда сохраните нормальный SVG.

У меня, например, по этой причине по умолчанию SVG открывает браузер. Выходит удобно.

[Сергей Бурдужа]

Ankhena, У меня не работает, появляется ошибка, где прописано, что приложение для открытия smart-object не запущена.

[Ankhena]

Сергей Бурдужа, хм.. а если кликнуть по svg просто из папки, то чем откроется?

[Сергей Бурдужа]

Ankhena, браузером

[Ankhena]

Сергей Бурдужа, макетом поделитесь?

[Сергей Бурдужа]

Ankhena, да, пожалуйста макет

[RAX7]

Сергей Бурдужа, внутри смарт-объекта eps, установите Adobe Illustrator или Inkscape и оттуда уже экспортируйте в svg
https://jsfiddle.net/o4gdspch/

[Сергей Бурдужа]

RAX7, так я не понял, мне что в inkscape открыть макет?
Или экспортировать иконку на рабочий стол, оттуда открыть в inkscape, потом экспортировать.
Можете прописать шаги?

[RAX7]

Сергей Бурдужа, ставите inkscape, убеждаетесь в том что eps файлы по умолчанию будут открываться в нем
(можно пустой файл с расширение eps создать и назначить inkscape для всех файлов этого типа)

потом делаете двойной клик в фотошопе по смарт-объекту, должен открыться inkscape с вашей иконкой

[Сергей Бурдужа]

RAX7, Я создал пустой файл с расширением eps, но он не открывается в inkscape, выскакивает ошибка

[RAX7]

Сергей Бурдужа, его не надо открывать, он нужен для того чтобы убедиться, что eps файлы по умолчанию открываются в inkscape. Теперь сделайте двойной клик в фотошопе по смарт-объекту, должен открыться inkscape с вашей иконкой

[Сергей Бурдужа]

RAX7, Блин, так я почему написал, потому что в фотошопе тоже не работает.


Там тоже ошибка, если закрываю ошибку, то открывается пустой inkscape

[RAX7]

Сергей Бурдужа, сейчас проверил, именно эта epsка в inkscape не открывается, в иллюстраторе всё норм

[Ankhena]

Сергей Бурдужа, Формат EPS.
Inkscape отказался открывать полученное.
Но открылось Corel'ом. Corel все равно показал, что внутри растр.
Иллюстратор у меня не стоит.

[Сергей Бурдужа]

Ankhena, спасибо.
Тяжело в ученье, легко в бою))

[Ankhena]

Сергей Бурдужа, я бы с интересом узнала результат открытия этого eps в Иллюстраторе, если он у вас стоит.

[RAX7]

Ankhena, нету там растра, чистейший вектор.

[Сергей Бурдужа]

RAX7, щас установлю.
Потом отвечу

[Сергей Бурдужа]

Ankhena, откуда вы знаете, что там eps?

[Ankhena]

Сергей Бурдужа, пока eps открывался просмотрщиком фоток, было видно расширение файла.
Сейчас по умолчанию он открывается в кореле, корел тоже говорит типа "настройки экспорта eps"/

[Сергей Бурдужа]

Ankhena, Я про фотошоп.
Вот есть слой smart-object с расширением svg, как у меня.
Я дал ссылку на макет.
Как вы определили, что это слой eps?

[Ankhena]

RAX7, Сергей Бурдужа,
да, действительно.

Я при открытом фотошопе меняла ассоциации файлов и прилетел растр в корел.
Сейчас пошла скринить это дело, но фотошоп переоткрывала и получился и правда "чистый вектор".

Интересно, с такой вставкой svg еще не сталкивалась.

[Сергей Бурдужа]

Ankhena, и я о том же.
Пойду глубже изучать svg.
Это моя самая больная тема.
Часто в заказах с ней встречаюсь и трачу уйму времени.

[RAX7]

Ankhena, Сергей Бурдужа, можно еще из фотошопа экспортировать содержимое смарт-объекта в файл

spoiler

а потом уже пытаться его открыть

[Ankhena]

Сергей Бурдужа, на вашей же картинке видно, что формат eps

[Сергей Бурдужа]

RAX7, хорошо, попробую

[Сергей Бурдужа]

Ankhena, ну да, это когда сообщение выскакивает.
А без него как можно узнать?

И вот еще, я установил illustrator и открыл этот файл из photoshop в illustrator, потом экспортировал как svg,
И в результате, вы не поверите, получилось чудо.
Я открыл полученный файлик в sublime text


Побегу изучать illustrator.

Что не говори, но адобовские программы самые лучшие.

Хорошо что у нас торренты есть))

[Ankhena]

Сергей Бурдужа, мне уже некоторое довольно продолжительное время везет: дизайнеры SVG'ешечки отдельной папочкой присылают. Так я им благодарна за это.

[Сергей Бурдужа]

Ankhena, я очень рад за вас, а у меня и косяки попадаются.

Answer 1

[Максим Тимофеев]

фотошоп - это не векторный редактор
svg - векторный формат
Так что если Вам надо сделать из картинки svg - ее надо векторизировать. Используйте Abode Illustrator или InkScape

Comments

[Сергей Бурдужа]

Почему нельзя, можно. Я как раз прохожу курс по svg.


Если в фотошопе слой svg, то его можно экспортировать как svg.

Вопрос у меня про то, почему в теге svg присутствует image?

[Максим Тимофеев]

Сергей Бурдужа, значит вопрос к дизайнеру.

[Сергей Бурдужа]

Понятно, это просто макет учебный.

[Максим]

Сергей Бурдужа, Вы же знаете тег image ? Так вот внутри SVG есть свой тег отвечающий за вывод изображения этот как раз и есть image так вот возможно внутри SVG он присутствует ... что то выводили с его помощью

[Сергей Бурдужа]

Максим Ленский, понятно. Значит svg иконки в этом макете битые)))

[Максим]

Сергей Бурдужа, не обязательно ... может быть просто внутри SVG есть изображение ...

[Сергей Бурдужа]

Максим Ленский, значит это просто заглушка?

[Максим]

Сергей Бурдужа, Ну может быть это pattern может быть что угодно ... я не вижу же самого SVG

[Максим Тимофеев]

Сергей Бурдужа, Вы понимаете что слой может иметь что угодно. Там может быть смарт объект, может картинка и еще куча вариантов. В вашем случае там картинка, а как я уде писал ранее - фотошоп не векторный редактор. Он не может картинку перегнать в svg, кроме как так, как он Вам сделал. Хотите иметь векторную картинку, надо или попросить дизайнера сделать ее в векторе или сделать самому в Abode Illustrator или InkScape.

[RAX7]

Сергей Бурдужа, это смарт-объект, нужно посмотреть что внутри него

[Сергей Бурдужа]

Максим Тимофеев, понятно.
Спасибо.

Answer 2

[Сергей Бурдужа]

Экспортировал смарт-объект в файл и открыл в illustrator.
Я наконец-то понял.
Этот чудо-дизайнер вставил иконки в фотошоп не как svg, а как файлы illustrator ai, вот отсюда и танцы с бубнами.