Getting Started with SVGStud.io

This tutorial offers a brief tour of the main features of SVGStud.io. You will learn how to search the existing collection, generate new artwork, edit SVGs in the browser and access the API.

Example Workflow

1. Browse the Gallery – start by exploring the Gallery to get an overview of existing SVGs, ordered by recency, popularity, or aesthetics. If no existing SVG fits your needs, move on to a targeted search.
2. Search – open Semantic Search and enter a description of what you are looking for. Browse the returned results to find something close to your idea. A guided tour of the interface is available via the 🎓 button.
3. Open in Generator – click on any SVG to visit its detail page and select Generate to load it into the Generator. Add a prompt for your intended SVG and adjust the Detail and Style controls before generating new variants of the base SVG. A guided tour of the interface is available via the 🎓 button.
4. Bookmark & Download – on the preview page use the star icon to bookmark your favorite SVG and the download button to save it as an SVG.
5. Edit SVGs – send a chosen result to the Editor for manual tweaks of the path or for adding colors.

Gallery

SVGStud.io's Gallery is an infinite-scroll view of all SVGs contained in SVGStud.io. Simply scroll through the SVGs, perfect for serendipity. The order can be switched between "random", "recent", "downloads" and "aesthetic". The gallery also allows you to filter by style:

• Default style Gallery
• Cartoon style Gallery
• Contour style Gallery
• Icon style Gallery
• Line art style Gallery
• Logo style Gallery
• Manga style Gallery
• Paper cut style Gallery
• Silhouette style Gallery

Moreover, the gallery can also be filtered by prompt. For instance, filtering for the prompt "pineapple and sunglasses" shows you the corresponding bundle.

Bundles

Browse through all SVG bundles contained in SVGStud.io. You can narrow the list by providing a bundle-name prefix. Bundles can also be filtered by style:

• Default style bundles
• Cartoon style bundles
• Contour style bundles
• Icon style bundles
• Line Art style bundles
• Logo style bundles
• Manga style bundles
• Paper Cut style bundles
• Silhouette style bundles

Click any displayed bundle to open a page with its details. You can download bundles as ZIP archives from this page or directly via /zips/{prompt}.zip.

SVG View

By clicking any of the displayed SVGs in Gallery or Bundle view, you will get to a separate page showing information regarding this SVG. Buttons allow downloading the SVG or generating code for embedding the SVG in other websites. Users can also bookmark SVGs using the star icon. Bookmarked items appear in the bookmark panel and on the personal profile page (if logged in). Moreover, the respective SVG can be used as starting point for searching similar SVGs via the semantic search, or as image prompt for the AI SVG Generator, where they can be further edited based on text prompts and (optional) image masks. At the bottom of the page, a preview of the 25 most similar SVGs is displayed.

Semantic Search

Semantic Search allows you to search for SVGs in SVGStud.io that best match a text-query. Note that this checks for similarity of the search query to the SVG's actual content, not only its prompt. For instance, searching for "chimpanzee" will also return SVGs that have been generated from prompts such as "monkey", "gibbon", or "orangutan". A guided tour of the interface is available via the 🎓 button. Advanced controls include:

• increasing the aesthetics weight. This allows you to obtain results in a different order such that top-ranked results are considered more aesthetic according to the internal aesthetics heuristic of SVGStud.io.
• Near duplicate removal can optionally be activated by checking "deduplication".

Besides text search, we also support image search, where a user can search for SVGs most similar to an image. Image-based search works with any image—even sketches—so a rough drawing of an "arrow through a heart" will find matching SVGs.

Search results populate the field with matching SVGs, which you can bookmark, refine, generate from, or view in detail.

AI SVG Generator

If you do not find an SVG that matches your needs in the database of SVGStud.io, give our AI SVG Generator a try. The generator allows fine-grained SVG generation based on text prompts, guidance images, and inpainting of existing SVGs. Learn more about how our generator works in our building svgstud.io documentation. A guided tour explaining all controls of the Generator is launched by clicking the 🎓 button. See Tokens for usage limits and logging details.

Basic Usage

The generator supports Text-to-SVG, Image-to-SVG and SVG Inpainting. Use the drop-down menu next to the prompt field to switch modes. Image-to-SVG mode allows loading an existing image or SVG and optionally modifying it by drawing with a pencil, before generating a corresponding SVG. SVG Inpainting additionally allows drawing a mask to control which regions are modified.

The simplest way to get started with the AI SVG Generator is the Text-to-SVG mode. Here, the user can instruct the generator with a text prompt such as "friendly alien with smartphone". The number of generated SVGs can be controlled by the "Number of Samples" slider. Once the prompt, detail level and style (see below) have been chosen, the generator produces that number of SVGs. Note that each generated SVG counts toward your overall usage limits, so try prompts first with only a few samples.

Detail Level

By default, generated SVGs contain a medium level of details. However, the detail level can be varied manually, ranging from "minimal" over "low", "standard", "high" to "maximal". Some exemplary results for the different levels of detail are shown below:

Style

Similar to the detail level, the AI SVG Generator also allows selecting different styles for the generated SVGs:

• default
• cartoon style
• contour
• icon
• line art
• logo
• manga style
• paper cut
• silhouette

Image Prompting

Clicking the "Generate" button on any SVG loads it into the generator for further refinement. For instance, if an SVG generated for the concept "angry robot" with standard detail level contains too many details but the overall structure is as desired, you can load the SVG as image guidance, set the detail level to minimal, and generate again. This will produce a similar SVG with less detail (original on the left, reduced detail SVG on the right):

How closely the new SVGs stay to the original can be controlled by the "Flexibility" slider under the advanced options. We have set it to 0.95 for this example.

Another way of varying SVGs is to draw a mask directly into the image guidance. In this case, only the masked region will be regenerated while the rest remains unchanged. For instance, if a user is satisfied with the head of the "angry robot" but not with its body, they can draw a mask over the body and regenerate the SVGs.

Prompting Guide

SVGStud.io's SVG Generator utilizes Stable Diffusion XL with CLIP text encoding to transform textual descriptions into vector art. While the generator functions similarly to Stable Diffusion XL, certain aspects like style and detail level are controlled through dedicated drop-down menus, allowing you to focus your prompt on the core content and composition. Follow these steps for effective prompting:

1. Start with the Subject:
   Identify the main subject of your SVG image. Be clear and specific. For instance, instead of "a dog," use "a golden retriever puppy" or "a majestic eagle in flight".

2. Add Context and Scene Elements:
   Describe the environment or scene where the subject is located. This can include background elements, weather, time of day, or other contextual details. Example: "A golden retriever puppy playing in a grassy park with a bright sky".

3. Specify Attributes and Actions:
   Include any specific attributes or actions of the subject. If the subject should be doing something, specify that clearly. Example: "A majestic eagle soaring above snow-capped mountains".

4. Avoid Unnecessary Styling Instructions:
   Do not include style or detail level in your prompt. These are managed through the drop-down menus on SVGStud.io, allowing you to adjust the artistic style and level of detail independently of your textual input.

5. Be Concise but Descriptive:
   Keep your prompt clear and to the point. Too many unnecessary details can lead to confusing or muddled results. Focus on what's important for the image.

6. Experiment and Iterate:
   Refine your prompts based on the output. Experiment with different wordings or additional details to achieve the desired result.

Example Prompts:

• Simple Subject: "A lighthouse on a rocky shore"
  

• Detailed Scene: "A cozy cabin surrounded by pine trees under a starry night sky"
  

• Action-Oriented: "A dolphin leaping out of the ocean"
  

Summary:

Remember, the SVG Generator's power lies in its ability to interpret concise, descriptive prompts and translate them into vector art. By focusing on the core elements of your desired scene and utilizing the drop-down menus for style and detail, you can create high-quality SVGs efficiently.

Advanced Options

The generator exposes further parameters for fine-granular control. These correspond to fields of the /generate/ API endpoint:

• Iterations – number of diffusion iterations, trading speed for quality.
• Samples – how many SVGs to generate per request (1–8).
• Seed – controls random initialization to ensure reproducible results.
• Width – width of the generated SVG in pixels (256–1024).
• Height – height of the SVG in pixels (256–1024).

SVG Editor

SVG views offer an “Edit” button that opens a full-featured online SVG editor. It embeds a third-party editor allowing path manipulation, color changes, layer handling, and more. You can supply the URL of any SVG on SVGStud.io as a query parameter and modify it directly in your browser.

API Access

Developers can automate generation and retrieval tasks through a JSON-based REST API. Comprehensive documentation is available under api.html which loads our OpenAPI definition via Redoc. Endpoints cover image generation, semantic retrieval, token budget checks, and more. All API calls accept an optional token parameter to deduct the corresponding budget.

Example curl usage:

# Generate a new SVG from a text prompt
curl -X POST https://svgstud.io/generate/ \
     -H "Content-Type: application/json" \
     -d '{"prompt":"friendly alien with smartphone"}'

# Retrieve similar SVGs for a query
curl "https://svgstud.io/retrieve/?prompt=friendly+alien&n_results=5"

# Check your remaining token budget
curl "https://svgstud.io/token_budget/?token=YOUR_TOKEN"

Note that the parameters image_url and mask_url only accept paths on the current server (e.g. /svgs/<uid>.svg). Full URLs with an explicit host are rejected for security reasons, but data URLs are supported.

Usage

Signing in

SVGStud.io allows anonymous access to most features. Signing in via Huggingface unlocks a personal gallery with your past generations and bookmarked SVGs.

Tokens

In addition to signing in, SVGStud.io supports token-based authentication for API usage. A token corresponds to a generation budget.

• Each IP address receives a limited number of free generations per day.
• To exceed this limit or use the API extensively, request a trial token via form opened by the 🔑 button in the AI SVG Generator.
• Check your remaining budget at any time through the /token_budget/ endpoint.
• Each generated SVG reduces the budget by one. The number of requested samples is deducted from your token balance with every generation call.

Note: Provided inputs are logged and all generated SVGs become public, so avoid sensitive information.

Usage Conditions

Before exploring further, please read our usage conditions, which outline responsibilities and limitations when using SVGStud.io. The license page details how the code and generated graphics may be reused.