Problem:
some svg drawings open well in chrome and edge but not in inkscape or do not convert well with imagemagick. In my case only the text-labels were shown, no lines or drawings at all.
I could not find a solution on stack-overflow or google, the problem seems to occur with others to, but with no answer why and/or with no solution
After a lot of searching, I found the reason why: the colors in my SVG were speficied like this:
stroke:RGB(0,0,0);
According to the SVG spefication, this seems ok, only the specs mention 'rgb' in lower case.
When I converted 'RGB' to 'rgb' in my drawings, they were processed correctly in chrome, edge, inkscape and imagemagick
My correction in C# as inspiration:
var allText = File.ReadAllText(fileName);
allText = Regex.Replace(allText, #"RGB\((\d+),(\d+),(\d+)\)", #"rgb($1,$2,$3)");
File.WriteAllText(fileName, allText);
Related
I'm working on a page to map images to the faces of a hexahexaflexagon (folding paper thingie). To do this I need to crop the images to six triangles in a hexagon, then position those triangles in strips for cutting and folding. I have this working in the browser (tested in recent Firefox, Chrome, and Edge) but when I print it ignores the clipPaths so instead of triangles extracted from the images, it shows the whole original image.
Snapshot of the page is here: https://flexagon-test.glitch.me/
Snapshot of the code: https://glitch.com/edit/#!/flexagon-test?path=js%2Fhexa.js%3A31%3A49
I've tried printing from each of the above printers and I've tried printing to different printers and to PDF and all have the same issue. I'm working on Windows.
I had this working before using canvas, but scaling made the results blurry so I moved it all to SVG, but if I can't print that's a showstopper, since the whole point is to print these.
Thanks in advance for any tips to solve this!
[Update] I tested on a Mac using print to PDF and it had the same problem, so this is not limited to Windows.
I'm trying to edit a vector graphics file from Freepik. The format is EPS and after installing both Inkscape and Ghostscript on Windows, I'm able to open the file with Inkscape. However, Inkscape introduces some weird artifacts (see lines and wrong colors in the picture below).
Side by side comparison, original vector (left) and SVG saved after opening the EPS file in Inkscape (right)
Is there a way to fix this issue?
It's a little difficult to tell, partly because this is a complex illustration and partly because the rendering is a little small. I'd suggest that the circular artefacts are caused by radial fills not being rendered completely.
This could simply be a rendering problem with Inkscape, or it could be that the radial fill has an Extend parameter which isn't being honoured. It could also be a problem calculating a clip.
It's not entirely obvious what you used to render the left hand image, is that Ghostscript ?
Generally I'd say this looks like an Inkscape bug and you should report it as such.
Edit
Reading through the Inkscape FAQ it seems that Inkscape uses SVG as its native format. That's going to mean that an awful lot of PostScript (and PDF) vector objects aren't going to be represented well. Shadings will either have to be rendered to an image or converted into a complex series of SVG primitives.
Following the link on 'How to open EPS files in Windows' from the FAQ suggests to me that EPS files are either rendered to an image or converted to PDF.
You could use Ghostscript to convert the EPS to PDF yourself, and then try loading the PDF into Inkscape to see if you get a better result. You can also open the PDF in, say, Acrobat to see if it looks OK there.
If the PDF looks fine in Acrobat, but not so good in Inkscape, then I'd say that's an Inkscape problem. If the PDF looks poor in Acrobat then that's a Ghostscript problem.
You can then report the problem as a bug to the appropriate site.
It seems that EPS has more capabilities than SVG and that's why some stuff looks weird when converted to PDF/SVG. Specifically, highlights in an EPS file are not properly rendered in an SVG file.
I checked the conversion from EPS to PDF via Ghostscript and the lines are already there, i.e. it's not an Inkscape bug.
Here's the original file to reproduce the problem:
https://www.freepik.com/free-vector/data-processing-factory-isometric-technology_8625296.htm
And here's what it looks like after converting it to PDF: The artifacts are not as noticeable on the PDF file, possibly because Ghostscript converts it with a higher DPI by default
My workaround to be able to edit the file (remove the background) was to:
open the EPS with Inkscape, ungroup the items
delete the background
export it as PNG
then use the PNG as a "mask" on GIMP to edit the JPG file that came together with the EPS.
I've placed an image on top of a div. I'm trying to blend the image into the div (The div is a solid color). In Google Chrome, it looks great! The colors blend perfectly. In IE 7, however, the colors show a hard line even though they should be the same color! After some examination (a print screen put into paint.net to check the actual RGB values), IE 7 is actually lightning up my image.
The blend has to look seamless. Google Chrome was fine with this thus far. Any ideas why IE 7 wont display the color right?
The two browsers are using different rendering engines. There are minor differences between them in how they render graphics, particularly jpegs.
The differences are minor but unavoidable.
Most of the time it goes unnoticed; it only makes an appearance in cases like yours when you try to position it against an element with a solid background colour that is supposed to be the same.
You may be able to resolve the issue by using a different image format. Try saving the image as a PNG. PNGs tend to be rendered more accurately between the browsers than jpegs, so that might be enough to solve your problem.
If that doesn't solve your problem, you could try using PNGs alpha transparency feature to produce an image with a fade to transparent at the edge, and then overlap the background colour behind it. This will definitely give you a smooth transition, but is a bit more technical, so harder to achieve. It will also give you problems with older versions of IE (IE6 for sure, I think you'll be okay with IE7), as they had some major bugs with PNG transparency. (If this is an issue for you, there are work-arounds for this; google IEPNGFix for more)
I am building a website with a TON of png-24 files that have transparent background. In IE 6 they obviously aren't displayed correctly, so I need some sort of reliable, good solution that will fix the PNG problem in IE and require little work and be reliable. Any good ideas?
For IE6 transparency I follow a personal flow:
1. If there is just one or two PNG images (like a logo, or a normal image) I just use filter:
#selector {background:none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png', sizingMethod='crop');}
Problems: If applied to a link, it will no longer be clickable. Possibly apply to the h1#logo and have the a be transparent.
2. If I have a lot of 24-bit PNG files, or special use cases (repeating background, etc), I use DD_belatedPNG
IMPORTANT FOR IE7 + IE8: You cannot animate or combine the filter:alpha (which is used for overall opacity on an element in IE and also used by jQuery to set opacity) property with 24-bit transparent PNG images. It changes it to look like 8-bit transparency, with everything that is not 100% opaque or transparent taking on a black background.
Here are a few good png fixes for ie6:
http://labs.unitinteractive.com/unitpngfix.php
http://www.twinhelix.com/css/iepngfix/
There are a lot IE PNG fixes on the net, which basically all work with the same technique. The older Internet Explorers do not support alpha in PNGs directly, but they all have a filter that does so. So writing the following code as part of a css of an object puts the image in the src to the background of the element:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png');
That way, you can easily display transparency in the Internet Explorer. However it's a lot easier to just get one of the png fix scripts (in JavaScript) and include it to your page inside of conditional comments. Then the script will make all your images working automatically.
We used Dean Edwards' IE7 for this. (So named before IE7 came out.) It's been good for that kind of thing.
There are currently many options to get this working. The standard is apply a DirectX filter through CSS to change make the PNG transparent in IE6. There are even scripts that will automatically do this when the webpage loads from an IE6 or less client.
http://www.google.com/search?btnG=1&pws=0&q=transparent+png+ie6
background image of type PNG is not transparent in ie6
See these posts
IE6 PNG transparency
How to use semi-transparent png images in IE6
This is a known issue in IE6: Transparent PNGs are only supported with some hacks.
This is a well-know bug. There are several workarounds, e.g. you can try using Google's ie7-js library.
I think you should definitely check the JQuery plugin called Supersleight, created by the guys on All In The Head & 24 Ways. They fixed some problems that comes with using AlphaImageLoader on IE6. From the 24 Ways page:
Works with both inline and background images, replacing the need for both sleight and bgsleight
Will automatically apply position: relative to links and form fields if they don’t already have position set. (Can be disabled.)
Can be run on the entire document, or just a selected part where you know the PNGs are. This is better for performance.
Detects background images set to no-repeat and sets the scaleMode to crop rather than scale.
The last one is the most important! Here are the links:
http://allinthehead.com/retro/338/supersleight-jquery-plugin
http://24ways.org/2007/supersleight-transparent-png-in-ie6
I had an issue once about png transparency in ie6 and what saved me was this:
http://allinthehead.com/retro/338/supersleight-jquery-plugin
hope it help.