Got it! This site "www.robinsnyder.com" uses cookies. You consent to this by clicking on "Got it!" or by continuing to use this website. Note: This appears on each machine/browser from which this site is accessed.
In-line SVG image-like scaling with GIF comparison
1. In-line SVG image-like scaling with GIF comparison
I have been experimenting with SVG as used in, say D3, for visualization graphics for data science applications.
This SVG has not yet been integrated into the system used for scaling for various devices screens.
I spent some time doing Internet searches (2021-02-14 and before) to find out how to scale in-line SVG (not IFRAME or IMG separate file SVG) like images. There were many with discussion and examples that went on at length, but no simple answer. One answer turned out to be very simple and is covered here.
Short answer: The viewBox attribute can be used in a way similar to the BoundingBox in PostScript, and the height and width are used to scale the SVG in the same way as an image using the IMG tag.
If changed (e.g., dynamically by JavaScript) the height and width should preserve the aspect ratio of the viewBox (details omitted).
2. CSS for SVG
Here is the CSS used for the SVG examples (on this page).
The rmsSvg is for all SVG (Scalable Vector Graphics) images (on this page) and puts a obvious border around the SVG for demonstration purposes.
The rmsStar is for the example star (dark blue stroke and light blue fill).
3. The SVG vector image
Here is the SVG used - a 5-pointed star that I have seen in multiple places and adapted for the present purposes.
Here is the SVG code [#1]
Here is how the SVG code appears.
4. Raster images
A raster image, such as a GIF (Graphics Interchange Format) image, has a raw image size that never changes (for a given image). Thus, when that image is scaled bigger, it can become fuzzy.
5. Software
The following software uses different default file formats.
Adobe Illustrator uses vector-based PostScript.
Open Source InkScape uses vector-based SVG.
Adobe PhotoShop uses raster-based images.
6. The GIF raster image
Here is the GIF image at 60 x 60 pixel resolution. It is a five-pointed star similar to the SVG image.
Here is the HTML to display the image.
7. Approach
The approach here to show the SVG image and GIF image side-by-side at various scaling resolutions.
In doing so, the approach to scaling the both the SVG image and the GIF image should be evident (on close inspection and comparison of the corresponding HTML)
The SVG image on the left is in blue.
The GIF image on the right is in green.
8. Comparison 1
Here is the SVG code [#2]
SVG image:
GIF image:
Here is the HTML for the above table.
9. Comparison 2
Here is the SVG code [#3]
SVG image:
GIF image:
Here is the HTML for the above table.
10. Comparison 3
Here is the SVG code [#4]
SVG image:
GIF image:
Here is the HTML for the above table.
11. Comparison 4
Here is the SVG code [#5]
SVG image:
GIF image:
Here is the HTML for the above table.
12. Observation
It should be evident that as the images are scaled, the SVG image retains crispness while the GIF image becomes grainy and pixelated as the browser attempts to stretch it to fit a larger area/size than the original size.
SVG image size: 156 bytes (give or take a few bytes)
GIF image size: 2,415 bytes or this 60 x 60 image.
13. Summary
These examples have shown one way to (statically) scale both an SVG image and a GIF image in a web page.
14. Future topic
An obvious follow-on question is the following.
How can an SVG image and/or a GIF image be dynamically scaled in a web page that must fit both desktop and phone screens? And the phone screens are easily changed between portrait and landscape. This question is left as a future topic.
