Being towards death

Unique Advantages of SVG (Scalable Vector Graphics)#

• Lossless Scaling: Enlarges without distortion, suitable for any size device
• Editability: Elements can be edited and modified after generation
• Small File Size: Stored in code form, smaller than bitmap images
• Animation Support: Interactive and animated effects can be added

SVG format files store images as vectors, which are graphics composed of points, lines, curves, and shapes based on mathematical formulas. The graphics can be scaled infinitely without distortion, making them ideal for creating UI materials, logo icons, graphic illustrations, technical architecture diagrams, flowcharts, and other images that require lossless scaling. The files are essentially XML format text code that can be directly embedded in web pages or imported into various design tools.

General Template for SVG Prompts#

Task Definition#

Please create a professional SVG image for [theme/purpose].

Image Specifications#

• Size: [width x height, e.g., 750x1334px]
• Background: [background color/gradient requirements]
• Visual Style: [e.g., modern minimalist/cartoon/flat/isometric/ink wash, etc.]

Content Structure#

1. [Main content element 1, e.g., title area]
2. [Main content element 2, e.g., content area]
3. [Main content element 3, e.g., data display area]
   ...

Design Style#

• Color Scheme: [specify primary color/secondary color/accent color]
• Font Requirements: [font family/size/weight, etc.]
• Graphic Elements: [icons/decorations/visual elements to include]
• Layout Arrangement: [element arrangement/white space/alignment]

Technical Requirements#

• Animation Requirements: [whether animation/interactive effects are needed]
• Text Processing: [text layout requirements/truncation handling]
• Graphic Quality: [line thickness/rounded corners/shadow effects]
• Format Output: [ensure SVG code is complete/valid]

Special Requirements#

• [Other special notes or requirements]

Reference Materials#

[You can add reference materials/content]

We can see that this template covers all key aspects of SVG content creation, from content structure to technical implementation, from resource configuration to delivery requirements. This comprehensiveness ensures that the generated SVG content has no major omissions, thereby ensuring output determinacy ✅

With the template in hand, the usage is straightforward: just throw your requirements and needed functionalities along with the template to AI, and let AI generate specific prompts. Then you can use this prompt to generate SVG images.

SVG Image Type Guide#

Main Uses and Applicable Scenarios for SVG Image Types#

• Flowcharts: Display steps, decisions, and workflows (business process descriptions, algorithm descriptions)
• Technical Roadmaps: Show technology development paths and learning routes (career planning, skill system construction)
• Organizational Charts: Display hierarchical structures and reporting relationships (company structure, team structure)
• Mind Maps: Radially expand to represent conceptual relationships (brainstorming, knowledge organization)
• Infographics: Visually present data and information (report displays, market analysis)
• Gantt Charts: Display task timelines and progress (project management, progress tracking)
• Data Visualization Charts: Show data trends and comparative relationships (data analysis, scientific research)
• Network Topology Diagrams: Show connection relationships between system components (network architecture, system design)

Design Styles and Color Schemes#

How to Use This Template#

1. Choose the appropriate image type: Select from flowcharts, mind maps, infographics, etc., based on your needs.
2. Customize the design style: Choose a visual style and color scheme suitable for the content.
3. Clarify the content structure: Clearly list the main content elements you need to display in the SVG.
4. Add reference materials: Provide text content or images you want AI to reference.
5. Iterate and optimize: After generation, if needed, request AI to adjust specific parts.

Practical Case Study#

Case: Example Prompt for Xiaohongshu Style Knowledge Card#

Task Definition#

Please create a beautiful SVG card suitable for the Xiaohongshu platform for "Applications of SVG Images".

Image Specifications#

• Size: 750x1334px (portrait, suitable for mobile reading)
• Background: Soft gradient background from light pink to light blue
• Visual Style: Modern minimalist, high aesthetic, with design sense

Content Structure#

1. Title area: Highlight the theme name and subtitle
2. Introduction area: A one-sentence explanation of this technology
3. Core features area: List 3-4 key features with icons
4. Practical value area: Explain why this technology is important
5. Bottom information area: Place additional information such as open-source addresses

Design Style#

• Color Scheme: Primarily purple tones, with a white content area and soft color blocks
• Font Requirements: Modern sans-serif font, bold titles, clear font size hierarchy
• Graphic Elements: Use simple geometric shapes as decorations, circular or wavy embellishments
• Layout Arrangement: Card-style layout, with appropriate rounded corners and soft shadows in the content area

Technical Requirements#

• Text Processing: Ensure all text is clear and readable, with prominent titles
• Graphic Quality: Use rounded rectangles, appropriately add soft shadows to enhance depth
• Format Output: Complete SVG code, ensuring no errors

Special Requirements#

• Ensure information is presented clearly and understandably, suitable for novice users
• Overall design should have a "wow" visual effect
• Avoid including extreme words like "novice", "explosive", etc.

Complete SVG Code#

You can directly copy the following code and save it as a .svg file. Open it in a browser to see the final effect.

<svg width="750" height="1334" viewBox="0 0 750 1334" xmlns="http://www.w3.org/2000/svg" style="font-family: 'PingFang SC', 'Helvetica Neue', 'Arial', sans-serif;">
  <!-- === Definition Area: Gradients, Filters, and Other Reusable Elements === -->
  <defs>
    <!-- Background Gradient: From Pink to Blue -->
    <linearGradient id="bg-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#FFDDE1; stop-opacity:1" />
      <stop offset="100%" style="stop-color:#C8E6FF; stop-opacity:1" />
    </linearGradient>

    <!-- Title Text Gradient: From Dark Purple to Bright Purple -->
    <linearGradient id="title-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#6A11CB;" />
      <stop offset="100%" style="stop-color:#2575FC;" />
    </linearGradient>

    <!-- Soft Shadow Filter -->
    <filter id="soft-shadow" x="-20%" y="-20%" width="140%" height="140%">
      <feDropShadow dx="0" dy="4" stdDeviation="10" flood-color="#4A148C" flood-opacity="0.1" />
    </filter>
  </defs>

  <!-- === Background Layer === -->
  <rect width="750" height="1334" fill="url(#bg-gradient)" />

  <!-- Decorative Graphics -->
  <circle cx="100" cy="200" r="80" fill="#ffffff" opacity="0.15" />
  <circle cx="700" cy="550" r="120" fill="#A48BFF" opacity="0.1" />
  <circle cx="150" cy="1100" r="100" fill="#ffffff" opacity="0.2" />

  <!-- === Content Layer === -->
  <g id="content-group">
    <!-- 1. Title Area -->
    <g id="title-area" text-anchor="middle">
      <text x="375" y="160" font-size="64" font-weight="bold" fill="url(#title-gradient)">Applications of SVG Images</text>
      <text x="375" y="215" font-size="24" fill="#555768">The Magical World of Vector Graphics</text>
    </g>

    <!-- 2. Introduction Area -->
    <g id="intro-area">
      <rect x="50" y="270" width="650" height="90" rx="20" fill="#F8F4FF" filter="url(#soft-shadow)" />
      <text x="375" y="325" text-anchor="middle" font-size="22" fill="#6A5ACD">
        A lossless image format that makes your designs more flexible
      </text>
    </g>

    <!-- 3. Core Features Area -->
    <g id="features-area">
      <!-- Feature 1: Infinite Scaling -->
      <g>
        <rect x="50" y="400" width="650" height="150" rx="20" fill="white" filter="url(#soft-shadow)" />
        <!-- Icon: Scaling -->
        <g transform="translate(90, 445)" stroke="#8A2BE2" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round">
          <path d="M 0 20 L 20 0 M 12 0 L 20 0 L 20 8" />
          <path d="M 40 40 L 60 60 M 40 52 L 40 60 L 48 60" />
          <circle cx="30" cy="30" r="12" />
        </g>
        <text x="180" y="465" font-size="26" font-weight="600" fill="#333">Infinite Scaling</text>
        <text x="180" y="505" font-size="20" fill="#777">Enlarges without blurring, maintains HD sharpness</text>
      </g>

      <!-- Feature 2: Lightweight and Efficient -->
      <g>
        <rect x="50" y="580" width="650" height="150" rx="20" fill="white" filter="url(#soft-shadow)" />
        <!-- Icon: Feather -->
        <g transform="translate(90, 625)" stroke="#8A2BE2" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round">
          <path d="M30,0 Q60,30 30,60 Q0,30 30,0 Z" fill="#E6E6FA" />
          <path d="M30,0 Q60,30 30,60" />
          <path d="M20,15 L40,35" />
          <path d="M20,30 L40,50" />
        </g>
        <text x="180" y="645" font-size="26" font-weight="600" fill="#333">Lightweight and Efficient</text>
        <text x="180" y="685" font-size="20" fill="#777">Small file size, fast loading speed, beneficial for SEO</text>
      </g>

      <!-- Feature 3: Dynamic Interaction -->
      <g>
        <rect x="50" y="760" width="650" height="150" rx="20" fill="white" filter="url(#soft-shadow)" />
        <!-- Icon: Magic Wand -->
        <g transform="translate(95, 805)" stroke="#8A2BE2" stroke-width="3" fill="#E6E6FA" stroke-linecap="round" stroke-linejoin="round">
          <path d="M0,0 L30,30 M10,35 L5,40 M40,10 L35,5" />
          <polygon points="30,30 45,15 60,30 45,45" />
        </g>
        <text x="180" y="825" font-size="26" font-weight="600" fill="#333">Dynamic Interaction</text>
        <text x="180" y="865" font-size="20" fill="#777">Can be controlled by code to achieve cool animation effects</text>
      </g>
    </g>

    <!-- 4. Practical Value Area -->
    <g id="value-area">
      <rect x="50" y="950" width="650" height="190" rx="20" fill="#EDE7F6" filter="url(#soft-shadow)" />
      <text x="375" y="1000" text-anchor="middle" font-size="28" font-weight="bold" fill="#4A148C">Why is it so important?</text>
      <text x="80" y="1055" font-size="21" fill="#4A235A" line-height="1.6">
        <tspan x="80" dy="0">From dynamic logos, data visualization charts to personalized icons,</tspan>
        <tspan x="80" dy="1.4em">SVG is reshaping modern web design,</tspan>
        <tspan x="80" dy="1.4em">enhancing user experience across the board.</tspan>
      </text>
    </g>

    <!-- 5. Bottom Information Area -->
    <g id="footer-area" text-anchor="middle" fill="#6c757d">
      <!-- GitHub Icon -->
      <path fill="#6c757d" d="M346.5,1236.5c-3.3,0-6,2.7-6,6v15c0,3.3,2.7,6,6,6s6-2.7,6-6v-15C352.5,1239.2,349.8,1236.5,346.5,1236.5z M375,1225c-12.4,0-22.5,10.1-22.5,22.5c0,9.9,6.4,18.3,15.2,21.3c1.1,0.2,1.5-0.5,1.5-1.1c0-0.5,0-2,0-3.9c-6.2,1.3-7.5-3-7.5-3c-1-2.6-2.5-3.3-2.5-3.3c-2-1.4,0.2-1.3,0.2-1.3c2.2,0.2,3.4,2.3,3.4,2.3c2,3.4,5.2,2.4,6.4,1.8c0.2-1.4,0.8-2.4,1.4-3c-4.9-0.6-10.1-2.5-10.1-11c0-2.4,0.9-4.4,2.3-6c-0.2-0.6-1-2.8,0.2-5.9c0,0,1.9-0.6,6.1,2.3c1.8-0.5,3.7-0.7,5.6-0.7c1.9,0,3.8,0.2,5.6,0.7c4.2-2.9,6.1-2.3,6.1-2.3c1.2,3.1,0.4,5.4,0.2,5.9c1.4,1.6,2.3,3.5,2.3,6c0,8.5-5.2,10.4-10.1,11c0.8,0.7,1.5,2.1,1.5,4.2c0,3,0,5.5,0,6.2c0,0.6,0.4,1.3,1.5,1.1c8.8-3,15.2-11.4,15.2-21.3C397.5,1235.1,387.4,1225,375,1225z"/>
      <text x="375" y="1285" font-size="18">
        <tspan>Learn more &amp; explore open-source projects</tspan>
      </text>
    </g>
  </g>
</svg>

Methods for Post-Editing SVG Images#

The generated SVG can be post-edited in the following ways:

1. Online SVG Editors
   Use the SVG editor https://unpkg.com/[email protected]/dist/editor/index.html for visual editing; you can also use online SVG editing tools for secondary editing, such as https://www.jyshare.com/more/svgeditor/.
   The generated content will appear on the screen, and you can modify the image according to your needs. Click on the content to display a dashed box for moving and modifying; move the dashed box to move content, double-click text content to modify. Hold the shift key and select multiple contents to move them together. After modifications, click the upper left corner and select the lower 【Export】 to export, choosing various image or PDF formats as needed. After selecting save, a new interface will pop up, allowing you to right-click and save as an image.

2. PowerPoint Editing: Insert the SVG file: In PPT, click "Insert" > "Pictures" > "Picture from File" to convert to editable shapes: select the SVG image, right-click > "Convert to Shape" > "Ungroup".

3. Code Editing: Directly modify the SVG code using AI programming to adjust specific parameters.

Additional Sharing#

Through this set of prompt templates and various practical cases, we can see that this SVG prompt is quite powerful, allowing even those without much design experience to create aesthetically pleasing and stable SVG charts, greatly improving content creation efficiency and quality.

Of course, for more specific scenario applications and more exquisite chart requirements, it will be necessary to have AI continuously generate multiple versions and refine them based on this foundation. I hope this solution enhances your drawing capabilities and creates stunning visual content!

Many scenarios for SVG cannot be used directly, but you can use SVG viewers like SVGViewer (https://www.svgviewer.dev/) to convert them to PNG for download and use.