Categories:
Cloud (204)
Entertainment (11)
Facebook (43)
General (50)
Life (31)
Programming (64)
Technology (430)
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, ∼1646🔥, 0💬
Popular Posts:
Why I am getting the "Account Frozen" message when login to OneDrive? If you have not used your free...
What are control codes used in Microsoft Word that can be used in the Find and Replace command? Here...
What is the port number used for the control connection in FileZilla Server? How to change control c...
Is Tahoma font supported on iPhone, iPad and other Apple devices? The answer is no. Tahoma font is n...
How to download and install SoapUI on Windows systems? Here are the steps to download and install So...