Как подключить растровую графику из SVG спрайта в HTML?

alexeeey_kuznetsov,
ну так я и говорю - иконки в png, завернуты в svg. Я честно не понимаю, для чего они это делают?
Если вас устраивает такой вариант, делайте. Там разница почему то в том, что для svg и png источника viewBox="0 0 20 11" отображается по разному.
Вывести эти иконки вы выведете, только цвет менять на лету не сможете. Т.е. если нужны иконки разного цвета, а они скорее всего нужны, например, для hover , то придется делать дубли со всеми необходимыми цветами. Таким образом, вообще весть основной смысл svg спрайтов нивелируется...

Почему при переключении табов происходит скачок вверх и как от этого избавиться?

хм.. сейчас вот посмотрел темы от м2 коммерческие, в которых bootstrap встроен, так там несмотря на него такого поведения не наблюдается. CSS я посмотрел ничего вроде такого именно тут не добавляет, на всякий случай css bootstrap-овские отключил, ничего не изменилось.
Но вполне возможно что вы правы, если дело в обработке событий именно в js файлах bs- посмотрю, отпишусь.
А вообще интересно, где обработка этого события прописана и можно ли ее без удаления bs переписать, и если да то как?
пс. коллеги подключили bootstrap вместе с модулем от venustheme - точнее сказать с visual page builder-ом.
Этот билдер нужен для контент персонала, народ каждый день клепает лендинг страницы для sea, кодом они не смогут, так что скорее всего удалить bootstrap не дадут...

Почему при переключении табов происходит скачок вверх и как от этого избавиться?

я это вижу, так ведь и надо, например, чтобы по href="#additional" открывалось бы именно нужное содержимое. Если я его изменю, он же не откроется....И повторюсь, что стандартно с табами вроде бы так не происходит.

Возможно ли конвертировать формат ai или eps в psd с сохранением слоев?

BuBux,

в илюстраторе и так каждый объет это отдельный слой

это не так, в иллюстраторе есть слои, но то что выглядит для вас как привычные слои в фотошопе это path-ы, пути то есть или контуры, как правило они все находятся на одном слое. Впрочем, важнее то, что вы усложняете задачу.
Под ваши условия я вижу только один выход: копировать пути в иллюстраторе и по отдельност вставлять в шоп - каждый векторный смарт объект будет автоматически создан на новом слое. Недостатки такого подхода - кроме всех прочих минусах растра когда есть вектор - если слоев куева туча, запаришься все копировать и центрировать в шопе.

Рекомендации по логодизайну. Как сделать логотип лучше?

так покажите что получилось, а то чего дополнять то..

PNG, JPG или SVG: что использовать?

Adamos, вообще то уже год как минимум гугл учитывает скорость - или я что то пропустил и они это уже отменили?
А так да, если вам гугл неважен, то и вопросов нет.

Как реализованные такие переходы?

ⓒⓢⓢ,
да работает отлично, спасибо )

Как реализованные такие переходы?

Скрипт прикольный, да, даже захотел его в одном маленьком проекте использовать.
JS правда в ie 11 не работает, вроде переписал код в es5, но все равно не хочет ((

Почему элемент span не отображается в ie11?

Алексей,
да, похоже, спасибо...

Почему chrome так криво отображает эти svg - паттерны?

Атрибут никак не повлиял, а вот с дробными - в первом приближении, да, достаточно убрать дробные у вьюпорта и высоты-ширины.
В первом - синем - там вообще проблем нет, там еще и все координаты изменил на 13 и 1, и все идеально.
Во втором - сложнее, изменил пока только вьюпорт и ширину высоту. При очень детальном рассмотрении есть места, где можно заметить артефакты, их немного, но есть.
Проблема в том, что собственно, svg код я не писал, паттерны сделал в иллюстраторе - изначально это были векторы цельные, примерно 10см х 10см милиметровки, но для фона взять паттерн всегда лучше.
Но главное, смысл понятен, будет время, оптимизирую и второй паттерн до оптимального.

Iconmoon "Strokes get ignored when generating fonts"?

я в иллюстраторе работаю - выделяете нужный вам контур, меню object-expand...
и ок, преобразуете вашу обводку в путь с заливкой.
Сорри, не знаю как сейчас это точно в русском иллюстраторе, судя по вот этому источнику должно было бы быть как "объект-разобрать..." но может устарело

Как сделать анимацию заголовка и текста под ним в слайдере?

Но YakovSpb вроде бы спрашивает только про заголовок и текст, а там что сложного то? Opacity для заголовка и текста, плюс для заголовка смещение, разве нет?


Для бэкграунда да, там хоть и можно но сложно вручную.

Как достать код из svg?

Как её векторизировать?

Ну лучше и как правило проще всего отрисовать в векторном редакторе вручную. Есть инструменты типа vector magic, но им хорошо что то сложное векторизовать, и чаще всего все равно после него вручную править приходится.
Если опыта работы с вектором нет, наверное просить того у кого есть.
Если можете картинку, легче сказать будет, что и как.

Почему Magento2 Blank Theme так деплоит этот код, и как можно заставить выдавать на выходе правильный css?

Да, спасибо - как раз сейчас на stack overflow нашел это решение - именно то что надо.
Смутило то, что когда компилирую эту конструкцию из того же Less под gulp, то на выходе получаю нормальный код, а вот в magento - такой вот.
Но теперь буду знать.

Как насторить browsersynch для работы с фронтом под Magento2?

В общем sass - тему настроил для работы с browsersync- там моя ошибка была.
По поводу less - решения от rocketweb видел: почему то начинает исходные less искать в целевой статик- папке - хотя в конфиге написано где source, а где dest - отложил пока.

Как насторить browsersynch для работы с фронтом под Magento2?

1-я проблема в том, что не работает обновление браузера после успешного выполнения тасков - подозреваю все таки ошибки своего конфига.
В доках для browsersync.json написан пример для конфига -

{
  "proxy": "m2test.dev",
  "rewriteRules": [
    {
      "match": ".m2test.dev",
      "replace": ""
    }
  ]
}

У меня удаленный сервер (показать не могу, доступ открыт только для определенных ip) - test3.mysite.com.
При этом если в качестве прокси указать test3.mysite.com -

{
  "proxy": "test3.mysite.com"
}

все мертво, но это вроде как и понятно.

На сервере все окружение настроено, любое простое приложение, запущенное в нод-окружении, становится доступным, если сервер выставить не удаленный адрес и не локалхост, а 0.0.0.0
Так вот, если я указываю 0.0.0.0 как прокси -

{
  "proxy": "0.0.0.0"
}

то - о чудо! - мой сайт становится доступным для редактирования по test3.mysite.com: 3000, но так или иначе, обновление браузера посредством browsersync не происходит.

2-я проблема в том, что если я добавляю вторую тему, например, стандартную blank на less -

{
    "sass-blank": {
      "src": "vendor/snowdog/theme-blank-sass",
      "dest": "pub/static/frontend/Snowdog/blank",
      "locale": ["en_US"],
      "lang": "scss",
      "postcss": ["plugins.autoprefixer()"],
      "ignore": [".test"]
    }

"blank": {
      "src": "vendor/magento/theme-frontend-blank",
      "dest": "pub/static/frontend/Magento/blank",
      "locale": ["en_US"],
      "lang": "less",
      "postcss": ["plugins.autoprefixer()"],
      "ignore": [".test"]
    }
}

то даже ошибок никаких нет, просто игнорируется, как будто темы этой в конфиге нет. Хотя первая, которая на sass, в том же конфиге, и обрабатывается нормально, и на любую ошибку ругается моментально.

Как быстро автоматизировать вёрстку сайта с помощью html шаблонизатора/препроцессора? Есть какой-то стартеркит?

Тоже сейчас уже какое то время в поиске чего то подобного, и при этом подходящего для своих нужд - понял, что все равно нужно будет конкретно под себя собирать самому. Скорее всего готового - взял и в бой - найти не получится, максимум, это выбрать какое то решение и допиливать уже оптимально для себя.
Например, беру известный стартовый шаблон OptimizedHTML 4 - для одних целей выпиливаю bootstrap, sass заменяю на less, ну еще например добавляю pug.
Для других целей уже какая то другая сборка.

Как нарисовать букву F?

Станислав,
если вы увеличите свой svg - тот что вы нарисовали - ну хотя бы до 200-300%, вы увидите тогда, что получилось.
Буква F отрисовывается, если я не разучился считать, 10 точками, у вас их видно что только 6.

Можно меньшим числом точек, ео контурами

Как разрешить загрузку svg в админке Magento 2.2.X?

например, content-design-configuration- ... header-logo

Как грамотнее всего подготовить верстку под Magento2?

Требования вполне себе корректные. Почему бы не писать сразу Less код? (Или вообще CSS), там же нет особой разницы в синтаксисе.

Вчера пообщались с коллегами, с кем будем вести этот проект - по видимому таки придется писать в less. Главный аргумент тут то что тема blank использует less. Есть неофициальная версия этой темы с sass (кстати, эти же разработчики предлагают и свое решение для фронтенда в М2) - но коллеги не доверяют, переживают, что возможны проблемы с совместимостью, не хотят в общем. Обновляется она реже чем официальная, ну да, теоретически проблемы возможны.
Для меня писать в less не критично, но неудобно. Привык к синтаксису sass, да и по любому sass гибче гораздо.
Кроме того, верстать такой большой проект без фреймворков все таки гораздо затратнее по времени. Разбирая дизайн под верстку, вижу что рисовали его под сетку бс 1280px. А как известно, бс 4 поддерживает только sass...
Врочем, и для него есть неофициальная версия с less, возможно, это как раз то что подойдет.

Можете попробовать освить сборщики, gulp вам хватит, что бы склеить стили в один файл, минифицировать и т.п.

С gulp-ом я работаю, с бэм знаком, а вот шаблонизаторы - вот тут пробел у меня. Посоветуйте что на ваш взгляд наиболее перспективно, дружелюбно, и где есть хорошая база для изучения.