Ответы пользователя по тегу SVG
  • Как масштабировать inline svg?

    @teslor
    Высота по умолчанию вылезает, т.к. у вас не задана явно ни высота, ни viewBox.
    Для большинства браузеров можно указать, например, <svg viewBox="0 0 1 1" class="box-icon">
    В этом случае высота будет определяться автоматически и иконка будет вписываться в размеры в зависимости от ширины.
    Но в IE высота по-прежнему будет 150px, там нужно явно задать высоту, или использовать хаки/другие способы.
    Есть неплохая статья про адаптивный SVG (на английском).
    Ответ написан
    Комментировать
  • Выделение сложных фигур на странице?

    @teslor
    Если не нужна поддержка древних браузеров, то лучший способ - векторизировать фигуру и разместить в SVG-элементе, на который уже можно навесить любые обработчики.
    Ответ написан
    Комментировать
  • Чем/как лучше анимировать svg?

    @teslor
    В идеале лучше использовать JS.
    CSS-анимации могут глючить (особенно в IE), но в принципе для элементов интерфейса вполне можно использовать, только проверьте, что в нужных браузерах работает как надо.
    SMIL-анимация не поддерживается IE и не будет, ее сейчас вообще нет смысла использовать. От Microsoft кстати есть неплохое руководство про SVG-анимацию.
    Ответ написан
    Комментировать
  • Почему когда svg уменьшаешь она блюрится?

    @teslor
    При изменении размеров изображения может стать невозможно разместить его пиксель в пиксель. Браузер использует для таких случаев антиалиасинг, что проявляется в размытии границ. Можно попробовать задать для SVG свойство shape-rendering: crispEdges, которое выключает антиалиасинг. Или перерисовать иконку чтобы она нормально выглядела хотя бы при каких-то стандартных размерах.
    Ответ написан
    3 комментария
  • Как лучше сделать интерактивную визуализацию обьекта на сайте?

    @teslor
    Для SVG (IE8+) можете посмотреть еще эти библиотеки: snap.js, svg.js.
    Ответ написан
    Комментировать