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, 610🔥, 0💬
Popular Posts:
How to add ActiveX controls, like text command button, text box, check box, etc., to Presentation sl...
How to resume file transfer in FileZilla FTP Client? I have unfinished file transfer entries in the ...
How to create a command button to run my macro in slide show in PowerPoint? I have created a macro t...
How to Uninstall Skype Meetings App on Windows? I don't need it anymore. You can following this tuto...
How a FTP directory is displayed in a Web browser? A FTP directory will be displayed nicely in a Web...