Menu
I'm playing around with the SVG tutorial and I simply loaded an image like this:
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg style="stroke-linejoin:round; stroke:black; stroke-width:0.5pt; text-anchor:middle; fill:none" xmlns="http://www.w3.org/2000/svg" font-family="Helvetica, Arial, FreeSans, Sans, sans, sans-serif" height="400px" width="400px" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 250 250"> <rect y="0" x="0" height="250" width="250" stroke="black" stroke-width="1" fill="blue" /> <image y="0" x="0" height="250" width="250" xlink:href="http://www.blueprintmodel.co.uk/images/DSCF1438.jpg" /> </svg> I get image in the center of viewBox, over "rect", even if height and width are same. My questions are:
606
By default, it will not be stretched or distorted if you give it dimensions that don't match the aspect ratio. Instead, the scale will be adjusted in order to preserve the aspect ratio defined in the code.
We use viewBox to make the SVG image scalable. viewBox = “0 0 100 100”: defines a coordinate system having x=0, y=0, width=100 units and height=100 units. Thus, the SVG containing a rectangle having width=50px and height=50px will fill up the height and width of the SVG image, and all the dimensions get scaled equally.
Set preserveAspectRatio="none" on the SVG element:
<svg viewBox="0 0 500 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" > If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
