Categories:
Cloud (204)
Entertainment (11)
Facebook (43)
General (50)
Life (31)
Programming (64)
Technology (398)
Testing (4)
Tools (488)
Twitter (5)
Wearable (26)
Web Design (44)
Collections:
Other Resources:
Use IMG "width" and "height" to Crop SVG Images
How to Use IMG attributes, "width" and "height", to Crop SVG Images?
✍: FYIcenter.com
One way to get rid of those extra white spaces in a SVG image, is to use "width" and "height" attributes in HTML IMG tags.
There are the rules on how "width" and "height" attributes in the HTML IMG tag work with the SVG image size:
You can follow this tutorial to test those rules.
1. Save the following SVG image in a file called, circle.svg:
<svg xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="50"/> </svg>
2. Save the following HTML document in another file called, circle.html:
<html><body> <p>Black <img src="/circle.svg"/> Circle... </p> <p>Black <img src="/circle.svg" width="100" height="100"/> Circle with <img ... width="100" height="100" </p> <p>Black <img src="/circle.svg" width="50" height="50"/> Circle with <img ... width="50" height="50"> </p> <p>Black <img src="/circle.svg" width="200" height="200"/> Circle with <img ... width="200" height="200"> </p> </body></html>
When you open the above HTML file, circle.html, in a Web browser, you see 4 SVG images with different display widths and heights:
As you can see, the second SVG image displayed perfectly in 100px x 100px with extra white spaces removed.
By the way, IMG 'width' and 'height' attributes behave differently on PNG (and other image types) images than SVG images. 'width' and 'height' attributes will scale (shrink or enlarge) PNG images, instead of crop or pad them.
⇒ Use SVG Images in OBJECT Tags
2022-12-03, 439🔥, 0💬
Popular Posts:
How to install IPython in a Conda environment? If you want to install IPython in a specific Conda en...
How to convert a Word document into an MHTML? I have a nice Word document and want to publish it on ...
Why am I getting the "Spawn Failed: Server at http://127.0.0.1:47353/u ser/fyicenter/didn't respond ...
How to Install and Start Skype Meeting App in Google Chrome? You can follow this tutorial to install...
Where to find answers to frequently asked questions on Microsoft PowerPoint? I want to know how to c...