I have patterns that each have a single image in them. I need the images to scale to the full width or height of their containers, which are paths, while retaining their proportions. Essentially, they need to behave like an html image might if you set min-width:100%; min-height:100%;
I have not used svgs much before and do not know which attributes to change to get this type of behaviour. I've been trying all sorts of combinations of viewBox, preserveAspectRatio, patternUnits and more, but I cannot seem to get what I want.
To get this to work, you need to understand how objectBoundingBox units work in SVG, and also how preserveAspectRatio works.
Object Bounding Box Units
The size and content of gradients, patterns and a number of other SVG features can be specified in terms of the size of the object (path, rect, circle) which is being painted by specifying objectBoundingBox as the unit. The opposite is always userSpaceOnUse, which uses the coordinate system that the shape is drawn in.
Object bounding box units are usually the default for declaring the size and position of the graphical fill element; you change this by setting the patternUnits property on the <pattern> element. However, user space units are usually the default for any units used in the content graphics; to change this you set the patternContentUnits property.
So first step: To create a pattern that completely fills the shape, you need to:
Declare the height and width of the pattern as 100% (or 1); these will by default be interpreted relative to the bounding box).
Declare patternContentUnits="objectBoundingBox".
Size the content (your image) so that it has a height and width of 1.
You cannot use 100% as a synonym for 1 object bounding box unit within the pattern content itself (i.e., the image dimensions); percentages are interpreted relative to the SVG size, not the objectBoundingBox.*
I should mention, since you say that your shapes are <path> elements, that the object bounding box is the smallest rectangle that is perpendicular to the coordinate system in which the path is drawn and contains all the path's points. It doesn't include stroke. For example a straight horizontal line has a zero-height bounding box; an angled line has a bounding box rectangle such that the line is the diagonal of the box. If your paths are awkwardly shaped and/or not very well aligned with the coordinate system, the bounding box can be much larger than the path.
Preserving Aspect Ratio
The preserveAspectRatio property applies to images and to any element that can have a viewBox property: the parent <svg>, nested <svg>, <symbol>, <marker> and <pattern>. For images, the aspect ratio is calculated from the image's inherent width:height ratio, for all the others it is calculated from the width:height numbers in the viewBox attribute.
For either type of element, if you declare a height or width for the element that doesn't match the aspect ratio, the preserveAspectRatio property determines whether the content will be stretched to fit (none), sized to fit one dimension and cropped in the other (slice) or shrunk to fit both dimensions with extra space (meet); for meet and slice options you also specify how to align the content in the space.
However, it is important to note that the aspect ratio of the space available is calculated in the current coordinate system, not in screen pixels. So if a higher-level viewBox or transformation has altered the aspect ratio, things can still be distorted even with a preserveAspectRatio property set on the current element.
The other thing to know is that the default value is usually not none. For both <image> and <pattern> elements, the default is xMidYMid meet -- i.e., shrink to fit and center. Of course, this default only has an impact on pattern elements if the pattern element has a viewBox property (otherwise, it's assumed to have no aspect ratio to preserve).
What value you want to use for preserveAspectRatio will depend on the image and design:
Should the image be stretched to fit the shape preserveAspectRatio="none"?
Should the image aspect ratio be maintained, but sized to completely fit in or cover the shape?
In the first case (stretch), you don't need to do anything to the <pattern> element (no viewBox means no aspect ratio control), but you do need to specifically turn off aspect ratio control on the image.
In contrast, if you want to avoid distortion of the image you will need to:
Set viewBox and preserveAspectRatio properties on the <pattern> element;
Set the preserveAspectRatio property on the <image> if you want something different than the default.
Working Example
This fiddle shows three ways of getting a pattern image to fill a shape.
The top row has aspect control turned off.
<!-- pattern1 - no aspect ratio control -->
<pattern id="pattern1" height="100%" width="100%"
patternContentUnits="objectBoundingBox">
<image height="1" width="1" preserveAspectRatio="none"
xlink:href="/*url*/" />
</pattern>
The middle row has aspect ratio control on the <image> element so the picture is cropped to fit the pattern, but the picture is still distorted when the pattern is drawn in the rectangle because the objectBoundingBox units that define the coordinate system are different for height versus width. (The image in the circle isn't distorted because the circle's bounding box is a square.)
<!-- pattern2 - aspect ratio control on the image only -->
<pattern id="pattern2" height="100%" width="100%"
patternContentUnits="objectBoundingBox">
<image height="1" width="1" preserveAspectRatio="xMidYMid slice"
xlink:href="/*url*/" />
</pattern>
The bottom row has preserveAspectRatio set on both the image and the pattern (and also a viewBox set on the pattern). The image gets cropped but not stretched.
<!-- pattern3 - aspect ratio control on both image and pattern -->
<pattern id="pattern3" height="100%" width="100%"
patternContentUnits="objectBoundingBox"
viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice">
<image height="1" width="1" preserveAspectRatio="xMidYMid slice"
xlink:href="/*url*/" />
</pattern>
Source image by Stefan Krause, from Wikimedia Commons. The original aspect ratio is 4:6 portrait mode.
* Correction on 2015-04-03
Related
This is my set up. I have 2 layers with transparency (I don't know if transparency matters here). Layers are the same size, 5x7 inches. Each layer has their image (say I draw a square on it and a circle on the other).
I want to resize ONLY the square.
The problem is when I scale the square I end up either scaling both, the circle AND the square, equally and they retain their layer size, or BOTH layers are rezise and no longer 5x7 inches. I've tried 'Tools-Transform-Scale' and 'Image-Resize canvas or image', but I can't find the tool to just resize ONE of the images.
Any ideas what I'm doing wrong?
Thanks
What you want is the Scale tool, and it will resize only the active layer if it is in Scale: layer mode (you seem to have it in Scale: image mode)(*).
Otherwise, to clear up things:
Image > Canvas size changes the size of the canvas, but nothing is stretched/compressed, the layers retain their size or are extended with transparency or white.
Image > Scale image scales everything in the image (layers, channels, paths...)
(*) Also,if what you apply a transform such as Scale to an item that has the chainlink, the same transform will be applied to all other chainlinked items (other layers, but also paths).
I am new to SVG. I have a svg image, i have applied a transform matrix for a <g> tag. Now I want to calculate <g> tag width and height. on page load i can calculate width and height using getBBox() or getBoundingClientRec() functions. But when i am resizing the window i am changing matrix values, Before updating matrix values how can i calculate <g> tag width and height.
-- getBBox() and getBoundingClientRec() returns width and height based on matrix values.
example:
On page load:
<g id="xyz" transform="matrix(1,0,0,1,10,10)"></g>
When resizing the window i am calling a method which calculates matrix values.
Note: Matrix values are calculated not yet updated
I need to center the image to the browser window on resizing. I am subtracting window width and image width divided by 2 and i am applying that value for matrix.e i., "x" value.
example: new matrix values are [1.2,0,0,1.2,x,10]
For centering map i need to know width and height of <g> by using calculated matrix values i.e., [1.2,0,0,1.2,x,10]
Wrap the transformed group with another <g> and call getBBox() on that.
However why not describe the original problem you are trying to achieve? Since you are new to SVG, there is a chance you are approaching your problem the wrong way. Maybe we can suggest a better solution than trying to manipulate matrixes yourself.
I'm adding borders to various images in a .pdf document. The borders all have the same width, but in the .pdf the borders have different widths. It is more pronounced as the width of the border increases.
Also, is there a way to move the border outside of the image, so that it is not covering any of the image using the methods of the image class? I realize I can first put a filled rectangle and then add the image on top of the rectangle as an option. Just curious as to if this can be done with methods from the Image class.
Here is the code snippet
magazine.open();
canvas = pdfw.getDirectContent();
image = Image.getInstance("a.JPG");
image.setBorder(Rectangle.BOX);
image.scaleAbsolute(200,200);
image.setBorderWidth(50);
image.setAbsolutePosition(50,10);
//canvas.addImage(image);
magazine.add(image);
image = Image.getInstance("b.jpg");
image.setBorder(Rectangle.BOX);
image.scaleAbsolute(200,200);
image.setBorderWidth(50);
image.setAbsolutePosition(50,230);
//canvas.addImage(image);
magazine.add(image);
I fear you'll have to work with the workaround you described.
There are two ways to define a border for an image:
image.setUseVariableBorders(false);
This is the default. This is what you have (even though you aren't calling the method explicitly).
In this case, the thickness of the border is distributed in a way that half of the line width is inside the rectangle and half of the line width is outside of the rectangle. Maybe that's what's causing the effect that the difference you notice is more pronounced as the border width increases.
Then there is:
image.setUseVariableBorders(true);
Now the borders will be drawn inside the area needed for the image. This is useful for tables (both PdfPCell and Image are subclasses of the Rectangle class where these methods are defined), but I fear it doesn't help you in the case of images.
So your best chance is to add the border using a workaround.
I want to show another image on hover and due to the layout of the homepage I need to use sprite to do it. I've got it working fine, but I'm using fixed width and height for the container.
You can see my JSFiddle here:
http://jsfiddle.net/mckeene/fhk0byqt/4/
The problem arises when I want to make it responsive. I can use max-width: 100%, but what about the height?
OK, this solution is based on the known fact that some properties like padding-top and margin-top, when given values in percentage, are calculated based on the width of an element rather than its height.
Making an element “as high” as required by the known dimensions of a responsive image can be done by using padding-top – I used a value of 66.54% here based on your image’s dimensions (half the image height divided by the width, times 100) to span the container element up to the required height.
Now normally to display the upper half of an image first, and then the second half on hover, I would use absolute positioning – but we can’t use top here, since a value in percentage for that property would be based on the height. But luckily, as already mentioned, margin-top is one of those properties where percentage is calculated based on the width – so we can use margin-top: -66.54% here to “pull” the image up over its container’s padding first to show its upper half, and then double that (margin-top: -133.1%) to pull it up even further on hover, to show its lower half.
I have a 3x3 PNG embedded image (colors are white-black-red-green-yellow-blue-magenta-cyan-white) that I want to display over a larger area without interpolating.
Can this be done?
SVG has an image-rendering attribute. Unfortunately none of the values guarantees nearest neighbour interpolation - optimizeSpeed is the closest. Firefox supports an additional value -moz-crisp-edges which guarantees nearest neighbour and I think Webkit has -webkit-optimize-contrast which does much the same.