What is the best approach for crossfading two horizontally aligned images in SVG?
This is my approach so far, but I'm having two problems:
Within my mask, how can I apply the two gradients coming from oppisite sides? I've only been able to get 1 out of 2 to appear.
When the mask is applied to the first image, why is the second image no longer visible? If I am using objectBoundingBox, shouldn't the mask just be contained to the element?
Related
I have an ML model that I am using to create a mask to separate background and object. The problem is that the model is not that accurate and we still get regions of background around the edges.
The background could be any color but it is not uniform as you can see in the image.
This is the model output.
I was wondering if there is a way I could apply masking only around the edges so it doesn't affect other parts of the object which have been extracted properly. Basically I only want to trim down these edges which contain the background so any solutions using python are appreciated.
I'm really sorry for not being at the liberty to share the code but I'm only looking for ideas that I can implement to solve this problem.
You can use binary erosion or dilation to "grow" the mask so that it covers the edge
https://docs.scipy.org/doc/scipy-0.14.0/reference/generated/scipy.ndimage.morphology.binary_dilation.html
https://docs.scipy.org/doc/scipy-0.14.0/reference/generated/scipy.ndimage.morphology.binary_erosion.html
as for "apply masking only around the edges" (this is not the same mask I was writing about above), you can flag pixels that are close to the edge by iteration over a mask and finding where there is a 0 that has a neighbouring 1 or vice versa.
I am trying to extract text from an image, but within a certain area of the image and not the entire image.
I have already been able to detect where the objects of interest are and get their coordinates. Though I do not know where to start when extracting text from a specific area.
I'm using the code from this example:
https://www.codingame.com/playgrounds/38470/how-to-detect-circles-in-images
It is able to detect the circles, but I want to take it one step further and extract the numbers from the circles and tag them to their corresponding coordinate.
I'm using this example to learn how to do something similar myself, but I'm really more interested in deciding the search in a set area.
Most image processing libraries support the concept of ROIs (region of interest) or AOIs (area of interest).
The idea is to restrict processing to a subset of pixels that are usually selected by defining geometric shapes like rectangles, polygons, circles within the image coordinate system.
You can fix this issue by first cropping the image using your coordinates and try to extract text from it.
I want to use a feColorMatrix primitive multiple times in one filter element. What changes is the x-coordinate, everything else stays the same. How do I do this in a DRY way?
I'm looking for a way to create an responsive image using SVG, where some sections maintain their aspect ratio when re-sized and others are distorted. This pencil, for example, could be resized so the two ends stay the same shape and only the body is stretched, like the image below:
I can do this in HTML5 using CSS3's border-image-slice, e.g.
border-image-source: url("cropped-pencil_clipart.svg");
border-image-slice: 25% 50% 25% 25% fill;
See this codepen for an example. However I can't think of a way to achieve it in a 100% external SVG file that I can use as an image or object. In effect, I want the outer and middle elements to have preserveAspectRatio="none" and the left and right elements to have ="... slice". I know this isn't possible in "conventional" SVG 1.1 and I don't want to use JavaScript or ForeignObject because these would limit the ways I can use the external file.
Are there any clever workarounds that could selectively preserve the aspect ratio for individual parts of an image? I can re-create the source elements as pure paths if that's necessary. I've tried using patterns and even custom markers but without success so far. Any suggestions would be welcome.
I need to write some code (for a web.py webapp with a straight-HTML/JS client) that will generate a visual representation of a set of point-values. Each point has an X and Y coordinate, and the value is an integer. If I can use SVG to do this, then I can scale the image client-side with no extra code. Can I actually do this? I am concerned about a couple of things:
The points don't necessarily have any relation to each other. They aren't necessarily in a grid, nor can we say how many points are nearby, etc.
Gradients are primarily one-direction, and multiple gradients on the same shape seems to be a foreign concept.
Fills require an existing image, at which point, I'd be better off generating the entire image server-side anyway.
Objects always have a layering, even if it isn't specified, which can change how the image is rendered.
If it helps, consider a situation where we have a point surrounded by 5 others, where one of them is a bit closer than the others (exact distances and sizes can be adjusted). All six of the points have different colors (Red, Green, Blue, Cyan, Magenta, Yellow, with red in the center and Yellow being slightly closer), and the outer five points are arranged roughly in a pentagon. Note that this situation is not the only option, just a theoretically possible situation.
Can I do this with SVG, or should I render an image server-side?
EDIT: The main difficulty isn't in drawing the points, it is in filling the space between the points so that there is no whitespace, and color transitions aren't harsh/unpredictable if you know the data.
I don't entirely understand the different issues you are having with wanting to use svg. I am currently using the set up you are describing to render X-Y scatter plots and gaussian curves and found that it works great.
Regarding the last point about object layering, you have to be particularly careful when layering objects with less than 100% opacity which are different colors. The way the colors "add" depends on the order in which you add the objects to your svg drawing.
Thankfully you can use different filters to overlay the colors without blending them. Specifically I am using the FeComposite filter element. There is a good example of its usage here:
http://www.w3.org/TR/SVG/filters.html#feCompositeElement