Обрезка svg-изображения

#html #css #svg

Имеется svg-изображение, в котором от границы общего изображения до собственно начала
картинки имеется белый фон, который окружает изображение со всех сторон и создает отступы,
что мешает при верстке.



Как можно обрезать svg до нужного размера? какой кусок кода отвечает за подложку
изображения?

иллюстратора нет, обрезка руками не подойдет, есть только код.










Решение найдено - правка координат в атрибуте viewBox
    

Ответы

Ответ 1

В исходном изображении в первую очередь нас смущает отступ снизу и сверху, которые
суммируются с реальным размером изображения и искажают высоту. Ширина изображения равна
100% и зависит только от контейнера.

Следовательно, нужно отрегулировать положение картинки по высоте, ширина растянется сама.

У  элемента имеется атрибут

viewBox="min-x, min-y, width, height"


который управляет контейнером svg (указывает начальное положение координат и размер
элемента-контейнера).

В нашем случае для того, чтобы убрать пустоту сверху - меняем значение min-y, пустоту
снизу - уменьшаем высоту контейнера координатой height. Результат такой - viewBox="0
88 512.001 335":










Если кто-то укажет недостатки способа, буду рад


Ответ 2

Ну вообще , если 'мы' не можем редактировать svg то можем взять svg и обернуть в
div с нужными стилями и overflow:hidden; и получим полностью управляемый svg - смотрим код 



* {
  margin: 0;
  padding: 0;
}
.svg-art {
  width: 510px;
  height: 336px;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  border-radius: 9px;
  margin: 30px auto;
}
#Layer_1 {
  position: absolute;
  top: -88px;
}

  





в песочнице пример адаптивного svg


Ответ 3

Нормально проходит обрезка руками. В IDEA можно такие штуки делать.

Поля чуть-чуть остались, но это для квадратности.








Если квадратность не нужна, тогда можно так: