В чем «косяк» масштабирование SVG вставленного в img src?

Question

[Alexandr]

Приветствую всех.
Возник вопрос. Вставляю в страницу SVG файл средствами тега img

<img src="../../images/checkbox-unselect.svg" style="width:72px;height:72px;">

Размер меняю с помощью js в теге style. При разных размерах появляется размытость какая-то границ. Не могу понять в чем дело. Это же вектор.... Во всех браузерах(распространенных).


Появляется какая-то не четкость границ.... Может кто подскажет в какую сторону рыть?

Comments

[Lynn «Кофеман»]

А как ещё вы предлагаете нарисовать границу шириной 1.35px?

[Lynn «Кофеман»]

Копать в сторону vector-effect

[Alexandr]

Алексей Тен: спасибо. Просто сам SVG рисовал дизайнер и прислал, а я уже как верстальщик и программист это все вталкиваю в шаблон, вот и возник вопрос.

[Alexandr]

Алексей Тен: не помогло

[Lynn «Кофеман»]

Что не помогло? Давайте код

[Alexandr]

Алексей Тен: https://jsfiddle.net/L68k77ru/

[Lynn «Кофеман»]

У вас рамка нарисована не линией, а фигурой с дыркой. Тут мало что поможет, можно попробовать shape-rendering="crispEdges" (https://developer.mozilla.org/en-US/docs/Web/SVG/A...), но вообще для такой простой формы очень уж много кода.

[Alexandr]

Алексей Тен: Понятно, но я повторюсь что рисовал не я. Может вообще просто дивом или тем же svg но фигурами квадрат и круг сделать? думаю так лучше будет.

[Alexandr]

Алексей Тен: Отлично, спасибо огромное, это помогло! Правда везде кроме ИЕ

Answer 1

[Хазрат Гаджикеримов]

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

Это касается не только svg вставленный с помощью img но с помощью svg тега, например:


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