Bezier Curves Approximation of Triangularized Surfaces using SVG

Bezier Curves Approximation of Triangularized Surfaces using SVG
G. Messina1, E. Ingrà2, S. Battiato2, G. Di Blasi2
1
STMicroelectronics – AST Catania Lab - FAB. M6, Contrada Blocco Torrazze,
Casella Postale 421, 95121 Catania (Italy)
2
Università di Catania, D.M.I. Viale A. Doria 6, 95125 Catania (Italy)
ABSTRACT
This paper presents a technique to convert surfaces, obtained through a Data Dependent Triangulation, in Bezier Curves
by using a Scalable Vector Graphics File format. The method starts from a Data Dependent Triangulation, traces a map
of the boundaries present into the triangulation, using the characteristics of the triangles, then the estimated barycenters
are connected, and a final conversion of the resulting polylines in curves is performed. After the curves have been
estimated and closed the final representation is obtained by sorting the surfaces in a decreasing order. The proposed
techniques have been compared with other raster to vector conversions in terms of perceptual quality.
Keywords: SVG, Triangulation, Bezier curves.
I. INTRODUCTION
The SVG standard ([5], [9], [10]) allows representing complex graphical scenes by a collection of graphic vectorialbased primitives, offering several advantages with respect to classical raster images such as: scalability, resolution
independence, etc.. SVG format could find useful application in the world of mobile imaging devices, where typical
camera capabilities should match with limited color/size resolutions displays.
The DDT has been applied to approximate local pixel neighborhood by triangles ([6], [13]). The DDT replaces the input
image with a set of triangles according to a specific cost function able to implicitly detect the edge details. The overall
perceptual error is then minimized choosing a suitable triangulation. On the other hand the DDT is strictly connected to
the original pixels positions; therefore the number of actual triangles is larger than the number of pixels. This
triangulation could be directly managed by SVG primitives. Although the quality achieved in this way is rather good
the size of the resulting files may be very large.
Once the triangulation has been performed the algorithm extracts from the DDT only the triangles that are not
equilateral or the equilateral triangles having nearest neighbours with a different colour. In that way, only the
boundaries have been considered; then the triangles have been synthesized as single points using their estimated
barycenters. These barycenters have been connected together by following the boundaries along the wind rose
directions: by first the outer boundaries are connected together, and then the inner boundaries are processed, until the
whole triangle set has been processed. After the areas have been created, the conversion to Bezier Curves is performed.
The points found in the previous step have been used as control points and new points are created as contour points. A
simplification of the curves is then applied by removing intermediate useless points.
Finally the resulting surfaces are sorted using an approximation of the area and saved in SVG format. This operation is
necessary because the SVG viewer shows the last layer in foreground, thus the bigger areas must be put in background.
The proposed technique has been compared with other raster to vector conversion methods ([1], [4]) and software ([7],
[12]) showing good performances mainly in terms of both perceptual and measured quality.
II. SVG - SCALABLE VECTOR GRAPHICS
SVG standard is a World Wide Web Consortium (W3C) recommendation designed for many purposes (e.g. advertising,
clip art, business presentations, etc.) also using advanced features like animation and filter effects. The language
describes 2D-graphics and graphical applications in XML, and is mainly devoted to a series of application where
scalability in terms of output resolution, color spaces, and available bandwidth is required.
The core of the current SVG developments is the version 1.1. Actually the SVG 1.2 specification is under development
and available in draft form. SVG Mobile Profiles (Basic and Tiny) targeted to resource-limited devices, are part of the
3GPP platform for third generation mobile phones. Finally SVG Print is a set of guidelines to produce final-form
documents in XML suitable for archiving and printing. SVG is a drawing tool featuring all the basic vector graphics
primitives. These include lines, polylines, polygons, rectangles, circles, and ellipses. Beside these basic shapes, SVG
also supports paths, including cubic and quadratic Bezier curves and elliptical arcs. It is also possible to specify
transformations on objects either as an additive instruction (scale, translate, rotate, or skew) or as a global
transformation matrix. Major details can be found directly at the W3C site [10] whereas in ([5], [9]) the overall SVG
capabilities are summarized.
It is also possible to find an exhaustive overview of the recent SVG development and related applications in
proceedings of SVG Open Conference [11].
III. DDT – DATA DEPENDENT TRIANGULATION
A triangulation is a partition of a two-dimensional plane into a triangles set. The triangulation techniques which try to
optimize the approximation of a particular function, also taking advantage from the information obtained from the codomain, are named Data Dependent Triangulation (DDT).
The optimum triangulation research, by considering a fixed criterion, is a not well posed problem; however good results
are obtained by considering a locally optimal criterion. A triangulation is called “Optimal” if it is impossible to obtain a
further improvement by swapping any edges.
The algorithm introduced by Lawson [8] is an iterative technique able to find a locally optimal triangulation. This
approach inspects all the inner edges and exchanges those that reduce the total cost of the triangulation; the algorithm
iterates the process until the total cost is still unchanged.
Another approach, based on Lawson’s method and developed by Yu, Morse and Sederberg [13], has been used as
starting point to develop the DDT technique applied ([2], [3]):
1. Every pixel of the image is split into two triangles by using the diagonal with the lowest cost;
2. The obtained triangulation is furthermore adapted to the image data by executing step 3 in an iterative process,
which is stopped when a locally optimal triangulation is reached;
3. If the polygon formed by adjacent triangles is convex, the following look-ahead step is achieved:
a. If the exchange introduces a reduction of the edges cost sum, then the diagonals are swapped;
b. Otherwise, for every edges Ei of the polygon, with i=2..5, if the exchange of E1 with its opposite diagonal
E1’, and the simultaneous swapping of the edge Ei with its opposite diagonal Ei’ decrease the costs of the
edges of the polygon and the costs of the edges E6,…, E13 of the adjacent triangles, then both exchanges are
achieved (See Figure 1).
E7
E6
E8
E2
E3
E1
E’2
E9
E’1
(a)
E13
E5
E12
E10
E4
(b)
(c)
E11
Figure 1 - Example of look-ahead (a) Initial configuration, (b) Exchange of E1 with the opposite diagonal E’1. (c) Simultaneous
exchange of E1 with E’1 and E2 with E’2.
To estimate the triangulation, the optimality criterion is fixed using the following cost function:
Cost ( E ) = ∇P1 ⋅ ∇P2 − ∇P1 ⋅ ∇P2
(1)
where E is a common edge of two triangles and ∇Pi = (ai ,bi ) are the gradient of the planes Pi, that are the interpolating
linear functions of the triangles. In our case, to further speed-up the overall process we used the following
approximation:
cost( e ) = ( a1 + b1 ) ⋅ ( a2 + b2 ) − ( a1 ⋅ a2 + b1 ⋅ b2 )
(2)
that is cost effective. Such cost function is similar to the simplified cost function used in [6] to describe the roughness of
triangulated terrain (Sobolev seminorm). The global triangulation cost is summarized in:
cost ( T ) =
∑
∀ t1 ,t 2 contiguous in T
[( a
1
)(
)
]
+ b1 ⋅ a 2 + b2 − (a1 ⋅ a 2 + b1 ⋅ b2 )
(3)
Each triangle can be easily remapped into a SVG representation in the following way:
<path d="M x1 y1 L x2 y2 L x3 y3 Z" stroke="#FFFFFF" fill="#FFFFFF"/>
where x1,y1, x2,y2, x3,y3 are the vertex coordinates (xi,yi for further vertices), and #FFFFFF is the filling color.
The generalization to RGB images is simply obtained, replacing #FFFFFF with #RRGGBB, where RR, GG, BB are
respectively the hex representation of the red, green and blue mean value inside the considered triangle.
IV. BEZIER CURVES
Bézier curves are named after their inventor, Dr. Pierre Bézier. Bézier was en engineer with the Renault car company
and set out in the early 1960’s to develop a curve formulation which would lend itself to shape design. Bézier Curves
consist of two endpoints and zero or more control points. With very few control points, it is possible to create complex
curves for computer graphics. Bézier Curves take up very little memory to store and they have other useful properties.
Normally, addition of two points is undefined. If we just add the coordinates together, the result will have no
geometrical meaning. However, it is possible to add points together, if we add coefficients with an extra condition: the
sum of the coefficients should be 1. This result is important, because basically Bezier curves is a weighted sum of
points. So, if we have two points P1 and P2, the sum
1
1
P = P1 + P2
2
2
is always defined and won't change if we change the origin. In this case the sum will be the point P in the middle
between P1 and P2. To better understand Bézier Curves, the Bernstein polynomial must be introduced. The Bernstein
polynomial is defined as:
⎛n⎞
Bkn (t ) = ⎜⎜ ⎟⎟t k (1 − t ) n − k
⎝k ⎠
The parameter t will be in the range [0, 1] and the polynomial will have a maximum when t=k/n . Additionally, the sum
n
Bkn (t ) = 1
∑
k =0
for every t, which makes Bernstein polynomials suitable for addition of points.
A Bézier Curve is made up by two or more control points which determine how the curve looks like. A Bézier Curve
with control points P0 ... Pn is defined as:
n
b(t ) = ∑ Bkn (t ) Pk
k =0
where the parameter t is in the interval [0,1]. Because of the properties of the Bernstein polynomial, we see that b(0) =
P0 and b(1) = Pn.
But generally, b(t) ≠ P1 ≠ ... ≠ Pn-1, i.e. the Bézier curve only touches the first and the last point.
Bézier are nothing but polynomial in two dimensions. Consider the example of degree n=2:
2
b(t ) = ∑ Bk2 (t ) Pk =
k =0
⎛ 2⎞ 0
⎛ 2⎞
⎛ 2⎞
⎜⎜ ⎟⎟t (1 − t ) 2−0 ⋅ P0 + ⎜⎜ ⎟⎟t 1 (1 − t ) 2−1 ⋅ P1 + ⎜⎜ ⎟⎟t 2 (1 − t ) 2− 2 ⋅ P2 =
⎝ 0⎠
⎝1⎠
⎝ 2⎠
(1-t)2· P0 + 2t(1-t)· P1+ t2· P2 .
So, the Bézier curve was just a polynomial curve of degree 2. Generally, a Bézier curve with n control points is a
polynomial curve of degree n-1. For example, this guarantees that the Bézier curve can be derived infinitely many
times.
Here are some properties of Bézier curves that are very useful
Convex hull: The Bézier curve is always contained within the convex hull of its control points. This is extremely useful
for collision detection, because a bounding box to the Bézier curve's control points can be created very fast. If the
bounding box of two curves overlaps, more precise (and slower) methods can be used to refine the collision detection.
Affine invariance: If we map every point on the Bézier curve with an affine map, the resulting points also form a
Bézier curve. This is extremely useful in computer graphics, because if we have a curve in 3D-space and need to project
it on a surface, the only thing we have to do is to project each control point. The same goes for rotation, mirroring,
skewing etc.
Local control: If we change a control point, the curve will mostly change around that control point. The other parts of
the curve will change very little. This is one reason Bézier curves are used in CAD. If you change one control point a
little, you don't want the whole drawing to change. Note that even if most parts of the curve don't change much, every
point on the curve change a little, which is why splines were invented. The B-Splines or Bézier splines are a succession
of Bézier curves connected together.
In SVG the Bèzier curves are defined by using the path tag and the C and Q commands, used rispectively in case of
third degree curves or second degree curves. The syntax of a quadratic curve is defined as follows:
<path d="M x0 y0 Q x1 y1 x2 y2" stroke="#FFFFFF" fill="#FFFFFF"/>
where x0,y0 is the starting point P0; x1,y1 is the control point P1 and x2,y2 represents the final point Pf of the curve.
Figure 2.a. Example of Quadratic Bézier Curve; SVG
syntax description: <path d="M 100,200 Q 120,130
230,200" stroke=blue fill=none />
Figure 2.b. Example of Quadratic Bézier Curve using
smooth connection; SVG syntax description: <path d="M
100,100 Q 120,30 150,100 T 230,100" fill=none
stroke=black />
By using B-Spline in SVG the T command has been added to permit the connection of two quadratic curves (as
described in Figure 2.b where the control points are underlined by using red dot lines).
The Cubic Bézier Curve in SVG are respresented by using the followin syntax (two control points are necessary):
<path d="M x0 y0 C x1 y1 x2 y2 x3 y3" stroke="#FFFFFF" fill="#FFFFFF"/>
where x0,y0 is the starting point P0; x1,y1 is the first control point P1; x2,y2 is the second control point P2 and x3,y3
represents the final point Pf of the curve.
Figure 3.a. Example of Cubic Bézier Curve; SVG
syntax description: <path d="M 50 150 C 150 350 150
50 300 150" style="stroke:black;fill:none;"/>
Figure 3.a. Example of Cubic Bézier Curve using
smooth connection; SVG syntax description: <path
d="M 50 250 C 150 400 250 50 280 250 S 310 150 350
250" style="stroke:blue;fill:none;"/>
By using B-Spline in SVG the S command has been added to permit the smooth connection of two cubic curves (as
described in Figure 3.b).
It is possible to obtain much more complicated curves by adding several control points to the curve, as described in the
following example.
Figure 4. Example of Cubic Bézier Curve using several control points to obtain a closed curve; SVG syntax
description: <path d="M 200 200 Q 300 100 400 200 500 300 450 400 400 500 300 500 200 500 150 400 100 300
200 200" stroke ="#000000" fill= "none"/>.
V. APPROACH DESCRIPTION
The approach consists of three phases: the conversion of the input image from bitmap to Data Dependent triangulation;
extraction of the border triangles and conversion to paths; conversion from path to closed curves and filling of the
areas.
The triangulation of the image is obtained using the aforementioned technique (chapter III). Once the triangulation has
been obtained and stored in SVG format, to perform a file size comparison, the border triangles are extracted. The
border triangles are defined as follows: a triangle of a DDT is defined as border triangle if 1) the triangle is not an
equilateral triangle, actually the initial DDT consists in a Delaunay Triangulation where the triangles are equilateral and
then they are modified in function of the discontinuities present along the border during the successive iterations; 2) if
the triangle is connected to a triangle with a different color. For this last class of triangles we have heuristically fixed a
threshold to stabilize a scale among different colors (this operation permits to exclude adjacent colors having smooth
luminance variations). In Figure 6 is illustrated a Data Dependent Triangulation and it is visible the differences among
the regular triangles and the border triangles.
To synthesize the triangles the barycenters have been taken into consideration. The barycenters have been estimated by
considering the interception point of the triangle medians. The barycenters of the boundaries triangles are then
connected together to form the outline path of the estimated figure. To achieve this operation the triangle are processed
as they have been stored into the DDT SVG file: from left to right and from top to bottom. Once a border triangle is
taken in consideration, during the path construction, the algorithm follows the wind rose and the color value to complete
and close the path. For example to complete the outline of the image illustrated in Figure 5.a, the path construction has
started from the left side of the picture and more precisely from the hairs of the cartoon character “Pumba”, and by
following the outline, has been closed returning to the starting point.
(a)
(b)
(c)
Figure 5. Example of outline reconstruction: a) First outline path extracted from the Borders
Triangles; b) All the remaining surfaces completed similarly; The final result after the simplification of
the Bézier Curves.
Then the points extracted from this first path construction are removed from the dataset and the inner boundaries are
taken into account and processed in the same way. In Figure 5.b the remaining extracted surfaces are illustrated.
After the path have been created a simplification processes starts: by first all the points belonging on the same lines are
removed; then the paths are converted into curves by considering the first point of the path as the starting point of the
Bézier Curves and the following point as control points. In our implementation we have used quadratic SVG Bézier
curves. To perform a further approximation during this step it is possible to remove control points by using a
suppression factor which fixes the number of control points to remove between the first and the last points. This can
drastically reduce the dimension of the final file but it could compromise the correspondences with the original bitmap
boundaries.
Finally the resulting surfaces are sorted using an approximation of the area and saved in SVG format. The
approximation is performed by estimating the rectangle containing the surface. This operation is necessary because the
SVG viewer shows the last layer in foreground, thus the bigger areas must be put in background.
VI. EXPERIMENTS AND CONCLUSIONS
The main objective of this work was to drastically reduce the file size of the DDT SVG images, in particular for the
cliparts.
Files Size
1000000
100000
10000
1000
100
10
1
Donal Duck
Pumba
Information
Goofy
Bitmap
DDT
Curves
1740
85577
139
SVGZ
56
4470
233
832
233179
11293
39940
129
9
53
48
4
22
Table 1. Transition from Bitmap to Compressed SVG file: Each bitmap
image has been drastically compressed from DDT to Curves. The plot
area is in logarithmic scale due to the large difference between DDT and
Bézier file size. The unit is Kbytes.
As it is visible in the Table 1 the objective has been clearly reached. The compression ratio between the final SVG file
and the DDT file is in the average of 900:1. This is due to the fact that the triangles have been completely removed and
the resulting paths have been simplified by the Bézier curves. Also the final simplification of the curves has furthermore
reduced the amount of points stored into the final SVG file. The SVGZ files have been obtained by using a Gzip
compressor (Standard for SVGz files).
For sake of comparison, SVG images obtained using our techniques (DDT and the proposed Bézier approximation)
have been compared to the results provided by the commercial software [12] (Vector EYE) and the free application in
[1] Autotrace and [7] KVec. In Figure 7 and 8 are illustrated the visual differences among the algorithms. At a first look
the Autotrace outperform all the other algorithms, but our approach take into consideration the dimension of the edges
and is much more closed to the original edge than Autotrace method. In effect the Autotrace approach. Our aim was the
compression of the original image with the minimum information loss. For the other algorithm: Kvec only convert the
original bitmap in a vectorial form by reproducing accurately the boundaries and thus maintaining the pixels form along
the borders; Vector Eye also perform a good approximation of the boundaries using curves but the approximation is to
close to the pixel form and also the algorithm has some problems with the reproduction of the colors.
Further experiments can be found in the SVG UniCT Group Page at http://svg.dmi.unict.it/.
Future works will investigate the conversion into Bézier curves of true colors images by using our previous works on
DDT-polygonization [2] and on Watershed Decomposed [4].
REFERENCES
[1] Autotrace – Convert bitmaps to vector graphics http://autotrace.sourceforge.net/
[2] S.Battiato, G. Di Blasi, G. Gallo, G. Messina, S. Nicotra, "SVG Rendering for Internet Imaging", CAMP05,
International Workshop on Computer Architecture for Machine Perception, Terrasini - Palermo, July 4-6 2005.
[3] S. Battiato, G. Gallo, G. Messina, SVG Rendering of Real Images using Data Dependent Triangulation, In Proc. of
ACM/SCCG2004, Spring Conference on Computer Graphic, 2004, Slovakia.
[4] S. Battiato, A. Costanzo, G. Di Blasi, G. Gallo, S. Nicotra, SVG Rendering by Watershed Decomposition, To
appear in Proceedings of SPIE Electronic Imaging 2005 - Internet Imaging VI - Vol.5670.3 - San Josè, USA,
January 2005;
[5] D. Duce, I. Herman, B. Hopgood, Web 2D Graphics File Format. Computer Graphics forum vol.21(1) (2002)
pages 43-64
[6] N. Dyn, D. Levin, S. Rippa, Data Dependent Triangulation for Piecewise Linear Interpolation, IMAJ. Numerical
Analysis, vol.10 (1990), pages 137-154.
[7] KVec, Raster Vector Conversion: http://www.kvec.de, 2004;
[8] C.L. Lawson, Software for C1 Surface Interpolation. Mathematical Software III, J.R. Rice, Academic Press, pages
161-194, New York, 1977
[9] A. Quint. Scalable Vector Graphics. IEEE Multimedia vol.3 (2003) pages 99-101
[10] Scalable Vector Graphics (SVG) – XML Graphics for the Web – http://www.w3c.org/Graphics/SVG (2003).
[11] SVG Open 2005 Conference and Exhibition, 4th Annual Conference on Scalable Vector Graphics
Enschede, The Netherlands - August 15-19, 2005, www.svgopen.com.
[12] Vector Eye – Raster to Vector Converter - http://www.siame.com/index.html (2003).
[13] X. Yu, B.S. Morse, T.W. Sederberg. Image Reconstruction Using Data Dependent Triangulation, Journal IEEE
Computer Graphics and Applications, vol.21 (3) (2001) pages 62-68.
Figure 6. Details of a DDT (“Goofy” image) from a Raster image: the left bitmap image has been converted to SVG using the
DDT. The central image shows the map of the triangulation (only the triangles have been drawn without colors); A particular has
been enlarged to better understand the Triangulation characteristics.
(a)
(b)
(c)
(d)
(e)
(f)
Figure 7. Details of the “Information” Raster Image converted to SVG using the different algorithms: (a) In the
Top the original BMP Image and bottom a zoomed detail; (b) The Proposed Method; (c) The DDT; (d) Kvec; (e)
Vector Eye (f) Autotrace.
(a)
(d)
(b)
(e)
(c)
(f)
Figure 8. Details of the “Donald Duck” Raster Image converted to SVG using the different algorithms: (a) In the
Top the original BMP Image and in the bottom a zoomed detail; (b) The Proposed Method; (c) The DDT; (d) Kvec;
(e) Vector Eye (f) Autotrace.