I have this inline SVG element. Some of its sub elements use image patterns. (In the attached photo, the SVG object is on the left and the image with correct color is on the right). A very strange greenish hue is affecting all image patterns and images in the SVG which have patches of white in the original images used. What could be the reason? I've already checked this both in Firefox and Chrome. Same problem shows in both browsers. I used SVG transforms (rotate, scale, translate) to manipulate the images but never a command to change the colors..
EDIT 2017-09-24 (screenshot in Safari) - Safari displays the correct color
Related
How can I place a complex SVG image (with css-styles!) geo-referenced over an openlayers map so that the document's CSS styles are used with rendering the SVG.
A regular ImageLayer does a fine job of showing the georeferenced svg on the map as an image. But because it is an image, the CSS of the document has no effect on the rendered SVG
The SVG Layer example on the other hand places the SVG into the DOM and makes it react to the document's CSS and reacts when you change the CSS. But it always maps the SVG over the whole planet and seems to hide any layer I place under it.
To give you an idea of the use case: we have an externally generated SVG with several 'groups or layers' in it representing different aspects of infrastructure. This svg has to be put correctly over a map (like we can do with the imagelayer), but we want to be able to selectively show/hide the different 'groups or layers' that are within the SVG.
I guess in the end we would be needing something similar to ol/layer/Image/ImageLayer to happen in the SVG-layer example.
Any suggestions about how to approach this would be very welcome, but working code is also OK ;-)
In the example the image width is 360 degrees and the center is at [0, 0]. For a smaller extent you would need to use the appropriate width and adjust the center used in the transform https://codesandbox.io/s/lucid-poitras-i1qyb?file=/main.js Use an opacity setting to avoid completely hiding the base layer.
I am seeing a strange issue in Safari 10 that may be present in earlier versions. When SVG content is present in the document along with a content editable div the text is disappearing. This happens mostly when selecting text, but also while toggling the display property of the svg content. Here are a few videos showing the behavior: http://www.screencast.com/t/CeyFqYyfeFZW
http://www.screencast.com/t/eRAGsopA
I can't make the application available publicly. We have a pretty complex document composition layer which is probably to blame. I'll try posting an isolated test later. I have only observed this issue on Mac OS X Yosemite (10.10.05). iOS seems to be fine. If anyone has seen this issue before please let me know. Thanks!
After a bunch of tests I figured out that in this particular example the problem is caused by the situation when editable text has higher z-index than image (raster or svg). Image can be placed anywhere, but not geometrically below the text. This issue also is specific to Safari 10+. Testing the original example in 9.1 everything works.
I have created a simple example testing z-index https://jsfiddle.net/xngmocxm/9/
There is a background element, which is jpeg, it has z-index = 0, 2 svg path elements (grey and red), 2 editable text elements and svg image (HomeSmart in the top left corner).
Z-index of the left text element is set to 30, right one has z-index 20, svg image z-index is set to 25, i.e. in between 2 text elements. In test browser I can see that in this case only the left text disappears, right one is shown and selected just fine.
So the svg that is above the text does not manifest the issue, but if the SVG is below the editable text this issue occurs.
If image content is jpeg, it also causes same issue:
img src https://jsfiddle.net/xngmocxm/12/
Anyway I was able to fix this by setting overflow to hidden on image wrapper of the problematic image element. I think this a is Safari bug and not intentional behavior.
Here is an SVG image I want to convert to PNG with librsvg in my program.
This is a PNG version of the SVG exported from Inkscape:
This is a bitmap of the same SVG exported with librsvg:
Only the white portions of the image are exported. The black portions, despite being well-defined in the background, appear transparent.
This problem occurs whether I use the librsvg API or the program rsvg-convert. You can use the W3 validator to see that the SVG's markup is valid.
I notice the same thing happens in the thumbnails of the SVGs in my file browser. Perhaps they're using librsvg?
Upon digging into the files I discovered that, for some reason, the fill of the black portion was set to "fill:currentColor". I don't know where that came from, but changing it to "fill:#000000" fixed the problem.
I have an SVG with two images. These images have feComponentTransfer applied to them.
For these images, color-interpolation-filters is set to linearRGB and sRGB, correspondingly:
http://jsfiddle.net/9eU37/6/
Here's how it renders in Safari and Chrome:
(linearRGB on the left, sRGB on the right)
Here's how PhantomJS renders it:
(linearRGB on the left, sRGB on the right)
As you can see, PhantomJS seems to ignore color-interpolation-filters (there is no difference between the two images). Another odd thing is that the resulting image matches neither sRGB nor linearRGB browser version.
Is there anything I can do it make it render SVG like the browser does, and respect the setting?
You can do your own gamma correction manually by using an feComponentTransfer type=gamma. Usually a 2.2 for the exponent will do it.
I tried to resize svg file to be opened in illustrator with smaller width and height(pixels or cm), I did this by changing width, height and viewBox attributes in <svg> tag, but it doesn't work at all. By search I have found that transform attribute via matrix value affects the real resizing of the figure, any ideas about ready made functions or scripts using python or librsvg to successfully scaling the svg figure, by the way I'm using inkscape to produce svg files. THANKS
You could try svg scour, that should be able to find a good viewBox to use (note spellning and uppercase 'B'). Then change only the width and height attributes to be whatever you want, and hopefully that should work.