본문 바로가기
디자인 개발/CSS

웹 기반 SVG배경패턴 생성기 3종 소개 (2017년 초 기준)

*본 포스트는 "CSS-TRICK'에 게재된 " CHRIS COYIER"가 쓴 "Websites to Generate SVG Patterns"이라는 포스트를 국문으로 번역하여 더 많은 사람들에게 정보를 알리고자 하는 목적으로 저작된 포스트임을 밝힙니다.


SVG배경패턴 생성기를 웹에서 구하기 어려운 것은 아니지만, 혹시 필요하실 수 있어서 해당 내용을 포스트해 놓습니다. 밑에 세 가지 제네레이터를 모두 사용해 보았는데, 세 가지 모두 작동을 매우 잘 하였으며, 약간의 코드로 SVG 패턴을 쉽게 제작할 수 있었습니다. 

*SVG배경패턴 생성기 : 차세대 웹 이미지포맷인 SVG 형태의 배경패턴을 생성해주는 시스템을 말합니다. SVG포맷이기 때문에, 확대해도 깨지지 않고, 용량효율이 좋으며, 수정이 용이합니다.


01. Hero Patterns


- URL : http://www.heropatterns.com/ 

- 웹프로젝트에 활용할 수 있는 SVG백그라운드 제네레이터입니다. 


02. SVG Patterns Gallery

- URL : http://www.heropatterns.com/

- SVG 이미지는 일반적으로 비트맵 이미지 보다 작은 용량 크기를 지니며, 높은 DPI에서도 선명함을 유지합니다. CSS3 그라디언트와 달리, SVG이미지는 IE9에서도 지원됩니다.


03. SVGeneration

- URL : http://www.svgeneration.com/
- 사이즈 조절이 가능한 벡터그래픽은 명료하며, 꺠끗합니다. 또한 모든 모던브라우저에서 문제 없이 표시됩니다



저작권 관련 정보 (License Info.)

  • 원 저작 게시물 제목(Original Post Title) : Websites to Generate SVG Patterns
  • 원 저작 게시물 주소(Original Post URL) : URL Link
  • 원 저작 게시물 제공(Original Post Provider) : CSS-TRICk
  • 본 콘텐츠는 유용한 정보를 널리 알리려는 취지에서 해외 기사를 국문으로 번역하여 제공하는 포스트입니다.
    (This post is a translated content to Korean in purpose to spread good information more broadly over the globe.)
  • 번역된 내용 상의 문제가 있거나, 저작권 침해 요소가 있다고 저작권자가 판단할 경우, 요청에 따라 언제든지 지워질 수 있습니다.
    (If the translated content has some problems itself or the original content provider/creator think posting the translated content here inappropriate, this can be removed immediately upon request.)
  • 번역된 콘텐츠는 CC 4.0 기준을 따르며, 정보 공유 시 최초 저작자(원 저작 관련 내용)를 콘텐츠 내에 표기해 주어야 합니다.
    (The translated content follows CC 4.0 policy. When it's shared, the original content provider/creator has to be attributed in the content.)