MobileRead Forums - View Single Post - Automate a page split... Find & Replace doesn't work for this

Turtle91 · 11-26-2022, 06:49 AM

SVG wrapper's are a workaround to provide functionality that is not included in current CSS/HTML. It does not reformat a jpg/png to SVG.

One awesome function is the 'preserveAspectRatio' which, as it states, preserves the images aspect ratio...It prevents an image from getting clipped, or stretched, in the wrong direction...which is a failing of the method repilo mentioned. No matter the orientation of the display, or weather the image is portrait or landscape, the image will display properly on the 'page'. There will be blank space to fill whichever dimension needs it. the 'xMidYMid meet' is one of the options that simply says 'center the image on the available display vertically and horizontally.

The image height and width is not setting, or restricting, the resolution. It is informing the svg shell what the images height and width are. This is used in conjunction with the 'viewbox' setting to determine which portion of the image to display. Most often you want to display the whole image, so you would set the viewbox from the origin (0 0) to the imageWidth imageHeight (as in '0 0 600 889' for an image that is 600 pixels wide by 889 tall). You can focus on only one portion of the image by restricting those coordinates.

For more details check out tex's link.

Cheers!

11-26-2022, 06:49 AM	#10
Turtle91 A Hairy Wizard Posts: 3,388 Karma: 20212733 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	SVG wrapper's are a workaround to provide functionality that is not included in current CSS/HTML. It does not reformat a jpg/png to SVG. One awesome function is the 'preserveAspectRatio' which, as it states, preserves the images aspect ratio...It prevents an image from getting clipped, or stretched, in the wrong direction...which is a failing of the method repilo mentioned. No matter the orientation of the display, or weather the image is portrait or landscape, the image will display properly on the 'page'. There will be blank space to fill whichever dimension needs it. the 'xMidYMid meet' is one of the options that simply says 'center the image on the available display vertically and horizontally. The image height and width is not setting, or restricting, the resolution. It is informing the svg shell what the images height and width are. This is used in conjunction with the 'viewbox' setting to determine which portion of the image to display. Most often you want to display the whole image, so you would set the viewbox from the origin (0 0) to the imageWidth imageHeight (as in '0 0 600 889' for an image that is 600 pixels wide by 889 tall). You can focus on only one portion of the image by restricting those coordinates. For more details check out tex's link. Cheers!