다음 웹 앱을 위한 훌륭한 SVG 리소스

저번에 React 앱 작업을 하다가 이미지에 스타일과 흥미를 더할 필요가 있다는 것을 알게 되었습니다. 저는 디자이너가 아니므로 웹 앱을 전문적으로 보이게 만드는 데 도움을 주시면 대단히 감사하겠습니다. 웹 앱이 반응형이어야 하므로 SVG 이미지를 사용하기로 결정했습니다. SVG (or Scaleable Vector Graphics)은 2D 이미지용 XML 기반 벡터 이미지 형식입니다.

React 앱에서 사용하는 것은 매우 쉽습니다.

import React, { Component } from "react";
import example from '../assets/img/example.svg';
import './example.css';

class Example extends Component {
    render() {
      return (
        <div>
          <div className="img-part" >
            <img src={example} alt="example" />
          </div>
        </div>
      );
    }
  }

  export default Example;

SVG 이미지 사용의 이점은 다음과 같습니다.

사용자가 응용 프로그램의 크기를 조정하면 크기가 완벽하게 조정됩니다.

SVG는 XML 기반이므로 이미지의 파일 크기가 훨씬 작아질 수 있는 무손실 데이터 압축 알고리즘에 적합합니다.

SVG는 XML 기반이므로 이미지 파일을 직접 편집할 수 있으며 Inkscape과 같은 벡터 이미지 프로그램으로도 쉽게 편집할 수 있습니다.

훌륭한 SVG 이미지 세트를 찾다가 발견했습니다unDraw. Undraw는 오픈 소스 커뮤니티에 기여하고자 하는 디자이너의 SVG 이미지 세트입니다. 나는 아름다움, 스타일 및 SVG 이미지의 방대한 선택에 깊은 인상을 받았습니다. 이미지 중 하나의 예는 이 블로그 게시물의 표지 사진입니다.

이 SVG 이미지 세트의 독특한 점 중 하나는 다음과 같이 이미지의 색상을 조정할 수 있다는 것입니다.

unDraw에는 앱의 주제에 맞는 이미지를 쉽게 찾을 수 있는 매우 우수한 키워드 검색 도구도 포함되어 있습니다.

license for unDraw은 TLDR로 매우 관대합니다. ~이다

you can use the illustrations in any project, commercial or personal without attribution or any costs. Just don’t try to replicate unDraw, redistribute in packs the illustrations or create integrations for it.