Как правильно вставлять SVG - HTML Шорты

- Статьи Сары Суайдан - sarasoueidan.com/tags/svg/
- Курс «Оформление SVG-фигур» -htmlacademy.ru/courses/187
- Курс «Знакомство с SVG» - htmlacademy.ru/courses/130
- SVG vs PNG - svgvspng.com/#ru
Все шорты - htmlacademy.ru/shorts

[@HTMLAcademyTV]

По промокоду «YouMeow» скидка 900 рублей на интенсив или программу профессии в Академии - tml.io/mbf87

[@polosatus]

Лайк за "спросите у родителей" и футболку. С материалом тоже всё чётко.

[@mexvision-3556]

Ахаха, класс! Шутка топ)

[@user-dx4cp2gv4z]

Ну и как всегда, Вадим на высоте) безумно нравится ваша подача, открыла для себя, что SVG не так прост)) "нужно больше шортиков":) Спасибо)

[@teneoultrius6340]

Спасибо за отличный гайд. Коротко по сути, без воды..

[@pavelbezdenezhnykh6793]

Вот это подача! Загуглил, открыл сайт, посмотрел, открыл Ютуб поставил +++ и подписался!

[@r4idne88hgr01]

Ребят, у вас лучшие интерактивные курсы и самые информативный канал. Вадиму Макееву отдельный респект. С удовольствием и обязательно пойду на интесивы. продолжайте в том же духе, спасибо!)))

[@leracooper4251]

Посмотрела все уроки! Хочу еще! Спасибо, Вадим! :)

[@user-sv7cf6ll2i]

Спасибо Вадим! Уважаю людей, которые ценят своих подписчиков и их время. Не то, что лофт-блоги всякие

[@user-sz2ro4oe8g]

Спасибо большое помогли))) от души братуха душевно в душу)))

[@user-bz6lb8kl8n]

Очень полезно и интересно! Большое спасибо!

[@baomao2938]

спасибо за шорты. качественно, лаконично и информативно, в отличие от большинства подобного контента. хотелось бы увидеть выпуски об анимации на css, основные приемы, ошибки, бэстпрактис.

[@HTMLAcademyTV]

Спасибо, постараемся

[@justspartak]

Вах, как классно! Спасибо!

[@user-qu1zi6ug8r]

Обожаю Вадима) как разработчика!

[@sergeyfedotov1989]

Суперпонятно! Наконец-то прояснилось.

[@TheZeyura]

лаконично! спасибо)

[@spacioclub]

все четко и по делу! Молодцы. Минус вижу только один, вставляйте всегда 5 копеек про кросбраузерность

[@GreekkAlex]

ведущий - просто душка, лайк ему!

[@vladimirkrylov4947]

Спасибо, Вадим. расскажи пожалуйста о гридах(grid) и, если не трудно сравни флексбоксами.

[@HTMLAcademyTV]

Спасибо за вопрос

[@user-qg5fi2eq6k]

Спасибо за ответ =)

[@alexwiliam4002]

ОЧЕНЬ ПОМОГ

[@user-hs3vn2pl8f]

Хорошо, но редко. Давайте новые ролики от Вадима Макеева каждый день!)

[@HTMLAcademyTV]

Вадим пока не так хорошо масштабируется, как SVG 😄

[@BETEPAHK]

Статьи Сары Суайдан - Page Not found Про svg-спрайты хорошо бы осветить еще. А то в подкастах много раз упоминали, что для иконок давно надо переходить от шрифтов к svg, но как-то это пока криво сделано. Чтоб раскрашивать иконку нужным цветом в шрифтах достаточно задать color в css, а в svg приходится вставлять внутренности svg в код страницы (из-за "за стеклом").

[@AlexP-qm7ew]

www.sarasoueidan.com/workshops/svg-coffee-cup/ тут есть

[@aranofskid]

Интересный канал . Вопрос - разница между bower,npm,yarn

[@ksht268]

кратко, информативно, без лишней воды. С удовольствием посмотрел бы видеокурс по html, css и в целом по верстке в вашем исполнении. Нет ничего подобного ?

[@prodoter97]

Интенсива более чем хватает :)

[@HTMLAcademyTV]

Вадим ведёт лекции на интенсиве «Базовый HTML и CSS», вместе с другими преподавателями курса - htmlacademy.ru/intensive/htmlcss, также вы можете поискать видео с его выступлений на конференциях.

[@sashasushko]

Вадим, расскажите, пожалуйста, про несколько header/footer на странице.

[@HTMLAcademyTV]

Спасибо за вопрос

[@inferno0350]

Круто !

[@meeba-dev]

Статья Сары не доступна. Нашел крутые иконки и не пойму, какой способ вставки выбрать. Если как в лекциях на интенсиве, то много мусора в коде. Склоняюсь добавить их с помощью . Был бы рад услышать мнение профессионалов.

[@KimVitaliy37]

_Понятно . Спасибо ..._

[@user-888azim-97]

Привет, мне с сервера приходит ссылка uri \\ -- это svg со своими ивентами и скриптами. подскажите пожалуйста, почему на тег embed не действует онклик ?

[@giddle]

Здравствуйте!, почему если использовать

[@azinho7318]

алалалалалал

[@Hanigun]

может заодно подскажете где я не так делаю и что. пытаюсь заменить логотип на .SVG при помощи data:image/svg+xml;base64, . Генерирую код в онлайн генераторе и вставляю после последней запятой. вставляю в код

[@AndrewMarsin]

Через (include php) можно страницу с svg файлом вставить.

[@AnastasiiaSagittarius]

Здравствуйте, можете помочь, я создаю картинки в корэле и когда экспортирую в SVG, то они сохраняются как свг формат, но имеет путь html, вот как мне их экспортировать, чтобы это был обычный свг, который открывается в соответствующих программах без браузера, помогите, пожалуйста

[@alextopsite]

А если вставить с помощь img и не задать размер, картинка не расползется на всю ширину?

[@alexeylivadniy6707]

А есть какие-то особенности применения svg при верстке электронных писем? И было бы оччень интересно послушать в общем об особенностях и best practises верстки электронных писем. Заранее спасибо :)

[@HTMLAcademyTV]

Спасибо за вопрос!

[@user-jl8ie5uq1x]

Как получить доступ javascript в внешний svg через () ?????

[@antonkarpov109]

SVG и Canvas - Что учить?

[@GriNAME]

Такой вопрос, а есть "обходной" способ добавлять ховер эффекты для свг графики вставленной через тег img или фоном? Скажем иконки соцсетей при ховере чтобы меняли свой цвет с плавностью.

[@HTMLAcademyTV]

Спасибо за вопрос

[@no4e]

А в чём разница между embed object?

[@kids-man]

пора уже телеканал открывать и целыми днями транслировать всё из мира IT, ну или разбивку сделать - по одним дням фронтэнд, по другим бэкэнд, по третьим конкретный язык или технология, потом новости, думаю канал будет популярен)

[@user-gd6il5zb8l]

>думаю канал будет популярен Не то слово)

[@CostaZaika-iq5gr]

Не знал про object опцию. Спасибо!

[@AngryBread-sz6yi]

Все это хорошо, но при извлечении SVG иконки, в редакторе сплошной набор букв, и никак нельзя как то взаимодействовать через стили... Как быть?

[@wmsnagel]

а можно ли вставить как object, img, frame и также менять цвет при наведении? Или же только если все содержимое SVG вставлять в html ?

[@jerrymatis8807]

Можно попробовать через псевдокласс hover

[@irinaugrak9154]

Статьи Сары Суайдан - Page Not found

[@user-mn4de2uf9l]

Расскажите про свойство display: run-in. Пишут что, есть такое, но рабочее оно или уже нет?

[@HTMLAcademyTV]

Спасибо за вопрос!

[@myspace4845]

Что такое After и before?

[@antonfrolov6604]

А я подумал про вставку из JS и про то как надо через createElementNS создавать DOM SVG.

[@DanilKef1r]

Как можно обойти у select отсутствие фона у элементов которые раскрываются? спасибо за ответ)

[@HTMLAcademyTV]

Попробуем рассказать в одном из выпусков

[@TheRichNuke]

А рассказать о use?

[@HTMLAcademyTV]

Можете немного уточнить свой вопрос?

[@TheRichNuke]

Имел ввиду добавление SVG используя

[@gorobzov]

Футболка правка крутая =)

[@nnnabbot]

Доброго времени суток. Подскажите пожалуйста кто нибудь верный способ заставить SVG логотипу подчиниться z-index - у. Спасибо

[@HTMLAcademyTV]

Добрый день! Уточните, пожалуйста, что именно вы имеете ввиду? Фигуры внутри одного SVG нужно контролировать не с помощью z-index, а посредством порядка отрисовки (порядок в коде).

[@astranik]

Что с поддержкой flexbox, и можно ли полностью перейти на него в реальных проектах?

[@user-qh5dw1lq7w]

Николай Астраханцев caniuse.com/#feat=flexbox

[@user-bg1gd4fe1b]

Ещё в IE10 криво работает flex-basis в %

[@HTMLAcademyTV]

Спасибо за вопрос

[@user-vf1zo4kn1s]

Можно, проверено на не одном проекте.

[@kids-man]

Николай Астраханцев давно пора)

[@meeba-dev]

SVG is good for logos only or something else? Please, tell more about flex. Very interesting thing. By the way, T-shirt is really cool, I want to buy one)).

[@HTMLAcademyTV]

👍

[@meeba-dev]

HTML Academy рад, что хоть где то не игнорят, если пишешь на английском. Так все таки только только для логотипов и других сложных изображений, которые сделали вручную, а не сфотографировали?

[@HTMLAcademyTV]

SVG подходит всех для изображений, которые нужно масштабировать без потерь в качестве - kzbin.info/www/bejne/e6anopushdKEgas видео по теме, под ним в описании есть ссылки на материалы, например про форматы и их применение - htmlacademy.ru/blog/113-image-formats

[@meeba-dev]

Отличный блог, все понял. Благодарю))).

[@user-ek1dm2on1v]

сделал мой день... Спросите у родителей)))

[@Hazratgs6]

О круто, Вадим теперь в HTML Academy?

[@HTMLAcademyTV]

Всё так - htmlacademy.ru/blog/159-vadim-makeev

[@MainLoner]

А как же Sarah Drasner? Она и книги пишет про svg, издает O'Reilly.

[@user-yc1gx3fl4l]

Вадим Макеев Красава!!!

[@rva3674]

я все это читал на сайте минут 10 назад

[@TkachenkoAlexander]

Все таки уже "Шоу" ))

[@Gurylyov]

А почему "всегда начинайте с самых простых"? В чём причина? Про svg use так и не сказано(

[@pepelsbey]

Начинать с самых простых нужно потому, что они самые удобные и эффективные. Фон для псевдоэлемента проще, чем целая иконка прямо в HTML или сложная система спрайтов. И если ей не нужно менять заливку при наведении - зачем наворачивать? А если нужно (то есть не хватает) - тогда другой вопрос. Про юзы и символы, как обещал, ещё поговорим.

[@andyorlov4023]

Здравствуйте, было бы интересно послушать про CSS Custom Properties, для чего они, как работают и как правильно их применять. За шоу большое спасибо, рассказываете лаконично и понятно (:

[@HTMLAcademyTV]

Спасибо за вопрос!

[@olegstogov1589]

Дааааа... пожалуй... чем больше углубляешься в предмет, тем больше понимаешь что ничего не знаешь...

[@evstafyevandrew2198]

А как же «embed»?! Это вроде бы фрейм нового поколения, который работает во всех современных браузерах

[@peryaful]

FRONT-END DEVELOPER / AUTHOR / SPEAKER Oops! This is clearly not the page you’re looking for.

[@TauLepton-od3zz]

Майк Вазовский :)

[@FatNinjaKings]

Putting video speed on 0.75 to follow xD

[@user-zb8yl5ms1f]

Через css как контент не все браузеры читают

[@aprinciple9559]

Большой вопрос у меня к Вадиму или к тому, кто знает, особенно про семантику разметки иконок в документе. Посмотрел видео, всё круто, всё просто, но на практике, ты собираешь в спрайт, чтобы использовать через use, тебе нужно прописывать обязательно width и auto для svg, чтобы картинка не отображалась/увеличивалась на весь экран. Но когда ты идёшь в CSS, чтобы стилизовать, то размер не изменишь из CSS. Задача: для мобильной версии изменить размер иконки с 70px до 30px. Она будет обрезаться, и не будет увеличиваться. Проблема решается через viewBox, не задавая при этом width and height SVG элементу в html, когда инлайнишь из спрайта через use. Тогда размеры в CSS контролируются. Ок, у меня два вопроса, даже три: Первый: говорят нужно задавать width и height svg, как на самом деле быть, если учитывать проблему, которую я описал выше? Контролировать ширину и высоту через CSS можно? Или как в такой ситуации делать? Второй: правильно ли, исходя из семантики, иконки вставлять/прописывать в HTML, а не через фон в CSS (они за стеклом - никак не поуправлять ими). Инлайн svg вне спрайта (use) - не кешируется, правильно ли собирать svg изображения (лого, что-то там ещё) и иконки в спрайт, инлайнить всё через use, задавать viewBox (чтобы управлять размером), через CSS задавать размеры и менять им цвет. Третий: как это, вообще спрайт, отображать правильно в структуре файлов по БЭМ, каждому блоку своя разметка, стиль, скрипт, “картинка”. Если “картинка” для определённого блока, элемента лежит в спрайте (в отдельном - в общем документе), как правильно делать? Или каждому блоку - нужно отдельно иконку/картинку SVG (без спрайтов), но тогда не будет кэшироваться.

[@aprinciple9559]

@Norton Studio ок, каким образом мне использовать картинку-иконку, которая должна меняться через css? Я могу инлайново ставить svg в HTML, менять через css, но так svg не кэшируется, кэшируется, когда используешь спрайт, а в html вставляешь svg через use

[@juliahtml]

Ещё тут есть немножко статей css.yoksel.ru/tags/#svg : )

[@HTMLAcademyTV]

😇

[@HTMLAcademyTV]

Спасибо за вопрос, рассмотрим в будущих выпусках.

[@evstafyevandrew2198]

Ссылка внизу на стат'и Сары ведёт на 404

[@antonbeloborodov5130]

sarasoueidan.com/tags/svg/ Ошибка 404

[@HTMLAcademyTV]

Сара переделывает сейчас свой сайт, к сожалению, поэтому доступа нет.

[@AlexSanPGR]

SVG это кртуо.

[@perejro9916]

Подредактируйте ссылочку Сары Суайдан => 404

[@gunlinux]

Так а какие браузеры ну умеют в svg? Мама не рубит

[@jenyaspace]

почему шорты а не например не майка?

[@Arctikus]

Почему Space, а не космос?

[@HTMLAcademyTV]

Short - с английского «короткий», «майка» - T-Shirt‎

[@romarockart]

Я понял что я стар когда он сказал спросить у родителей про вставку swf в html :)

[@Hanigun]

Манера речи напоминает путина, аж не посебе стало в момент просмотра ахахах во прикол :) лайк

[@vesh95]

я: как через object вставить флеш ролик? мама: че? ты меня обманул

[@alexkogotko3981]

lfey

[@nikbelikov]

Все отлично. Но музыка почему-то не нравится. Как будто в торговом центре зомбимузыка.

[@HTMLAcademyTV]

😞