I have a collection of nearly a hundred SVG files, all beautifully hand-coded, each with their viewBox, width, and height carefully specified. These SVG files vary in width, height, and aspect ratio.
There is an awkward problem: I care about and want to preserve their relative sizes.
On HTML pages I want them to be displayed at their "natural" size, i.e. the size specified in terms of width and height. Very simple: <img src="….svg">. Maybe the CSS should specify {object-fit: none;}, but that doesn't seem to work.
I also want to display at a consistent magnification ratio, say 6x. Obviously, CSS can stick to pixel widths, but this type of upscaling won't happen by a consistent factor.
Please tell me, in HTML or CSS (preferably without scripts), how can I specify that the SVG is displayed at 600% of its base size, which is 6 times the width and height in the first line of each SVG file.
[EDIT]Maybe some words about purpose will inspire people, or just entertain. In financial market charts and numerical graphics, it's a mess. There is no consistent representation. For decades I have been using some standard symbols of my own design, such as USD EUR GBP JPY CHF CAD AUD NZD SEK NOK. Over time this list has expanded to include all currency and sovereign bond issuers I considered, EMBI constituents, EU members and accession candidates, some other countries with larger GDPs, and development bank bond issuers . Now this collection is being rewritten as SVG, with improvements and refinements being made along the way. Different markers have different aspect ratios and therefore different widths. I want my HTML pages to be displayed at their (small) natural size, but also at a consistent magnification to check that details are correct.
Yes, they will be open source under the Boost license when ready.
P粉3233748782024-01-11 13:25:55
For 6x zoom, set your tags as follows
<img src="….svg" style='transform: scale(6,6)' />
Or add the transform attribute to your CSS file. 6,6 means that X and Y are respectively scaled 6 times.