I have a collection of almost a hundred SVG files, beautifully hand-coded, each dutifully specifying a viewBox, a width, and a height. Width, heights, and aspect ratios vary across the SVGs.
There is an awkwardness: I care about and want to preserve their relative sizes.
On an HTML page I want to show them at their ‘natural’ size, that is as specified in the width and height. Easy peasy:
<img src="….svg">. Maybe the CSS should specify{object-fit: none;}, but that doesn’t seem to do anything.I’d also like to show a consistent zoom-in, say 6×. Obviously the CSS could insist on a pixel-width, but a zoom of that type would not be by a consistent factor.
Please, how in HTML or CSS (prefer not scripts) can it be specified that SVGs are to be shown at 600% of their base size, that is, 6× the width and height in the first line of each SVG file.
[Edit] Maybe some words re purpose will inspire people, or perhaps just entertain. In financial markets charts, numerical graphics, are a mess. There is no consistency of representation. For decades I have used some standard symbols of my devising for the likes of USD EUR GBP JPY CHF CAD AUD NZD SEK NOK. Over time the list has been extended to include all currencies and sovereign bond issuers I’ve considered, EMBI constituents, EU members and accession candidates, a few others with large GDP, and development-bank bond issuers. The set is now being rewritten in SVG, and while at it, polished and improved. Different markers have different aspect ratios and hence different widths. I want my HTML pages to show each at its (small) natural size, and also each consistently enlarged to check details are correct.
And yes, when ready they will be open-sourced under the Boost licence.