Ankhena

По скорости работы, быстрее будет canvas, но он по скорости разработки будет хуже. У меня никаких тормозов на vue+svg нет, по крайней мере, до 500 объектов на холсте. Для оптимизации могу посоветовать некоторые вещи:
1) Используйте path вместо нескольких разных других фигур.
2) Для сетки не создавайте кучу линий или фигур, просто используйте pattern. Вот пример из моего проекта (он на React JSX, но не суть)

<pattern id={"bg-" + this.props.id} patternUnits="userSpaceOnUse" width="100" height="100">
    <rect width="100" height="100" fill={this.props.canvasColor}></rect>
    <g fill={this.props.canvasGridColor} style={{ fillOpacity: 0.34 }}>
        <rect width="100" height="1" y="20"></rect>
        <rect width="100" height="1" y="40"></rect>
        <rect width="100" height="1" y="60"></rect>
        <rect width="100" height="1" y="80"></rect>
        <rect width="1" height="100" x="20"></rect>
        <rect width="1" height="100" x="40"></rect>
        <rect width="1" height="100" x="60"></rect>
        <rect width="1" height="100" x="80"></rect>
    </g>
    <rect width="100" height="100" fill="none" strokeWidth="2" stroke={this.props.canvasGridColor}></rect>
</pattern>

вот так заливаю на холст

<rect style={{ 'fill': `url(#bg-${this.props.id}) #fff` }} ... />

3) Задавайте для изменяемых объектов атрибут уникальный атрибут key
4) Цельные объекты кидайте в группу, и на нее назначайте общие стили и позицию.
UPD: простой пример на 1000 объектов (можно добавить, поменяв константу COUNT_OBJECTS) с drag&drop
jsfiddle.net/Vlad_IT/81kegmxf
UPD2: вот тот же пример, только с сеткой jsfiddle.net/Vlad_IT/qt64rouL/1 если делать сетку не заливкой, а элементами, будут ощутимые тормоза.

Попробуйте

input[type="submit"] {
  white-space: normal;
}

transform-box: fill-box;

Вам нужно выводить перед чертой currentSlide

let currentSlide = $('.slider')).slick('slickCurrentSlide') + 1;

А после черты slideCount
$(".slider").slick("getSlick").slideCount

Делать нумерацию псевдоэлементами с использованием css counters https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...
пример https://codepen.io/anon/pen/pqWQOP

Какие-нибудь эффекты планируются на элементе?

Можно так

.link {
  width: 150px;
  height: 40px;
  background: #ccc;
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.link:before {
  top: -5px;
  left: -5px;
  z-index: -1;
  content: '';
  width: 25px;
  height: 25px;
  display: block;
  background: orange;
  position: absolute;
}

К элементам с transform применяется субпиксельное сглаживание из-за чего может возникать размытие.
Проще иконку и ромб вынести на разные уровни, чтобы трансформации применялись только к ромбу.

Год назад, было рановато. Как дела обстоят сейчас?

Зависит от аудитории.
И год назад где-то было уже вполне можно.
И через пять лет где-то будет еще нельзя.
Если у вас уже живой проект - поглядите там чего показывает Аналитика/Метрика по браузерам

88% caniuse

88% от чего?
От версий браузеров или от количества пользователей на разных версиях браузеров - это далеко не одно и то же.
Мы посмотрели по реальной посещаемости - эти 12% в количественном выражении для одного нашего проекта получились 0,02% от общего числа посетителей. Решили, что можно.
А для другого - 3%. На этом проекте решили погодить еще.

P.S.:
Нет смысла мучиться, если вам нужно и с Grid CSS и без Grid CSS получить идентичный результат. И никогда не будет.

Однако, если допустима деградация задуманного дизайна и при этом вы сможете сохранить его функционал - то почему бы и нет. Хоть прямо сейчас.

https://codepen.io/topicstarter/pen/odjrpa 46 раз показываю