Задать вопрос
AlexGreat92
@AlexGreat92
Маркетолог, SEO,
верстка

Вопрос об SVG графике в вебе?

Вообще я ноль в Svg, Верстал несколько сайтов, но там только png, jpeg. Работал только с Avocode. Когда увидел SVG-формат, попутал аж. Что это вообще?
Расскажите, или дайте ссылки на доступный и свежий материал по теме. В чем плюс такого формата, когда его применять лучше, как правильно вставлять на сайт. Где брать его? Из авокод же например не вырежешь код svg ? что за сайт www.w3.org который всегда автомаом прописывется в коде картинки? Можно ли svg картину вставить просто как png_картинку без кода ? Еще мы можем какие-то простые картинки писать прямо инлайновыми стилями в html Внутри редактора? Как например вот здесь - 
<svg class="hamburger" width="25" height="12" viewBox="0 0 25 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <line y1="1" x2="25" y2="1" stroke="black" stroke-width="2"/>
                        <line y1="11" x2="25" y2="11" stroke="black" stroke-width="2"/>
                        <line y1="6" x2="25" y2="6" stroke="black" stroke-width="2"/></svg>

В итоге имеем вот такую кнопку-гамбургер-
Рисунок
5caf3af224be4630268060.jpeg

Отвал башки.
Посмотрел несколько видео - ничего не понял, информации толком нет.
  • Вопрос задан
  • 160 просмотров
Комментировать
Подписаться 2 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 4
lamer350
@lamer350
กำลังสูงสุด
Информации вагон и маленькая тележка.
Так как у вас знаний 0 - начните все изучать постепенно. Что такое SVG для начала.
Нельзя просто выстрелить статьей в вас чтобы вы все поняли.
Ответ написан
Комментировать
Комментировать
@IlyaAbramov
С помощью SVG можно делать довольно крутые вещи, он мало "весит" и его можно "писать" в любом текстовом редакторе. На w3schools.com есть отличный гайд по SVG, бесплатный.
На русском есть здесь, тоже бесплатно.
Ответ написан
Комментировать
Комментировать
warsand
@warsand
Экспериментатор
Учебник SVG
Позвольте представить: SVG
SVG – Scalable Vector Graphics
SVG в вебе, практическое руководство
SVG элементы:
Синтаксис SVG
- Ну вот; на "пока", полагаю, вполне достаточно... )))
Ещё есть js-библии к svg и canvas:
Fabric.js - мощная и простая Javascript HTML5 библиотека холста Fabric предоставляет интерактивную объектную модель поверх элемента canvas.
В Fabric также есть синтаксический анализатор SVG-to-canvas (и canvas-to-SVG)
Data-Driven Documents или D3.js
Галерея d3-элементов
Некоторые из них успел перевести на свой язык, как и онлайн-редактор кривых Безье...
А вот как смотрятся чудеса canvas и svg в "одном флаконе"
Ответ написан
Комментировать
Комментировать
@lagudal
Для новичка мне кажется это несколько сложный подход будет.
Если вы вообще знакомы с векторной графикой, то будет проще начать таким образом.
1.Откройте векторный редактор и нарисуйте нужную вам картинку - иконку, ну или любую пока простейшую картинку, какую хотите.
2.Сохраните файл как svg.
3. Откройте данный svg в любимом редакторе кода, например notepad++
4. Посмотрите что находится между тегами и .
5. Можете попробовать также следующее.
а) Залейте этот svg файл на сервер себе, пропишите как обычную картинку - <img src = "path_to_file/file.svg" >
б) Убедившись, что картинка отображается как обычная, удалите ее и ее вызов.
в) В коде, где вы эту картинку вызывали, пропишите вместо <img src = "path_to_file/file.svg" >
<svg> ---тут важ код svg--</svg>
Почувствуйте разницу )))
Думаю, вы сможете понемногу понять, что там все совсем не так сложно, во всяком случае башка на месте останется ))
Пс. Ресурсы вам посоветовали отличные, изучайте )
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend Vue & Capacitor Developer Middle++
Parasol Software
от 2 000 до 2 500 $
Frontend программист-разработчик
Максавит • Нижний Новгород
До 200 000 ₽
PHP-программист (SEO-правки)
Demis Group
от 50 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Натянуть верстку Опенкарт
24 апр. 2024, в 15:34
20000 руб./за проект
SEO с опытом в контентных проектах (СМИ)
24 апр. 2024, в 15:32
130000 руб./за проект
Видеомонтаж трэвел-влогов на Youtube на постоянной основе
23 апр. 2024, в 11:13
10000 руб./за проект
Ещё заказы