웹 사이트를 만들 때 웹 디자이너는 고려해야 할 사항 네 가지 요점 웹의 레이아웃과 시각 디자인에 대해 생각하고, 텍스트, 이미지, 색상 및 글꼴 직원.
이 네 가지 사항 중 이 게시물에서 가장 중요하게 생각하는 것은 이미지입니다. svg 파일을 만드는 방법 작업하는 이미지의 품질을 고려하는 것이 매우 중요하기 때문입니다.
SVG 파일 처리, 전문가들에 의해 증가하고 있습니다 그리고 디자인 세계의 전문가는 아닙니다.
SVG 파일이란 무엇입니까?
SVG는 영어로 Scalabe Vector Graphics, 스페인어로 Scalable Vector Graphics의 약어입니다. 그것은 약 개방적이고 자유로운 형식 2D 그래픽, XNUMX차원을 만드는 데 사용됩니다.
JPG 또는 PNG와 같은 다른 이미지 형식과 달리 SVG는 확장 가능한 형식입니다., 아무리 크기를 늘려도 이미지의 품질이 유지되기 때문입니다. 웹 페이지에서 그래픽이나 벡터 이미지를 배치하는 데 가장 많이 사용되는 형식 중 하나입니다.
왜 SVG를 사용해야 합니까?
이러한 형식의 벡터 이미지는 크기와 해상도에 관계없이 고품질을 유지합니다. 반대로 픽셀로 구성된 비트맵으로 구성된 이미지는 크기를 조정하면 품질이 떨어집니다. SVG 형식은 가벼움과 다양성으로 정의됩니다.
이 형식을 사용하는 데 유리한 또 다른 점은 크기가 작기 때문입니다. 있는 페이지의 로딩 속도를 증가시킵니다.. 이러한 이미지는 브라우저에서 빌드하므로 서버의 부하와 소비를 줄이는 데 도움이 됩니다.
또한, 그들은 할 수 있습니다 애니메이션 SVG 이미지 생성 이를 통해 웹사이트에 친밀감을 주고 방문하는 시청자의 관심을 끌 수 있습니다.
SVG는 개방형 형식입니다. 즉, 개선 및 업데이트를 겪을 수 있습니다. 또한 SVG 파일은 표시 품질을 잃지 않고 Adobe Illustartor와 같은 벡터 편집 프로그램으로 편집할 수 있으며 모든 장치에서 볼 수 있습니다. 또한 품질 저하 없이 인쇄할 수 있습니다.
SVG 파일을 쉽게 만드는 방법
SVG 파일을 만드는 가장 쉬운 방법은 SVG 파일에 익숙하다면 Illustrator, Corel Draw 등과 같은 그래픽 디자인 프로그램을 사용하는 것입니다.
Illustrator 프로그램에 중점을 두고 SVG 형식을 사용할 때 예술적 효과, 흐림, 브러시, 픽셀 등과 같은 그라디언트 또는 기타 효과를 사용했는지 고려해야 합니다. SVG 파일 형식으로 저장할 때 래스터화되기 때문입니다. 나중에 래스터화되지 않도록 효과를 추가하려면 SVG 필터 효과를 사용하는 것이 좋습니다..
우리가 제공하는 또 다른 조언은 더 나은 성능을 위한 일러스트레이션의 간단한 기호 및 경로 해당 형식의. 추적이 많은 브러시를 사용하면 데이터 로드가 더 많이 발생하므로 사용하지 마십시오.
이 프로그램에서 SVG 파일을 생성하려면, 가장 먼저 열어야 할 것은 아이디어를 작업할 빈 캔버스입니다.
작업이 끝나면 프로그램 위에 표시된 도구 모음으로 이동하여 다음 옵션을 선택합니다. 파일, 다른 이름으로 저장, 파일 이름을 지정하라는 팝업 화면이 나타납니다. 저장하려는 형식을 지정합니다. 이 마지막 섹션에서 SVG 옵션을 표시해야 합니다.
SVG 유형을 선택할 때 고려해야 할 다양한 옵션을 보여주는 대화 상자가 나타납니다.
일반적으로 표에 나타나는 첫 번째 필드에는 SVG 1.1 프로필이 나타납니다. 다음에서 그것은 우리에게 그들이 우리에게 제공하는 소스를 선택할 수있는 옵션을 제공합니다 기본적으로 SVG에 마크업된 텍스트와 없음으로 하위 집합이 표시됩니다.. 우리의 경우 이 작품에는 글꼴이 없습니다. 만약 있다면 서브세트 옵션이 없음에서 모든 픽토그램으로 변경되어야 합니다.
다음 섹션은 매우 중요합니다. 포함 옵션을 선택하면 컴포지션의 이미지가 파일에 통합됩니다., 비트맵 이미지를 많이 사용하면 무게가 증가합니다. 반면에 링크 옵션을 표시하는 경우 이미지 파일을 포함해야 하고 매우 중요하게는 이미지를 유지 관리해야 하므로 웹 사이트에서 이미지를 사용하려는 경우 이미지에 주의해야 합니다. 길. 이 옵션의 장점은 파일의 무게가 훨씬 가볍다는 것입니다.
고급 옵션 섹션에서 다음 옵션을 찾습니다. SVG 코드, 이 옵션은 파일이 내부에 있는 방식을 나타냅니다., 즉 우리 작업의 코드입니다. 예를 들어 개인 WordPress에 SVG 파일을 추가하려는 경우 이 옵션이 필수적입니다. 코드를 복사하여 WordPress HTML 편집기에 직접 추가하기만 하면 됩니다.
마지막 조언은 SVG 형식으로 저장할 때 다른 대지로 작업하는 경우 활성 대지만 유지됩니다.
더 나아가 SVG 효과를 일러스트레이션에 적용하려면 Illustrator에서 일련의 효과를 제공합니다. 이렇게 하려면 개체 또는 그룹을 선택해야 합니다. 효과를 적용하려면 효과 창, SVG 필터를 선택하고 적용해야 합니다.
SVG 필터를 적용할 때 디자인 프로그램은 다음과 같은 창을 보여줍니다. 적용할 수 있는 필터 목록이 나타납니다., 일단 하나를 선택하면 Illustrator에서 래스터화된 버전으로 표시됩니다.
당신이 본 것처럼, SVG 형식은 혁명이었습니다. 잠재력과 품질 덕분에 제공하는 형식을 올바르게 사용하는 한 성능 저하 없이 웹 페이지를 훨씬 더 매력적으로 만듭니다. SVG는 디자인 세계와 웹 개발의 완벽한 결합이 되었습니다.