14: Система значков SVG - Повышение защиты - CSS-хитрости

Anonim

Этот элемент цепляется за всю идею встроенной системы значков SVG. Мы узнали, что чистый способ сделать это - поместить все, что вы собираетесь нарисовать позже, в блок, чтобы он не отображался, и мы могли ссылаться на них позже (скажите браузеру, чтобы он нарисовал этот значок).

В этом видео мы собираемся потратить некоторое время на создание собственного блока вручную. Это не особенно сложно, и, я думаю, понятно, как все это работает.

Мы собираемся сделать это из SVG, который мы находим в разных местах сети. Мы берем одну из The Noun Project, одну из IcoMoon и одну из Shutterstock. Мы уделяем должное внимание открытию SVG, исправлению любых странных форм, уменьшению размера холста и многому другому. Здесь нет предела тому, откуда может поступать эта векторная информация. Эти три источника просто показывают, что SVG может исходить из любого вектора.

Надеемся, что позже мы упростим этот процесс, но понимание основных принципов его работы всегда полезно. Никогда не знаешь, когда нужно будет копать глубже (например, чтобы выяснить, почему что-то не работает).