2. SIMAI Framework - Универсальная веб-платформа для создания интерфейса информационных систем
  3. UI
  4. Контент

SVG

SIMAI Framework включает в себя модификаторы помогающие изменить внешний вид SVG фигур

Размещение в тексте

Для размещения SVG фигуры в виде иконки в тексте используйте класс .svg-icon.

Размер

С помощью модификаторов .svg вы можете указать размер иконки. Использование модификатора: .svg{контрольная точка}-{размер}

  • Контрольная точка. Необязательный параметр. Изменяет размер шрифта только для определенного диапазона, в соответствии с контрольными точками (-sm, -md, -lg, -xl).
  • Размер. Обязательный параметр. Указывает размер шрифта. Принимает значение от -3 до 7:
    • -3 – 0.65 х базовый размер шрифта
    • -2 – 0.75 х базовый размер шрифта
    • -1 – 0.85 х базовый размер шрифта
    • 0 – 1 х базовый размер шрифта
    • 1 – 1.25 х базовый размер шрифта
    • 2 – 1.5 х базовый размер шрифта
    • 3 – 2 х базовый размер шрифта
    • 4 – 2.5 х базовый размер шрифта
    • 5 – 3 х базовый размер шрифта
    • 6 – 4 х базовый размер шрифта
    • 7 – 6 х базовый размер шрифта
<svg class="s-0 f-red svg--2"><circle cx="50%" cy="50%" r="50%"></svg>
<svg class="s-0 f-pink svg--1"><circle cx="50%" cy="50%" r="50%"></svg>
<svg class="s-0 f-purple svg-0"><circle cx="50%" cy="50%" r="50%"></svg>
<svg class="s-0 f-indigo svg-1"><circle cx="50%" cy="50%" r="50%"></svg>
<svg class="s-0 f-blue svg-2"><circle cx="50%" cy="50%" r="50%"></svg>
<svg class="s-0 f-cyan svg-3"><circle cx="50%" cy="50%" r="50%"></svg>
<svg class="s-0 f-teal svg-4"><circle cx="50%" cy="50%" r="50%"></svg>
<svg class="s-0 f-green svg-5"><circle cx="50%" cy="50%" r="50%"></svg>
<svg class="s-0 f-amber svg-6"><circle cx="50%" cy="50%" r="50%"></svg>
<svg class="s-0 f-orange svg-7"><circle cx="50%" cy="50%" r="50%"></svg>

Толщина обводки

Адаптивный модификатор .s задает параметры обводки SVG элемента.

Использование модификатора: .s-{контрольная точка}-{толщина}

  • Контрольная точка. Необязательный параметр. Отображает границу только для определенного диапазона, в соответствии с контрольными точками (-sm, -md, -lg, -xl).
  • Толщина. Обязательный параметр. Указывает толщину обводки. Принимает значение от 0 до 10 (px). Значение 0 – для отсутствия обводки.

Возможно сочетания различных обводок для разных разрешений экрана:

  • .s-1 – обводка в 1px
  • .s-1 .s-sm-2 .s-md-3 – обводка в 1px по умолчанию. На небольших устройствах толщина обводки 2px, на больших – 3px
<svg class="s-1 s-red f-none wr-4 hr-4"><circle cx="50%" cy="50%" r="40%"></svg>
<svg class="s-2 s-red f-none wr-4 hr-4"><circle cx="50%" cy="50%" r="40%"></svg>
<svg class="s-3 s-red f-none wr-4 hr-4"><circle cx="50%" cy="50%" r="40%"></svg>
<svg class="s-4 s-red f-none wr-4 hr-4"><circle cx="50%" cy="50%" r="40%"></svg>
<svg class="s-5 s-red f-none wr-4 hr-4"><circle cx="50%" cy="50%" r="40%"></svg>

Цвет обводки

Для изменения цвета обводки воспользуйтесь модификатором .s-{цвет}. Цвет может принимать значение именнованного цвета Bootstrap или цвета Material Design. Подробнее об использовании цвета вы можете ознакомиться в разделе Цвет.

<svg class="s-5 s-primary f-none wr-4 hr-4"><circle cx="50%" cy="50%" r="40%"></svg>
<svg class="s-5 s-secondary f-none wr-4 hr-4"><circle cx="50%" cy="50%" r="40%"></svg>
<svg class="s-5 s-pink f-none wr-4 hr-4"><circle cx="50%" cy="50%" r="40%"></svg>
<svg class="s-5 s-black-400 f-none wr-4 hr-4"><circle cx="50%" cy="50%" r="40%"></svg>
<svg class="s-5 s-blue-grey-800 f-none wr-4 hr-4"><circle cx="50%" cy="50%" r="40%"></svg>

Цвет заливки

Для изменения цвета заливки воспользуйтесь модификатором .f-{цвет}. Цвет может принимать значение именнованного цвета Bootstrap или цвета Material Design. Подробнее об использовании цвета вы можете ознакомиться в разделе Цвет.

Для того чтобы убрать заливку SVG фигуры воспользуйтесь модификатором .f-none
<svg class="s-5 f-primary wr-4 hr-4"><circle cx="50%" cy="50%" r="40%"></svg>
<svg class="s-5 f-secondary wr-4 hr-4"><circle cx="50%" cy="50%" r="40%"></svg>
<svg class="s-5 f-pink wr-4 hr-4"><circle cx="50%" cy="50%" r="40%"></svg>
<svg class="s-5 f-black-400 wr-4 hr-4"><circle cx="50%" cy="50%" r="40%"></svg>
<svg class="s-5 f-blue-grey-800 wr-4 hr-4"><circle cx="50%" cy="50%" r="40%"></svg>

Тип заливки

С помощью модификаторов .f-nonzero и .f-evenodd вы можете указать метод заливки SVG фигуры.

<svg class="wr-5 hr-5 f-nonzero s-red s-5 f-yellow"><path d="M 100,20 L 50,180 180,80 20,80 150,180 z"></path></svg>
<svg class="wr-5 hr-5 f-evenodd s-red s-5 f-yellow"><path d="M 100,20 L 50,180 180,80 20,80 150,180 z"></path></svg>

Вид соединения линий на углах

С помощью модификаторов .s-miter, .s-round и .s-bevel вы можете указать метод соединения линий на углах:

  • .s-miter – углы без обработки (значение по умолчанию).
  • .s-round – углы закругленные.
  • .s-bevel – углы срезанные.
<svg class="wr-5 hr-5 s-red s-10 f-yellow s-miter"><path d="M 100,20 L 50,180 180,80 20,80 150,180 z"></path></svg>
<svg class="wr-5 hr-5 s-red s-10 f-yellow s-round"><path d="M 100,20 L 50,180 180,80 20,80 150,180 z"></path></svg>
<svg class="wr-5 hr-5 s-red s-10 f-yellow s-bevel"><path d="M 100,20 L 50,180 180,80 20,80 150,180 z"></path></svg>

Вид оконцовок линий

С помощью модификаторов .s-miter, .s-round и .s-bevel вы можете указать метод соединения линий на углах:

  • .s-butt – конец линиии обрезается на точке завершения линии (значение по умолчанию).
  • .s-round – конец линии закруглен полукругом диаметром толщины линии.
  • .s-square – конец линии продолжен полуквадратом размером с толщину линии.
<svg class="wr-5 hr-5 s-red s-10 f-yellow s-butt"><path d="M 150,200 L 50,110 150,20"></path></svg>
<svg class="wr-5 hr-5 s-red s-10 f-yellow s-round"><path d="M 150,200 L 50,110 150,20"></path></svg>
<svg class="wr-5 hr-5 s-red s-10 f-yellow s-square"><path d="M 150,200 L 50,110 150,20"></path></svg>