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 <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 <!-- <!– paper status –>--> 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 <!-- <!– video teaser –>--> 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 <!-- <!– Button trigger modal –>--> 222 <!-- <button type="button" class="btn btn-primary" data-bs-toggle="modal"--> 223 <!-- data-bs-target="#staticBackdrop">--> 224 <!-- Play Video--> 225 <!-- </button>--> 226 227 <!-- <!– Youtube in Modal –>--> 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> <!– end row–>--> 258 <!-- </div> <!– end container–>--> 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 → <b style="color: #7e57c2">SVGDreamer++</b> <br> 290 1. <b>SIVE</b> upgrade to → <b>HIVE</b> + <b>Adaptive Vector Primitives Control</b> <br> 291 2. <b>VPSD</b> upgrade to → <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 title={Svgdreamer++: Advancing editability and diversity in text-guided svg generation},<br> 326 author={Xing, Ximing and Yu, Qian and Wang, Chuang and Zhou, Haitao and Zhang, Jing and Xu, Dong},<br> 327 journal={IEEE Transactions on Pattern Analysis and Machine Intelligence},<br> 328 year={2025},<br> 329 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.