<p>And just to add: it is called &quot;conflation&quot; artifact and this is what AntiGrain Geometry used the <a href="https://agg.sourceforge.net/antigrain.com/news/release_notes/v24.agdoc.html#toc0007" rel="nofollow noreferrer">compound shapes</a> rasterizer for, see:</p>
<p><a href="https://i.sstatic.net/ndTTc.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/ndTTc.png" alt="flash_rasterizer.png" /></a><br />
<sub>(source: <a href="http://agg.sourceforge.net/antigrain.com/demo/flash_rasterizer.png" rel="nofollow noreferrer">sourceforge.net</a>)</sub></p>
<p>Also, this is what NV Path Rendering claims to improve on:</p>
<p><a href="https://developer.download.nvidia.com/assets/gamedev/files/An_Introduction_to_NV_path_rendering.pdf" rel="nofollow noreferrer">An Introduction to
NV_path_rendering</a> (p. 67) or <a href="https://developer.download.nvidia.com/assets/gamedev/files/NV_path_rendering_FAQ.pdf" rel="nofollow noreferrer">NV_path_rendering FAQ</a> (#29).</p>

CC BY-SA 4.0
2016-01-06T21:44:45.993Z
2023-01-03T19:28:43.497Z
2023-01-03T19:28:43.497Z
Ecir Hana
<p>As as far as I can tell Illustrator has 2 or 3 different rasterizer. The onscreen preview is also prone to the same gap artifacting as your show though its tuned to minimize the effect. Your post seems to imply that your interested in the "<em>art optimized</em>" output.</p>

<p><a href="https://i.sstatic.net/tf7V4.png" rel="noreferrer"><img src="https://i.sstatic.net/tf7V4.png" alt="Art optimized versus screen preview of illustrator"></a></p>

<p><strong>Image 1</strong>: The different render modes of illustrator. Art optimized on left and hinted on right. Note that hinted shows slight background through. I dont have the new CC version so i can not show the third.</p>

<h3>How does art optimized work then</h3>

<p>Art optimized render mode is simply a un-antialiased image rendered at higher resolution, that has then been subjected to a <strong>box filtering</strong>. This is called super sampling which is costly. A box filter is simply the mean value of the samples in the box (pixel). This is indeed a similar technology as what the multi pixel filter used in your blender render uses. You can do the same thing manually and get same results. </p>

<p>In fact the render you get form illustrator is not really good. Its rendered in nonlinear space and not corrected for and you can get better results by swapping to higher order filters and computing in linear color space. All multi sample methods exhibit the same correct rendering (given enough samples even mathematically correct).</p>

<p><a href="https://i.sstatic.net/EfM61.png" rel="noreferrer"><img src="https://i.sstatic.net/EfM61.png" alt="enter image description here"></a></p>

<p><strong>Image 2</strong>: Multi pixel filtering, on left illustrator native 'Art Optimized'. On right same image at 16x16 pixels with multi lobed <a href="https://graphicdesign.stackexchange.com/questions/58162/how-to-draw-smooth-curved-shapes-in-illustrator/58175#58175">Lanczos filter in linear space</a>. Make sure your zoom is 1:1.</p>

<h3>The problem</h3>

<p>You have in fact come at terms with the real problem of current generation of onscreen renderers. They try to avoid multi sampling in favor for coverage calculation. But it simply can not work perfectly! Simply because alpha blend is:</p>

<p>$$c_0= c_1*\alpha + c_2*(1-\alpha)$$</p>

<p>When chained never reaches 0 when chained over semitransparent surfaces so background show trough. Also it does not know how the coverage is distributed so it will do it wrong. There's simply no way around this in a non-overlapping case like this. but if you allow the shapes overlap then the coverage calculation can be solved (See <a href="https://graphicdesign.stackexchange.com/questions/47342/space-between-2-paths-illustrator">here</a>).</p>

<p><strong>Other questions</strong> You can get same result in any other engine by just simply multisampling a non-antialiased image. You can not get the effect in on screen renderings without doing the overlap trick because they optimize for speed. Does illustrator use 3D? New CC might depends on your interpretation of what 3D is. This issue has nothing to do with 3D just about signal reconstruction methods so its not applicable to the question really.</p>

<ul>
<li>Related post <a href="https://computergraphics.stackexchange.com/questions/148/how-do-i-accurately-compute-coverage-of-overlapping-analytical-curves/150#150">how-do-i-accurately-compute-coverage-of-overlapping-analytical-curves</a></li>
</ul>

CC BY-SA 3.0
2015-12-24T21:34:26.007Z
BTW, for a more detailed look at why alpha blending doesn't "do the right thing" in cases like this, check out this paper: [Interpreting Alpha](http://jcgt.org/published/0004/02/03/) by Andrew Glassner.
Nathan Reed
CC BY-SA 3.0
2015-12-24T22:06:05.467Z
@NathanReed Will look thnx, but here it is simply that even if alpha worked right coverage wont know which parts cover the pixels and which not. So  Two layers with 50% alpha could mean fully opaque or only one layer visible because objects fill identical region we just dont know.
joojaa
CC BY-SA 3.0
2015-12-25T00:15:09.077Z
@joojaa Yes that's basically the point the paper is making: alpha can represent either opacity, coverage, or a combination of both. :)
Nathan Reed
CC BY-SA 3.0
2015-12-22T08:01:30.097Z
2015-12-22T09:11:41.397Z
2017-04-13T13:00:43.660Z
joojaa
<p>I am currently trying to understand a few things about vector graphics rasterization and the different ways it is implemented in various application types.</p>

<p>I tested and compared a few programs and noticed that there is a major difference in the way <strong>anti-aliasing</strong> behaves in the rasterization process. <strong>I am especially interested in the rendering behavior in Illustrator</strong>. You will see why by reading further.</p>

<p><img src="https://i.sstatic.net/J4ocR.png" alt="Base image"></p>

<p>For my testing, I used a really simple composition of triangles organized in an irregular hexagon with different colors.</p>

<h2>Vector graphics softwares</h2>

<p>Here are three renders of the same vector graphic in Illustrator, Affinity and Inkscape. (The image produced in Affinity and Inkscape are exactly the same.)</p>

<p><img src="https://i.sstatic.net/OCJdY.png" alt="Images rendered in popular graphic editing tools"></p>

<p>As you can see there is an undesired white line on each of the edges in the image rendered with Affinity and Inkscape. The anti-aliasing does not fill this area with a solid color which results in a small gap between adjacent shapes.</p>

<p>Although there is no gap in the Illustrator render, the edges of the shapes look as smooth as the Affinity render.</p>

<p>Here is an image showing the same area of each image upscaled.</p>

<p><img src="https://i.sstatic.net/6DBZt.png" alt="Upscale render showing anti-aliasing"></p>

<p>There is a very subtle difference between the two images. The Affinity render is a tiny bit smoother but it is almost impossible to see the difference when looking at the images in their original sizes.</p>

<h2>Browsers</h2>

<h3>SVG rendering</h3>

<p>Displaying the same graphics exported as SVG in a browser looks very similar to the raster image produced by both Affinity and Inkscape.</p>

<p><img src="https://i.sstatic.net/wUHjQ.png" alt="SVG file rendered in browser"></p>

<p>There are very tiny differences in edges anti-aliasing (that are not really worth showing here) but SVG rasterization in common browsers behaves pretty much the same.</p>

<h2>Decomposed render</h2>

<p>Testing Illustrator rendering a bit further, I tried splitting parts of my graphics and exporting them individually then composing them back together with a raster editing software.</p>

<p><img src="https://i.sstatic.net/iXbo2.png" alt="Image recomposition scheme"></p>

<p>In theory it would result in the same image as having it in a single piece, but the result is slightly different using this method.</p>

<p><img src="https://i.sstatic.net/qq7Gr.png" alt="Result of recomposed image"></p>

<p>As shown, when the two parts are composed, there is a tiny gap between them. Though it is more subtle, it is very similar to the graphic rendered in Affinity.</p>

<h2>Polygon rendering</h2>

<h3>Blender (3D software)</h3>

<p><img src="https://i.sstatic.net/oOwG9.png" alt="SVG in Blender viewport"></p>

<p>Blender allows you to import SVG files and manipulate them as curve objects. Here is the imported graphic shown in the 3D viewport. (By default material will be affected by lights in the scene. Checking the shadeless property in the material property panel will allow the shapes to be rendered with their original colors.)</p>

<p>Here is a render made of the SVG inside Blender.</p>

<p><img src="https://i.sstatic.net/2NZfe.png" alt="Actual render in Blender"></p>

<p>It does not have any gap between the triangles. Other 3D softwares are very likely to work the same way. So Blender behaves just like <strong>Illustrator</strong>, or does it? Maybe it is the other way around?</p>

<h2>The real questions</h2>

<ul>
<li>Which vector drawing library does Illustrator use behind the scenes?</li>
<li>Could it be possible that Illustrator makes use of a sort of 3D rendering engine? Is it open source? (probably not?)</li>
<li>Can any of the well known vector drawing libraries such as Cairo and Skia achieve the same rendering behavior? (No gap between shapes)</li>
<li>Is there any less known vector drawing library out there that has the same behavior?</li>
</ul>

CC BY-SA 3.0
2015-12-22T10:15:25.367Z
Others common renderers have this conflation problem too. See http://w3.impa.br/~diego/projects/GanEtAl14/sample.html?contour.
lhf
<antialiasing><vector-graphics>
What is Illustrator's vector rasterization process?
Gentle Moose
# What is Illustrator's vector rasterization process?

(Asked by: username_0 on 2015-12-22)

I am currently trying to understand a few things about vector graphics rasterization and the different ways it is implemented in various application types.

I tested and compared a few programs and noticed that there is a major difference in the way **anti-aliasing** behaves in the rasterization process. **I am especially interested in the rendering behavior in Illustrator**. You will see why by reading further.

![Base image](https://i.sstatic.net/J4ocR.png)

For my testing, I used a really simple composition of triangles organized in an irregular hexagon with different colors.

## Vector graphics softwares

Here are three renders of the same vector graphic in Illustrator, Affinity and Inkscape. (The image produced in Affinity and Inkscape are exactly the same.)

![Images rendered in popular graphic editing tools](https://i.sstatic.net/OCJdY.png)

As you can see there is an undesired white line on each of the edges in the image rendered with Affinity and Inkscape. The anti-aliasing does not fill this area with a solid color which results in a small gap between adjacent shapes.

Although there is no gap in the Illustrator render, the edges of the shapes look as smooth as the Affinity render.

Here is an image showing the same area of each image upscaled.

![Upscale render showing anti-aliasing](https://i.sstatic.net/6DBZt.png)

There is a very subtle difference between the two images. The Affinity render is a tiny bit smoother but it is almost impossible to see the difference when looking at the images in their original sizes.

## Browsers

### SVG rendering

Displaying the same graphics exported as SVG in a browser looks very similar to the raster image produced by both Affinity and Inkscape.

![SVG file rendered in browser](https://i.sstatic.net/wUHjQ.png)

There are very tiny differences in edges anti-aliasing (that are not really worth showing here) but SVG rasterization in common browsers behaves pretty much the same.

## Decomposed render

Testing Illustrator rendering a bit further, I tried splitting parts of my graphics and exporting them individually then composing them back together with a raster editing software.

![Image recomposition scheme](https://i.sstatic.net/iXbo2.png)

In theory it would result in the same image as having it in a single piece, but the result is slightly different using this method.

![Result of recomposed image](https://i.sstatic.net/qq7Gr.png)

As shown, when the two parts are composed, there is a tiny gap between them. Though it is more subtle, it is very similar to the graphic rendered in Affinity.

## Polygon rendering

### Blender (3D software)

![SVG in Blender viewport](https://i.sstatic.net/oOwG9.png)

Blender allows you to import SVG files and manipulate them as curve objects. Here is the imported graphic shown in the 3D viewport. (By default material will be affected by lights in the scene. Checking the shadeless property in the material property panel will allow the shapes to be rendered with their original colors.)

Here is a render made of the SVG inside Blender.

![Actual render in Blender](https://i.sstatic.net/2NZfe.png)

It does not have any gap between the triangles. Other 3D softwares are very likely to work the same way. So Blender behaves just like **Illustrator**, or does it? Maybe it is the other way around?

## The real questions

* Which vector drawing library does Illustrator use behind the scenes?
* Could it be possible that Illustrator makes use of a sort of 3D rendering engine? Is it open source? (probably not?)
* Can any of the well known vector drawing libraries such as Cairo and Skia achieve the same rendering behavior? (No gap between shapes)
* Is there any less known vector drawing library out there that has the same behavior?

**Tags:** antialiasing, vector-graphics

> **Comments:**
> **username_1**: Others common renderers have this conflation problem too. See http://w3.impa.br/~diego/projects/GanEtAl14/sample.html?contour.  

---

## 2 answers

### Answer by username_3 on 2015-12-22. Score: 13 | Accepted answer

As as far as I can tell Illustrator has 2 or 3 different rasterizer. The onscreen preview is also prone to the same gap artifacting as your show though its tuned to minimize the effect. Your post seems to imply that your interested in the "*art optimized*" output.

[![Art optimized versus screen preview of illustrator](https://i.sstatic.net/tf7V4.png)](https://i.sstatic.net/tf7V4.png)

**Image 1**: The different render modes of illustrator. Art optimized on left and hinted on right. Note that hinted shows slight background through. I dont have the new CC version so i can not show the third.

### How does art optimized work then

Art optimized render mode is simply a un-antialiased image rendered at higher resolution, that has then been subjected to a **box filtering**. This is called super sampling which is costly. A box filter is simply the mean value of the samples in the box (pixel). This is indeed a similar technology as what the multi pixel filter used in your blender render uses. You can do the same thing manually and get same results.

In fact the render you get form illustrator is not really good. Its rendered in nonlinear space and not corrected for and you can get better results by swapping to higher order filters and computing in linear color space. All multi sample methods exhibit the same correct rendering (given enough samples even mathematically correct).

[![enter image description here](https://i.sstatic.net/EfM61.png)](https://i.sstatic.net/EfM61.png)

**Image 2**: Multi pixel filtering, on left illustrator native 'Art Optimized'. On right same image at 16x16 pixels with multi lobed [Lanczos filter in linear space](https://graphicdesign.stackexchange.com/questions/58162/how-to-draw-smooth-curved-shapes-in-illustrator/58175#58175). Make sure your zoom is 1:1.

### The problem

You have in fact come at terms with the real problem of current generation of onscreen renderers. They try to avoid multi sampling in favor for coverage calculation. But it simply can not work perfectly! Simply because alpha blend is:

$$c\_0= c\_1\*\alpha + c\_2\*(1-\alpha)$$

When chained never reaches 0 when chained over semitransparent surfaces so background show trough. Also it does not know how the coverage is distributed so it will do it wrong. There's simply no way around this in a non-overlapping case like this. but if you allow the shapes overlap then the coverage calculation can be solved (See [here](https://graphicdesign.stackexchange.com/questions/47342/space-between-2-paths-illustrator)).

**Other questions** You can get same result in any other engine by just simply multisampling a non-antialiased image. You can not get the effect in on screen renderings without doing the overlap trick because they optimize for speed. Does illustrator use 3D? New CC might depends on your interpretation of what 3D is. This issue has nothing to do with 3D just about signal reconstruction methods so its not applicable to the question really.

* Related post [how-do-i-accurately-compute-coverage-of-overlapping-analytical-curves](https://computergraphics.stackexchange.com/questions/148/how-do-i-accurately-compute-coverage-of-overlapping-analytical-curves/150#150)

> **Comments:**
> **username_4**: BTW, for a more detailed look at why alpha blending doesn't "do the right thing" in cases like this, check out this paper: [Interpreting Alpha](http://jcgt.org/published/0004/02/03/) by Andrew Glassner.  
> **username_3**: @username_4 Will look thnx, but here it is simply that even if alpha worked right coverage wont know which parts cover the pixels and which not. So  Two layers with 50% alpha could mean fully opaque or only one layer visible because objects fill identical region we just dont know.  
> **username_4**: @username_3 Yes that's basically the point the paper is making: alpha can represent either opacity, coverage, or a combination of both. :)  

---

### Answer by username_2 on 2016-01-06. Score: 5

And just to add: it is called "conflation" artifact and this is what AntiGrain Geometry used the [compound shapes](https://agg.sourceforge.net/antigrain.com/news/release_notes/v24.agdoc.html#toc0007) rasterizer for, see:

[![flash_rasterizer.png](https://i.sstatic.net/ndTTc.png)](https://i.sstatic.net/ndTTc.png)  
(source: [sourceforge.net](http://agg.sourceforge.net/antigrain.com/demo/flash_rasterizer.png))

Also, this is what NV Path Rendering claims to improve on:

[An Introduction to
NV\_path\_rendering](https://developer.download.nvidia.com/assets/gamedev/files/An_Introduction_to_NV_path_rendering.pdf) (p. 67) or [NV\_path\_rendering FAQ](https://developer.download.nvidia.com/assets/gamedev/files/NV_path_rendering_FAQ.pdf) (#29).


---

