Skip to content

๐ŸŒ ์‚ฌ์šฉ์ž๊ฐ€ ์ž…๋ ฅํ•œ ๋‹ค์–‘ํ•œ ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ์ปค์Šคํ„ฐ๋งˆ์ด์ฆˆ๋œ SVG ์ด๋ฏธ์ง€๋ฅผ ์ƒ์„ฑํ•ด์ฃผ๋Š” ์›น์„œ๋น„์Šค์ž…๋‹ˆ๋‹ค.

Notifications You must be signed in to change notification settings

27Lia/readme-decorate

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

42 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

SVG Generator

SVG Example

SVG Example

SVG Example

SVG Generator๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ์ž…๋ ฅํ•œ ๋‹ค์–‘ํ•œ ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ๋งž์ถคํ˜• SVG ์ด๋ฏธ์ง€๋ฅผ ์ƒ์„ฑํ•ด์ฃผ๋Š” ์›น ์„œ๋น„์Šค์ž…๋‹ˆ๋‹ค. ์›น ๋””์ž์ด๋„ˆ, ๊ฐœ๋ฐœ์ž, ๋งˆ์ผ€ํ„ฐ ๋“ฑ ๋‹ค์–‘ํ•œ ์‚ฌ์šฉ์ž๊ฐ€ ์†์‰ฝ๊ฒŒ ์›ํ•˜๋Š” SVG ์ด๋ฏธ์ง€๋ฅผ ์ƒ์„ฑํ•˜๊ณ  ๊ณต์œ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ฃผ์š” ๊ธฐ๋Šฅ

  • SVG ์ด๋ฏธ์ง€ ์ƒ์„ฑ: ํ…์ŠคํŠธ, ๊ธ€์ž ์ƒ‰์ƒ, ๋ฐฐ๊ฒฝ ์ƒ‰์ƒ, ๊ธ€์ž ํฌ๊ธฐ ๋“ฑ์„ ์„ค์ •ํ•˜์—ฌ ๋งž์ถคํ˜• SVG ์ด๋ฏธ์ง€๋ฅผ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ๋‹ค์–‘ํ•œ ์Šคํƒ€์ผ ์ง€์›: ์‚ฌ๊ฐํ˜•(Rectangle), ์ŠคํŠธ๋กœํฌ(Stroke), ๊ทธ๋ผ๋””์–ธํŠธ(Gradient) ๋“ฑ ๋‹ค์–‘ํ•œ ์Šคํƒ€์ผ์„ ์ ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ์‹ค์‹œ๊ฐ„ ๋ฏธ๋ฆฌ๋ณด๊ธฐ: ์ž…๋ ฅํ•œ ๊ฐ’์— ๋”ฐ๋ผ ์‹ค์‹œ๊ฐ„์œผ๋กœ SVG ์ด๋ฏธ์ง€๋ฅผ ๋ฏธ๋ฆฌ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • URL ์ƒ์„ฑ ๋ฐ ๊ณต์œ : ์ƒ์„ฑ๋œ SVG ์ด๋ฏธ์ง€์˜ URL์„ ์ƒ์„ฑํ•˜์—ฌ ์‰ฝ๊ฒŒ ๊ณต์œ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์‚ฌ์šฉ ๋ฐฉ๋ฒ•

  1. ๋†’์ด ์„ค์ •: SVG ์ด๋ฏธ์ง€์˜ ๋†’์ด๋ฅผ ์ž…๋ ฅํ•ฉ๋‹ˆ๋‹ค.
  2. ํ…์ŠคํŠธ ์ž…๋ ฅ: ์ด๋ฏธ์ง€์— ํ‘œ์‹œํ•  ๋ฌธ๊ตฌ๋ฅผ ์ž…๋ ฅํ•ฉ๋‹ˆ๋‹ค.
  3. ๊ธ€์ž ์ƒ‰์ƒ ์„ ํƒ: ํ…์ŠคํŠธ์˜ ์ƒ‰์ƒ์„ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค.
  4. ๋ฐฐ๊ฒฝ ์ƒ‰์ƒ ์„ ํƒ: ์ด๋ฏธ์ง€์˜ ๋ฐฐ๊ฒฝ ์ƒ‰์ƒ์„ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค.
  5. ๊ธ€์ž ํฌ๊ธฐ ์„ค์ •: ํ…์ŠคํŠธ์˜ ํฌ๊ธฐ๋ฅผ ์ž…๋ ฅํ•ฉ๋‹ˆ๋‹ค.
  6. ์Šคํƒ€์ผ ์„ ํƒ: ์ด๋ฏธ์ง€์˜ ์Šคํƒ€์ผ์„ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค (์‚ฌ๊ฐํ˜•, ์ŠคํŠธ๋กœํฌ, ๊ทธ๋ผ๋””์–ธํŠธ).
  7. ๊ทธ๋ผ๋””์–ธํŠธ ์ƒ‰์ƒ ์„ค์ •: ๊ทธ๋ผ๋””์–ธํŠธ ์Šคํƒ€์ผ์„ ์„ ํƒํ•œ ๊ฒฝ์šฐ, ๋‘ ๊ฐ€์ง€ ๊ทธ๋ผ๋””์–ธํŠธ ์ƒ‰์ƒ์„ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.
  8. SVG ์ƒ์„ฑ: 'Generate SVG' ๋ฒ„ํŠผ์„ ๋ˆŒ๋Ÿฌ SVG ์ด๋ฏธ์ง€๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.
  9. URL ์ƒ์„ฑ: 'Generate URL' ๋ฒ„ํŠผ์„ ๋ˆŒ๋Ÿฌ ์ƒ์„ฑ๋œ SVG ์ด๋ฏธ์ง€์˜ URL์„ ํด๋ฆญํ•˜์—ฌ ๋ณต์‚ฌ ํ›„ ์‚ฌ์šฉ๋  ๊ณณ์— ๋ถ™์—ฌ๋„ฃ๊ธฐํ•ฉ๋‹ˆ๋‹ค.

English Version

SVG Generator

SVG Generator is a web application that generates custom SVG images based on various parameters input by the user. It allows web designers, developers, marketers, and others to easily create and share the SVG images they need.

Key Features

  • SVG Image Generation: Customize text, font color, background color, font size, and more to generate tailored SVG images.
  • Support for Various Styles: Apply different styles such as Rectangle, Stroke, and Gradient.
  • Real-Time Preview: View the SVG image in real-time as you input the parameters.
  • URL Generation and Sharing: Generate a URL for the created SVG image for easy sharing.

How to Use

  1. Set Height: Enter the height of the SVG image.
  2. Enter Text: Input the text to be displayed on the image.
  3. Choose Font Color: Select the color for the text.
  4. Choose Background Color: Select the background color for the image.
  5. Set Font Size: Enter the size of the text.
  6. Choose Style: Select the style of the image (Rectangle, Stroke, Gradient).
  7. Set Gradient Colors: If the Gradient style is selected, set the two gradient colors.
  8. Generate SVG: Click the 'Generate SVG' button to create the SVG image.
  9. Generate URL: Click the 'Generate URL' button to create a URL for the generated SVG image.

About

๐ŸŒ ์‚ฌ์šฉ์ž๊ฐ€ ์ž…๋ ฅํ•œ ๋‹ค์–‘ํ•œ ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ์ปค์Šคํ„ฐ๋งˆ์ด์ฆˆ๋œ SVG ์ด๋ฏธ์ง€๋ฅผ ์ƒ์„ฑํ•ด์ฃผ๋Š” ์›น์„œ๋น„์Šค์ž…๋‹ˆ๋‹ค.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages