PageSourceSearch

https://ximinng.github.io/SVGDreamerV2Project/

html ximinng.github.io collected 2026-10-03 10:11:40 UTC 21,406 bytes, 394 lines download raw bytes

1<!doctype html>
2<html lang="en">
3<head>
4    <!--Include Bootstrap’s JS-->
5    
5<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
6            integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
7            crossorigin="anonymous"></script>
7
8    <!-- Custom JS for this template -->
9    
9<script src="js/copyText.js"></script>
9
10    <!--Include Latex (optional)-->
11    <!--
11<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
11-->
12    <!--
12<script type="text/x-mathjax-config">-->
13    <!--    MathJax.Hub.Config({-->
14    <!--        tex2jax: {inlineMath: [['$', '$']]},-->
15    <!--        messageStyle: "none"-->
16    <!--    });-->
17    <!--</script>
17-->
18
19    <!--Include the icon fonts stylesheet-->
20    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
21    <!--Include Bootstrap’s CSS-->
22    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
23          integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ"
24          crossorigin="anonymous">
25    <!--Local Icon-->
26    <link rel="stylesheet" href="icons/style.css">
27    <!--Local Fonts-->
28    <link rel="stylesheet" href="fonts/avenir-next/stylesheet.css">
29    <link rel="stylesheet" href="fonts/segoe-print/stylesheet.css">
30    <!-- Custom styles for this template -->
31    <link rel="stylesheet" href="style.css">
32
33    <meta charset="utf-8">
34    <meta name="viewport" content="width=device-width, initial-scale=1">
35
36    <!-- Website Title -->
37    <title>SVGDreamer++: Advancing Editability and Diversity in Text-Guided SVG Generation</title>
38    <!-- The description that appears when you share the link -->
39    <meta property="og:description"
40          content="SVGDreamer++: Advancing Editability and Diversity in Text-Guided SVG Generation"/>
41    <!-- Used to display page descriptions in search results -->
42    <meta name="description" content="SVGDreamer, SVGDreamer++, SVGDreamerV2, SVG generation, text-to-svg, text2svg">
43    <!-- favicon -->
44    <link rel="icon" href="assets/favicon.svg" type="image/x-icon">
45</head>
46
47<body>
48<header class="container">
49    <hr>
50    <!-- Paper Title -->
51    <div class="container text-center">
52        <span class="title-font x-gradient-font">SVGDreamer++: Advancing Editability and Diversity in Text-Guided SVG Generation</span>
53    </div>
54    <hr>
55    <!-- author list -->
56    <div class="container author text-center">
57        <!-- authors -->
58        <div class="row gy-2">
59            <div class="col-12 col-md-2">
60                <a class="link" href="https://ximinng.github.io">Ximing Xing</a><sup>1</sup>
61            </div>
62            <div class="col-12 col-md-2">
63                <a class="link" href="https://yuqian1023.github.io">Qian Yu</a><sup>1 *</sup>
64            </div>
65            <div class="col-12 col-md-2">Haitao Zhou<sup>1</sup></div>
66            <div class="col-12 col-md-2">Chuang Wang<sup>1</sup></div>
67            <div class="col-12 col-md-2">
68                <a class="link" href="https://hellojing89.github.io">Jing Zhang</a><sup>1</sup>
69            </div>
70            <div class="col-12 col-md-2">
71                <a class="link" href="https://www.cs.hku.hk/people/academic-staff/dongxu">Dong Xu</a><sup>2</sup>
72            </div>
73        </div>
74        <!-- author organization -->
75        <div class="row mt-3">
76            <div class="col-12">
77                <sup>1</sup>Beihang University &nbsp;&nbsp;<sup>2</sup>The University of Hong Kong
78            </div>
79            <div class="col-12">
80                <sup>*</sup>Corresponding Author
81            </div>
82        </div>
83    </div>
84    <!--    &lt;!&ndash; paper status &ndash;&gt;-->
85    <!--    <div class="text-center" style="margin-top: 20px">-->
86    <!--        <h3>Paper status - Under Review</h3>-->
87    <!--    </div>-->
88    <!-- links -->
89    <div class="text-center">
90        <div class="row justify-content-md-center">
91            <div id="links">
92                <div class="col col-lg-2">
93                    <a id="paper" href="https://ieeexplore.ieee.org/document/10909425/">Paper</a>
94                </div>
95                <div class="col col-lg-2">
96                    <a id="arxiv" href="https://arxiv.org/abs/2411.17832">ArXiv</a>
97                </div>
98                <div class="col col-lg-2">
99                    <a id="code" href="https://github.com/ximinng/SVGDreamerV2">Code</a>
100                </div>
101                <div class="col col-lg-2">
102                    <a id="demo" href="https://huggingface.co/SVGRender">Space</a>
103                </div>
104                <div class="col col-lg-2">
105                    <a id="code" href="https://github.com/QianYu-Lab/PyTorch-SVGRender">Render</a>
106                </div>
107            </div>
108        </div>
109    </div>
110    <br>
111
112    <!-- teaser -->
113    <div class="text-center">
114        <figure class="figure">
115            <img src="assets/gallery_paper.png" class="figure-img img-fluid rounded"
116                 width="90%" height="auto"
117                 alt="SVGDreamer teaser">
118            <figcaption class="figure-caption">
119                Given a text prompt, SVGDreamer++ can generate a <i>variety</i> of vector graphics. SVGDreamer++ is a
120                versatile
121                tool that can work with various vector styles without being limited to a specific prompt suffix. We
122                utilize various colored suffixes to indicate different styles. The style is governed by vector
123                primitives.
124            </figcaption>
125        </figure>
126
127        <figure class="figure">
128            <img src="assets/editable_illustrate.png" class="figure-img img-fluid rounded"
129                 width="90%" height="auto"
130                 alt="SVGDreamer teaser">
131            <figcaption class="figure-caption">
132                Our proposed tool, SVGDreamer++, excels at generating editable vector graphics.
133            </figcaption>
134        </figure>
135    </div>
136
137    <!-- TL;DR -->
138    <div class="text-center" style="margin-top: 20px; font-size: 20px; font-weight: 500;">
139        <b>TL;DR:</b>
140        <b>SVGDreamer++</b> comprehensively improves the editability and visual generation quality of SVGDreamer.
141    </div>
142</header>
143<br>
144
145<main class="container">
146    <!-- Abstract -->
147    <div class="card border-0">
148        <div class="card-body x-gradient-block">
149            <h2 class="card-title text-center card-title-margin">Abstract</h2>
150            <p class="card-text">
151                Recently, text-guided scalable vector graphics (SVG) synthesis has demonstrated significant potential in
152                domains such as iconography and sketching. However, SVGs generated from existing Text-to-SVG methods
153                often lack editability and exhibit deficiencies in visual quality and diversity. In this paper, we
154                propose a novel text-guided vector graphics synthesis method to address these limitations.
155                To enhance the editability of output SVGs, we introduce a <b>Hierarchical Image VEctorization (HIVE)</b>
156                framework that operates at the semantic object level and supervises the optimization of components
157                within the vector object. This approach facilitates the decoupling of vector graphics into distinct
158                objects and component levels. Our proposed HIVE algorithm, informed by image segmentation priors, not
159                only ensures a more precise representation of vector graphics but also enables fine-grained editing
160                capabilities within vector objects.
161                To improve
162                the diversity of output SVGs, we present a <b>Vectorized Particle-based Score Distillation (VPSD)</b>
163                approach.
164                VPSD addresses over-saturation issues in existing methods and enhances sample diversity. A pre-trained
165                reward model is incorporated to re-weight vector particles, improving aesthetic appeal and enabling
166                faster convergence. Additionally, we design a novel <b>adaptive vector primitives control strategy</b>,
167                which
168                allows for the dynamic adjustment of the number of primitives, thereby enhancing the presentation of
169                graphic details. Extensive experiments validate the effectiveness of the proposed method, demonstrating
170                its superiority over baseline methods in terms of editability, visual quality, and diversity. We also
171                show that our new method supports up to six distinct vector styles, capable of generating high-quality
172                vector assets suitable for stylized vector design and poster design.
173            </p>
174        </div>
175    </div>
176    <br>
177
178    <!-- Online Demo -->
179    <!--    <div class="card">-->
180    <!--        <div class="card-body">-->
181    <!--            <h2 class="card-title card-title-margin">Online Demo</h2>-->
182    <!--            <hr class="body-hr"/>-->
183    <!--            <p class="card-text">-->
184    <!--                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ornare aliquet ipsum, ac tempus justo-->
185    <!--                dapibus sit amet. Suspendisse condimentum, libero vel tempus mattis, risus risus vulputate libero,-->
186    <!--                elementum fermentum mi neque vel nisl. Maecenas facilisis maximus dignissim. Curabitur mattis vulputate-->
187    <!--                dui, tincidunt varius libero luctus eu. Mauris mauris nulla, scelerisque eget massa id, tincidunt congue-->
188    <!--                felis. Sed convallis tempor ipsum rhoncus viverra. Pellentesque nulla orci, accumsan volutpat fringilla-->
189    <!--                vitae, maximus sit amet tortor. Aliquam ultricies odio ut volutpat scelerisque. Donec nisl nisl,-->
190    <!--                porttitor vitae pharetra quis, fringilla sed mi. Fusce pretium dolor ut aliquam consequat. Cras-->
191    <!--                volutpat, tellus accumsan mattis molestie, nisl lacus tempus massa, nec malesuada tortor leo vel quam.-->
192    <!--                Aliquam vel ex consectetur, vehicula leo nec, efficitur eros. Donec convallis non urna quis feugiat.-->
193    <!--            </p>-->
194    <!--            <div class="text-center">-->
195    <!--                <figure class="figure">-->
196    <!--                    <img src="./assets/online_demo.png" class="img-thumbnail figure-img img-fluid rounded"-->
197    <!--                         alt="online demo">-->
198    <!--                    <figcaption class="figure-caption">A caption for the above image.</figcaption>-->
199    <!--                </figure>-->
200    <!--            </div>-->
201    <!--        </div>-->
202    <!--    </div>-->
203    <!--    <br>-->
204
205    <!-- Video 1 -- video in modal -->
206    <!--    <div class="card">-->
207    <!--        <div class="card-body">-->
208    <!--            <h2 class="card-title card-title-margin">Video<small class="text-body-secondary">(3min)</small></h2>-->
209    <!--            <hr class="body-hr"/>-->
210
211    <!--            <div class="container text-center">-->
212    <!--                <div class="row">-->
213    <!--                    <div class="col">-->
214    <!--                        &lt;!&ndash; video teaser &ndash;&gt;-->
215    <!--                        <img src="./assets/video_teaser.png" class="img-thumbnail figure-img img-fluid rounded"-->
216    <!--                             alt="video teaser">-->
217    <!--                    </div>-->
218    <!--                </div>-->
219    <!--                <div class="row">-->
220    <!--                    <div class="col">-->
221    <!--                        &lt;!&ndash; Button trigger modal &ndash;&gt;-->
222    <!--                        <button type="button" class="btn btn-primary" data-bs-toggle="modal"-->
223    <!--                                data-bs-target="#staticBackdrop">-->
224    <!--                            Play Video-->
225    <!--                        </button>-->
226
227    <!--                        &lt;!&ndash; Youtube in Modal &ndash;&gt;-->
228    <!--                        <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false"-->
229    <!--                             tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">-->
230    <!--                            <div class="modal-dialog modal-xl">-->
231    <!--                                <div class="modal-content">-->
232    <!--                                    <div class="modal-header text-center">-->
233    <!--                                        <h1 class="modal-title fs-5" id="staticBackdropLabel">-->
234    <!--                                            <u>Short presentation</u>(3min)-->
235    <!--                                        </h1>-->
236    <!--                                        <button type="button" class="btn-close" data-bs-dismiss="modal"-->
237    <!--                                                aria-label="Close"></button>-->
238    <!--                                    </div>-->
239    <!--                                    <div class="modal-body">-->
240    <!--                                        <div class="embed-responsive embed-responsive-16by9" style="text-align:center">-->
241    <!--                                            <iframe class="embed-responsive-item text-center"-->
242    <!--                                                    src="https://www.youtube.com/embed/j20MBc1hWGQ"-->
243    <!--                                                    frameborder="0"-->
244    <!--                                                    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"-->
245    <!--                                                    style="width:100%; height: 60em; clip-path:inset(1px 1px);"-->
246    <!--                                                    allowfullscreen></iframe>-->
247    <!--                                        </div>-->
248    <!--                                    </div>-->
249    <!--                                    <div class="modal-footer">-->
250    <!--                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close-->
251    <!--                                        </button>-->
252    <!--                                    </div>-->
253    <!--                                </div>-->
254    <!--                            </div>-->
255    <!--                        </div>-->
256    <!--                    </div>-->
257    <!--                </div> &lt;!&ndash; end row&ndash;&gt;-->
258    <!--            </div> &lt;!&ndash; end container&ndash;&gt;-->
259    <!--        </div>-->
260    <!--    </div>-->
261    <!--    <br>-->
262
263    <!-- Video 2 -- video in HTML -->
264    <!--    <div class="card">-->
265    <!--        <div class="card-body">-->
266    <!--            <h2 class="card-title card-title-margin">Video</h2>-->
267    <!--            <hr class="body-hr"/>-->
268    <!--            <div class="text-center">-->
269    <!--                <h4><u>Short presentation</u> (3min)</h4>-->
270    <!--                <div class="embed-responsive embed-responsive-16by9" style="text-align:center">-->
271    <!--                    <iframe class="embed-responsive-item text-center"-->
272    <!--                            src="https://www.youtube.com/embed/j20MBc1hWGQ"-->
273    <!--                            frameborder="0"-->
274    <!--                            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"-->
275    <!--                            style="width:80%; height: 650px; clip-path:inset(1px 1px);"-->
276    <!--                            allowfullscreen></iframe>-->
277    <!--                </div>-->
278    <!--            </div>-->
279    <!--        </div>-->
280    <!--    </div>-->
281    <!--    <br>-->
282
283    <!-- Methodology -->
284    <div class="card border-0">
285        <div class="card-body">
286            <h2 class="card-title card-title-margin">Methodology</h2>
287            <hr class="body-hr"/>
288            <p class="card-text">
289                🚀🚀 <b>SVGDreamer</b> upgrade to &rarr; <b style="color: #7e57c2">SVGDreamer++</b> <br>
290                1. <b>SIVE</b> upgrade to &rarr; <b>HIVE</b> + <b>Adaptive Vector Primitives Control</b> <br>
291                2. <b>VPSD</b> upgrade to &rarr; <b>VPSD</b> + <b>Adaptive Vector Primitives Control</b> <br>
292            </p>
293            <div class="text-center">
294                <figure class="figure">
295                    <img src="assets/method.png" class="figure-img img-fluid rounded" alt="method">
296                    <figcaption class="figure-caption">
297                        Overview of SVGDreamer++. <br>
298                        Our method consists of two phases: <b>Hierarchical image vectorization</b> (Sec. 4.1) and
299                        optimized synthesis of diverse SVGs via VPSD~(Sec. 3.2).
300                        And an additional module, called <b>Adaptive Vector Primitives
301                        Control</b> (Sec. 4.2), can be plugged into HIVE and VPSD in a
302                        plug-and-play way.
303                        In HIVE we introduced two stages of mask generation (as shown in the dotted box). Coarse mask
304                        generation guided by prompt words and fine-grained mask generation guided by attention
305                        distribution are used to decouple the components of vector graphics.
306                        The result from HIVE can be used as input for further generation of VPSD. We maintain $k$ sets
307                        of SVG parameters in VPSD for obtaining diverse results.
308                        In addition, the brown dotted box represents adaptive vector primitive control technology, which
309                        dynamically builds vector paths based on gradient graphs to improve the quality of SVG
310                        synthesis.
311                    </figcaption>
312                </figure>
313            </div>
314        </div>
315    </div>
316    <br>
317
318    <!-- Citation -->
319    <div class="card border-0">
320        <div class="card-body">
321            <h2 class="card-title card-title-margin">Citation</h2>
322            <p id="bibtex" class="card-text" style="border: #1a1c20 1px">
323                <code>
324                    @article{xing2025svgdreamer++,<br>
325                    &nbsp;&nbsp;title={Svgdreamer++: Advancing editability and diversity in text-guided svg generation},<br>
326                    &nbsp;&nbsp;author={Xing, Ximing and Yu, Qian and Wang, Chuang and Zhou, Haitao and Zhang, Jing and Xu, Dong},<br>
327                    &nbsp;&nbsp;journal={IEEE Transactions on Pattern Analysis and Machine Intelligence},<br>
328                    &nbsp;&nbsp;year={2025},<br>
329                    &nbsp;&nbsp;publisher={IEEE}<br>
330                    }
331                </code>
332            </p>
333
334            <!-- Bibtex (Button trigger modal)-->
335            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"
336                    onclick="copyText()">
337                Copy BibTex
338            </button>
339            <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
340                 aria-hidden="true">
341                <div class="modal-dialog">
342                    <div class="modal-content">
343                        <div class="modal-header">
344                            <h1 class="modal-title fs-5" id="exampleModalLabel">Bibtex</h1>
345                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
346                        </div>
347                        <div class="bibtex modal-body">
348                            Copy Success!
349                        </div>
350                        <div class="modal-footer">
351                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
352                        </div>
353                    </div>
354                </div>
355            </div>
356        </div>
357    </div>
358    <br>
359
360    <!-- Acknowledgements -->
361    <div class="card border-0">
362        <div class="card-body">
363            <h4 class="card-title card-title-margin">Acknowledgements</h4>
364            <p class="card-text">We thank <a href="https://ximinng.github.io/">Ximing Xing</a> for providing us with the
365                source code of the web page to help us
366                build the project home page.</p>
367        </div>
368    </div>
369    <br>
370
371</main>
372
373<footer class="footer">
374    <div class="container">
375        <div class="row align-items-center">
376            <!-- left layout -->
377            <div class="col-12 col-md-6 text-md-start text-center">
378                <p class="footer-title mb-0">SVGDreamer++: Advancing Editability and Diversity in Text-Guided SVG
379                    Generation</p>
380            </div>
381            <!-- right layout -->
382            <div class="col-12 col-md-6 text-md-end text-center">
383                <p class="footer-text mb-0">
384                    This webpage template was originally made by
385                    <a href="https://github.com/ximinng/GithubPages-Template" class="link-primary text-decoration-none">Ximing
386                        Xing</a>.
387                </p>
388            </div>
389        </div>
390    </div>
391</footer>
392
393</body>
394</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.