Skalowanie obrazka svg do podanych wymiarów

0

Cześć, mam taki problem ze skalowaniem obrazka svg w elemencie div. Mam dużo różnych obrazków svg i chciałbym zrobić tak, żeby każdy z nich zmieścił się w diwie o podanych wymiarach i oczywiście nie był ani za mały ani za duży. Mam tutaj dwa przykłady na jsfiddle:
https://jsfiddle.net/acrjc37s/1/
https://jsfiddle.net/ojear288/

I teraz chciałbym jakby znaleźć tak ialgorytm albo zasadę jak wyskalować taki każdy obrazek, aby zmieścił się w tym divie i nie był ani za mały ani za duży czytałem trochę o vievBox, atrybucie obrazka svg i chyba on mógłby załatwć sprawę tutaj przykład:
https://jsfiddle.net/e88an9jg/

Ale nie mogę znaleźć włąśnie tej reguły nie za bardzo chyba czaję o co chodzi w tym vievBox próbowałem różnych kombinacji i jakoś nie mogę rozkminić może ktoś pomoże?

0

Ja bym nie wklejał obrazków svg prosto w html'a. Trzymaj kod svg w osobnym pliku z rozszerzeniem svg. Do html wklej go za pomocą tagu img. Wtedy w css wystarczy width:100% dla tego img i obrazek będzie skalowany do szerokości diva w którym się znajduje.

1 użytkowników online, w tym zalogowanych: 0, gości: 1