Масштабирование в svg без потери качества
 

Собственно вопрос в заголовке. Экспериментирую с SVG. Нужно сжать некую структуру элементов в 2 раза по оси Y, картинка получается замыленной из-за трансформации.

<svg>
<g transform="scale(1, 0.5)">
 <path .../>
 <path .../>
 <path .../>
</g>
</svg>

Конечно есть вариант на JS координаты заново пересчитывать при изменения размера окна, но может есть более элегантное решение, подскажите пожалуйста кто знает :)

viewBox относительный задать. А там уж как хочешь размер самого svg меняй.

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

simple, если линия однопиксельная попробуй сдвинуть на 0.5px.
Ещё может быть если цвет black, а не #000.(маловероятно)
Но вообще такого быть не должно.)

ну вот например я так делаю:

<svg width="300" height="300" viewBox="0,0, 3000,3000">
<path d="M1 1 V1500" stroke-width="1" stroke="#000000"/>
</svg>

Мне нужно получить тонкую вертикальную черную линию, а на деле получается очень светлая линия.

Ну она и получается очень тонкой: 0.1px в данном случае. Какбэ причины "свелости" очевидны, не?)

почему 0.1? ведь в stroke-width = 1? а как тогда сделать линии толщиной в 1px что то я не догоняю.

Хе, хе. В этом весь подвох viewBox.
Тут уж выбирайте - либо относительность размеров, либо точные пиксели.

Потому чтоТ.е. на 300 пикселей 3000 точек viewBox'а. А stroke-width(как и всё остальное) считается в этих самх относительных единицах, а не пиксилях. Просто по дефалту они равны пикселям.)

Вот теперь до меня дошло, как оказалось я неправильно понял систему координат в viewBox. Спасибо.

т.е получается что бы было все красиво придется все таки расcчитывать на JS координаты и потом уже рисовать по ним. Пытаюсь сделать простенькую визуализацию данных. Знаю что велосипед, просто охота разобраться для себя в тонкостях SVG.