<div align="center">
  <a href="https://github.com/xieziyu/chatgpt-svg-creator-web">
    <img src="./src/assets/icon.png" alt="Logo" width="60" height="60">
  </a>
  <h3 align="center">ChatGPT SVG Creator</h3>
  <p align="center">
    A simple tool for creating, modifying, and previewing SVGs using ChatGPT
  </p>
  <p align="center">
    English | <a href="./README_CN.md">中文</a>
  </p>
</div>

<details open>
  <summary>Table of Contents</summary>
  <ul>
    <li><a href="#overview">Overview</a></li>
    <li><a href="#main-features">Main Features</a></li>
    <li><a href="#demo">Demo</a></li>
    <li><a href="#local-startup">Local Startup</a></li>
    <li><a href="#browser-extension">Browser Extension</a></li>
  </ul>
</details>

## Overview

With the ChatGPT SVG Creator tool, you can design and modify SVGs using natural language, offering basic previewing, importing, and exporting capabilities.

#### How to use

1. Configure OpenAI-related parameters in `Settings` before using.
2. Import an existing SVG or start from scratch.
3. For each subsequent conversation round, GPT will append the SVG previewed on the right as a prompt.
4. Export your work.

## Main Features

* Design and modify SVGs using natural language
* Basic SVG preview functionality
* Supports importing and exporting SVG source code and files

## Demo

![demo1](./docs/demo-1.png)

## Local Startup

1. clone this repo
2. `yarn && yarn start`

## Browser Extension

[ChatGPT SVG Creator](https://github.com/xieziyu/chatgpt-svg-creator)

A small tool for creating, modifying, and previewing SVGs using ChatGPT

ChartGPT SVG Creator

A small tool for creating, modifying, and previewing SVGs using ChatGPT

ChatGPT SVG Creator

Overview

How to use

Main Features

Demo

Local Startup

Browser Extension