• 0
aqua.77

Svg картинки

Вопрос

Привет форум. Хотел спросить как добавляются или создаются картинки в формате svg. Они рисуются на отдельном редакторе а после компилированный код добавляется в html файл? Можно ли из растровой картинки сделать svg? и если можно какие нибудь уроки подробные Спасибо.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

1 ответ на этот вопрос

  • 3

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!


Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.


Войти сейчас

  • Похожие публикации

    • Автор: Schamil74
      Всем привет!
      Столкнулся проблемой отображения svg спрайтов в ie11.
       
      Описываю проделанные мною два варианта:
      В 1ом варианте svg экспортировал через плагин generate в photoshop 2015. Работает во всех браузерах, но не реагирует на css, даже если почистить все атрибуты у svg.
      Во 2ом сложнее сохранял как .ai и конвертировал в svg. Не работает только в ie11 (версии ниже не проверял, но это и не нужно), но реагирует на css, причем не отображаются только некоторые иконки.
       
      Спрайт прикрепляю сразу после открывающего тэга body и скрываю его. Обращаюсь к спрайту через, например (синтаксис pug: 
      svg.contacts__flag(width="60", height="90")
         use(xlink:href="#flag")
       
      Ниже сама верстка со спрайтом только 2го варианта
      https://schamil74.github.io/Mishka
       
      Таск для спрайтов
      gulp.task('symbols', function () {
          return gulp.src("source/img/icons/*.svg")
              .pipe(svgmin())
              .pipe(cheerio({
                  run: function ($) {
                      $('[fill]').removeAttr('fill');
                      $('[stroke]').removeAttr('stroke');
                      $('[style]').removeAttr('style');
                  },
                  parserOptions: {xmlMode: true}
              }))
              .pipe(replace('>', '>'))
              .pipe(svgstore({
                  inlineSvg: true
              }))
              .pipe(rename("symbols.pug"))
              .pipe(gulp.dest("templates/blocks/"));
      });
       
      Скрин того, что видит chrome и firefox (слева), и ie11 (справа). Повторюсь, что не все иконки не отображаются

       
      Пробовал подключать svgxuse и svg4everybody, но толку нет.
       
      Какую еще предоставить инфу?
      PS: Я все еще новичок.
    • Автор: Schamil74
      Всем привет!
      Столкнулся проблемой отображения svg спрайтов в ie11.
      Есть два варианта:
      В 1ом варианте svg экспортировал через плагин generate в photoshop 2015. Hаботает во всех браузерах, но не реагирует на css, даже если почистить все атрибуты у svg.
      Во 2ом сложнее сохранял как .ai и конвертировал в svg. Не работает только в ie11 (версии ниже не проверял), но реагирует на css, причем не отображаются только некоторые иконки.
       
      Спрайт прикрепляю сразу после открывающего тэга body и скрываю его. Обращаюсь к спрайту через, например: 
      svg.contacts__flag(width="60", height="90")
      use(xlink:href="#flag")
    • Автор: nerv
      Мы – студия «Элемент». Ищем верстальщика для постоянного сотрудничества, который не боится, умеет и любит верстать проекты сложнее среднего. Работа проектная, но проекты идут часто (каждый месяц 1-2, иногда даже 3 проекта).
      Кратко о нас:
      Располагаемся в Рязани. Работаем с 2008 года. У нас в команде 10 человек. Предпочитаем технологически сложные проекты.
      Обязательно:
      - знание HTML5 / CSS3 с учетом кросс-браузерности;
      - умение подбирать сторонние компоненты и стилизовать их (календари, слайдеры и т.п.);
      - умение работать с адаптивными стилями;
      - менеджер пакетов bower или jspm;
      - знание основ CSS-анимации;
      - знание основ SVG;
      - понимание основ работы git;
      - желание развиваться;
      - быть на связи, чтобы не приходилось разыскивать;
      - здравый перфекционизм в работе в части соответствия верстки макету и в части качества кода;
      - умение принимать решения в мелочах (чтобы часто не дергать менеджеров и/или дизайнеров)
      Приветствуется:
      - умение работать в комнде;
      - компонетный подход к разработке (например, БЭМ);
      - знание основ JS в объеме, который помогает верстке;
      - навыки работы с GitHub и/или GitLab
      - понимание принципов семантического версионирования
      - навыки работы с Bootstrap;
      - навыки работы с FlexBox;
      - навыки работы с Grid Layout;
      - навыки работы с WebStorm;
      - пост-обработчики: PostCSS, LESS, SASS;
      - возможность работы в часовом поясе, близком к Москве;
      - умение сверстать новый / подверстать готовый код, когда он уже включен в шаблонизатор движка (smarty). Там никаких Америк нет, просто требуется аккуратность;
      - наличие ИП.
      Что нам важно видеть в отзыве на наше предложение:
      - примеры 3-4 свежих работ онлайн (посмотрим, какие используются методики);
      - опыт верстки в годах;
      - краткое описание умений по списку наших требований (буквально по одной строке на пункт);
      - ожидаемая ставка часа в рублях;
      - метод перечисления оплаты;
      - в каких сферах вы бы хотели развиваться в ближайшие 1-2 года.
      Если написать отзыв в таком виде, то мы сэкономим друг другу время. А это приветствуется.



      Вопросы/ответы можно писать сюда или мне в личку.
       
      От себя замечу, что целевые браузеры это: последние версии Chrome(ium), FireFox, Safari, IE11/Edge.
      Целевые платформы: десктоп + мобильные устройства.
      Не pixel pirfect, но и чтобы выглядело достойно =)
      Если вы не знакомы с парой пунктов из обязательно списка, но у вас присутствуют адекватность и здравый смысл, то мы можем пообщаться и выяснить детали)
      Мы понимаем, что "знать все" не возможно. Вместе с тем, мы постарались перечислить то, с чем вам, вероятно, придется иметь дело.

      На js-фронтэнде у нас Angular 1.x, Vue, jQuery.
      Для сборки применяется Webpack.
      Для запуска задач Gulp.

      Взаимодействовать придется в том числе со мной , будет шанс научится чему-либо из js, если не знаете, но хотите развиваться в этом направлении.
      В недалекой перспективе на бекэнде Node.js. Если хотите развиваться в эту сторону, такая возможность тоже имеется.
      Вы можете писать код в чем угодно (IDE, редакторы), но ваши инструменты должны уметь деплоить на удаленный сервер (требуется для ряда проектов).