Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.
Sign up to join this community
I'm exporting out my filled paths(made using the arc tool) to svg using illustrator cs6. I get these shows lines where the path lines are; they appear even if I outline stroke the paths. In my export settings I convert to outline as I have text I also need to export.
SOLUTION: I checked the paths using the direct selection tool and saw their stroke was 0.5. I bumped it up to 1pt and it looks great. I had to undo all the live paint first. –
The seams between the parts of your shape are transparent.
A trivial solution just in this case would be getting rid of the seams by uniting the shapes of the same color. That's not a general solution, because other color combinations can exist elsewhere in the work.
When SVG:s are rasterized (it must be done at least in the web browser) there are done some antialiasing. That makes in many systems exactly fitting seams partially transparent. Illustrator does not have that error, but many others have. You must have some overlap to prevent the error everywhere. Having thin strokes is often enough. If the stroke is 2..3 pix wide when rendered for display, it surely is enough.
The following is a screenshot from Illustrator. There are 2 exactly fitting seams. Only nr.2 has a stroke. Nothing unwanted is visible in Illustrator. The blue lines are absolutely normal and vanish, when nothing is selected.
[![enter image description here][1]][1]
But when the SVG is taken into another program, the strokeless seam (=1) is faintly visible against the grey background. If the background were bright, the seam would appear like 1 pix wide stroke.
Allways adding the strokes to make overlaps is not a solution. This is the case, when some effect or flattening a shaded 3D model to 2D has automatically generated a huge number of small elements that have slightly differing colors. In Illustrator that happens when one expands a gradient, makes continuous looking blendings or expands a 3D effect.
Let's have an example:
This sorrowful pattern was faultless in Illustrator, but after exporting as SVG and opened in another program, it's useless.
What to do?
The extra lines are partially transparent. By adding something under the shape often makes the problem less offensive. That something can be a copy or a flat color that is near the colors in the shape. The following has a copy of the shape under it and shifted a little. One pixel sihift (when rendered) is enough.
The uderlying shape can be added already in Illustrator
Changing the alpha:
The transparency of the seam appears in the application that uses the SVG. The predescribed defect vanishes, if the alpha channel of the file can be disabled after the import in the application where the SVG is used. I tested it in GIMP. I painted white to the alpha channel and the extra lines disappeared.
