: Illustrator: Removing white borders from boxes after Create Object Map I'm trying to create an 8bit cave image in Illustrator for a fun little 404 page but am having trouble on export. The

Posted in: #AdobeIllustrator #Bitmap #Images #Svg

I'm trying to create an 8bit cave image in Illustrator for a fun little 404 page but am having trouble on export. The file in Illustrator looks like this screenshot:

However, when I export the image as a png, I see white boxes around each pixel of the image:

I exported the image as svg as well, and the white boxes also appear there. It seems like that's because each of the rect elements has a slight bit of space between them:

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 692 466">
<defs>
<style>
.cls-1 {
fill: #ffebb2 ;
}

.cls-2 {
fill: #ebd798 ;
}

.cls-3 {
fill: #cbb076 ;
}
</style>
</defs>
<title>cave</title>
<g>
<rect class="cls-1" x="681.97" y="455.87" width="10.03" height="10.13"/>
<rect class="cls-2" x="671.94" y="455.87" width="10.03" height="10.13"/>
<rect class="cls-2" x="661.91" y="455.87" width="10.03" height="10.13"/>
<rect class="cls-2" x="651.88" y="455.87" width="10.03" height="10.13"/>
<rect class="cls-3" x="641.86" y="455.87" width="10.03" height="10.13"/>
{...MORE SVG...}

I believe I could fix this problem with some scripting by giving each rect element a nice integer height and width and then 'snapping' each of those rects to a perfectly round position on the x, y axis. I would much prefer to fix the problem in Illustrator however, as I want to get better at it.

Does anyone know how I can remove the white boxes that surround each rect element in the exported svg? I tried Object -> Make Pixel Perfect but that made even larger white boxes around the exported rects. Any help others can provide would be very helpful!

10.03% popularity Vote Up Vote Down

: What graphic dimensions would allow it to be printed at the same size regardless of selected scale options? For standard letter-size paper in a basic printer, the user can select to Print Actual

@Debbie163

Posted in: #PrintDesign #Scale

2 Comments

: Problem with cutting outline of circle I've tried to cut the outline of a circle, by using the knife tool, the shaper tool, all of the pathfinder tools(for example: minus back), and I couldn't

@Debbie163

Posted in: #AdobeIllustrator #Pathfinder #Shapes

2 Comments

: Inkscape Stroke Does Not Follow Path Outline I'm somewhat new to vector graphics, but this is really baffling to me. When I make a shape, the lines are supposed to follow the path outline,

@Debbie163

Posted in: #Inkscape #Path

1 Comments

: Wall Decal Printable Area Measurements Issue I'm designing a Wall Decal to be printed and sticked on the outside of a shop; it's a Vinyl Sticker Decal. The client wants it to cover the all

@Debbie163

Posted in: #Measurement #PrintDesign

2 Comments

Login to post a comment!

3 Comments

Sorted by latest first Latest Oldest Best

@Nimeshi706

I can show two ways to do it.
These are described in the picture below.

10% popularity Vote Up Vote Down

@Sims5801359

Try aligning the vector boxes to pixel grid by selecting the entire thing is finding the "align to pixel grid" option. It may be the solution, or it may not.

10% popularity Vote Up Vote Down

@Rambettina927

After thinking about this for a moment, I realized those white boxes could be the result of the stroke style on the rect elements. I opened up my svg and added rect {stroke:red}; to the inline styles and sure enough I saw the whole grid light up:

<svg data-name="Layer 1" id="Layer_1" viewbox="0 0 692 466" xmlns="http://www.w3.org/2000/svg">
<defs>
<style>
rect {
stroke: red;
}

.cls-1 {
fill: #ffebb2 ;
}

This told me that the stroke styles were creating that grid effect. From there I realized that if I set the stroke attribute of each element to its fill color, the grid would go away, and sure enough it did:

<svg data-name="Cave" id="cave" viewbox="0 0 692 466" xmlns="http://www.w3.org/2000/svg">
<defs>
<style>
.cls-1 {
fill: #ffebb2 ;
stroke: #ffebb2 ;
}

.cls-2 {
fill: #ebd798;
stroke: #ebd798;
}

Here's the svg in Chrome:

I'd still like to know how to do this in Illustrator, but am happy to have worked it out.

10% popularity Vote Up Vote Down

Feed

: Illustrator: Removing white borders from boxes after Create Object Map I'm trying to create an 8bit cave image in Illustrator for a fun little 404 page but am having trouble on export. The

More posts by @Debbie163

: What graphic dimensions would allow it to be printed at the same size regardless of selected scale options? For standard letter-size paper in a basic printer, the user can select to Print Actual

: Problem with cutting outline of circle I've tried to cut the outline of a circle, by using the knife tool, the shaper tool, all of the pathfinder tools(for example: minus back), and I couldn't

: Inkscape Stroke Does Not Follow Path Outline I'm somewhat new to vector graphics, but this is really baffling to me. When I make a shape, the lines are supposed to follow the path outline,

: Wall Decal Printable Area Measurements Issue I'm designing a Wall Decal to be printed and sticked on the outside of a shop; it's a Vinyl Sticker Decal. The client wants it to cover the all

Login to post a comment!

3 Comments

Back to top | Use Dark Theme