mir.pe (일반/어두운 화면)
최근 수정 시각 : 2024-11-20 10:34:12

나무위키:기능 도움말/벡터 이미지 업로드


파일:상위 문서 아이콘.svg   상위 문서: 나무위키:기능 도움말
파일:나무위키:로고2.png 파일:나무위키:로고2 c7c7c7.svg 나무위키의 규정
기본방침 ( 문서 관리 방침 · 토론 관리 방침 · 이용자 관리 방침 · 운영 관리 방침 /운영진 선출) · 편집지침 ( 일반 문서 · 특수 문서 · 특정 분야 ( 인문사회 · 과학기술 · 문화예술 · 창작물) · 등재 기준 · 표제어)
파일:나무위키:로고2.png 파일:나무위키:로고2 c7c7c7.svg 나무위키의 도움말
FAQ · 도움말 ( 기능 · 편집 · 문법 ( 심화 · 수식 · 개발) · 토론 · 설정 · 소명 · 권리침해 · 자주 하는 실수 · 문서 삭제식 이동 · 더미)
파일:나무위키:로고2.png 파일:나무위키:로고2 c7c7c7.svg 나무위키의 운영
관리자 · 중재자 · 역대 운영진 · 운영진 지원 · 운영 도움말 ( 관리 · 중재 · 권한) · 접근 제한 ( 문서 목록) · 운영회의 ( 시행규칙 · 안건 건의) · 운영진 임명 회의 /진행 중인 회의 · 봇 리스트 · 투명성 보고서 · 소급 적용 규정 일람 · 공지 목록
파일:나무위키:로고2.png 파일:나무위키:로고2 c7c7c7.svg 나무위키의 기능
분류 · 게시판 · 엔진 ( 업데이트) · 계정 · 통계 · 연습장 · 내 문서함 · 문서 작성 요청
파일:나무위키:로고2.png 파일:나무위키:로고2 c7c7c7.svg 나무위키의 분류
프로젝트 · 주요 페이지 링크 · 보존문서 · 파일 · 틀 · 템플릿


파일:나무위키:로고3.png
이 문서는 나무위키의 도움말입니다.

이 문서는 나무위키 초보자를 위한 문서로, 규정으로서의 효력을 가지고 있지 않습니다.

1. 개요2. 업로드 방법3. 타 포맷 파일 변환4. 파일 업로드 시 오류 예방5. 엑박 개선6. <style> 시트 개선 방법7. 비트맵 따라 그리기8. 애니메이션 SVG 만들기9. 색상 변경

[clearfix]

1. 개요

나무위키에 벡터 그래픽( SVG 파일)을 업로드하는 방법입니다.

2. 업로드 방법

3. 타 포맷 파일 변환

다른 벡터 포맷 파일을 변환하는 방법과 변환 시 주의사항입니다.

4. 파일 업로드 시 오류 예방

현재 SVG 오류의 대부분은 SVG 편집기에서 삽입되는 불필요한 요소와 <style> 태그의 처리와 관련된 오류이며 이는 SVG 확장 프로그램에 내장된 svgo를 구동시켜 해결할 수 있습니다.

본 문단에서는 Visual Studio Code의 SVG 확장 프로그램을 이용하여 간단하게 오류를 예방하는 방법을 소개합니다.

우선 확장 프로그램 설치 및 설정 방법입니다. (향후 업데이트에 따라 과정이 달라질 수 있음)
  1. Visual Studio Code에서 SVG (jock 개발) 확장 프로그램을 설치합니다.
  2. Ctrl+Shift+P를 눌러 명령 팔레트를 엽니다.
  3. settings를 검색합니다. 검색 결과에서 '기본 설정: 사용자 설정 열기(JSON)'을 찾아 엽니다.
  4. 중괄호로 묶인 부분의 최하단에 아래 문자열을 추가합니다. 
#!syntax json
"svg.minify.inlineStyles": { "onlyMatchedOnce": false },
"svg.minify.prefixIds": false,
"svg.minify.removeViewBox": false

위와 같이 하면 설정 작업은 끝났습니다. 이제 어떤 SVG 파일의 오류를 예방하려면 아래와 같이 하면 됩니다.
  1. Visual Studio Code에서 SVG 파일을 엽니다.
  2. XML 본문 중 아무 곳이나 우클릭합니다.
  3. "Minify SVG"를 누르고, OK 혹은 OK, Needless to say를 누릅니다.
  4. 확장 프로그램에 내장된 svgo 프로그램이 자동으로 SVG를 최적화하고 <style> 태그 내 스타일을 처리해줍니다.

이렇게 하면 나무위키에서 SVG 파일을 업로드할 때 발생하는 대부분의 오류들이 예방됩니다. 하지만 아래 오류들이 발생할 수 있으므로 주의해 발견한 뒤 오류를 해결하시거나, 오류를 스스로 해결할 수 없는 경우 파일을 업로드한 뒤 개선이 필요한 이미지 파일 목록에 해당 파일 링크를 달아주시기 바랍니다.
  1. 일부 개체의 위치, 모양이 이상해지거나 표시되지 않음
  2. 일부 개체의 스타일이 누락됨
  3. 개체에 적용된 마스크에 이상이 발생함
  4. 빈 <style> 태그가 삭제되지 않고 남아 있음
  5. 기타 발견되지 않은 오류

5. 엑박 개선

핵심은 나무위키에서 처리하면서 ‘오류가 생긴 파일’을 그대로 다시 받아 구문 오류가 난 부분을 해결하여 다시 업로드하여 주는 것입니다.
  1. 엑박이 뜨는 경우, 이때에는 나무위키에서 업로드하였던 파일을 Chrome으로 연 뒤에, 엑박 기호가 뜨는 곳을 우클릭 하여 ‘새 탭에서 이미지 열기’를 수행하면 깨진 파일만 크롬의 새 탭에 열립니다.
  2. 여기에서 해당 파일의 오류 원인이 무엇이고 해당 오류가 파일 코드의 어디에 위치해 있는지 자세한 오류 메시지를 보여주며, 파일에서 해석이 가능한 부분까지 렌더링 된 미리보기가 함께 표시됩니다. (파일의 처음 부분부터 오류가 났을 경우 미리보기 결과물 없이 하얀 공란만 존재)
  3. 확인 후 아래의 미리보기(비어있을 경우, 오류 메시지 아래의 하얀색 공백 공간)를 우클릭 하여 ‘다른 이름으로 저장...’합니다.
  4. 저장한 파일을 텍스트 에디터에서 열고 해당 유형의 오류를 일괄 수정한 뒤 다시 Chrome으로 열어 오류가 더 이상 발생하지 않는지 확인합니다.
  5. 오류가 없는 것을 확인한 뒤 나무위키에 수정한 파일을 다시 업로드하면 대개의 경우 해결됩니다.
{{{#!wiki style="margin: -15px -10px;" <tablewidth=100%>This page contains the following errors:
error on line 4 at column 455: expected '>'
Below is a rendering of the page up to the first error. 		}}}
이 페이지에는 다음 오류가 있습니다.
4행 455열의 오류: '>'가 필요합니다.
아래는 첫 번째 오류까지의 페이지 렌더링입니다.
이 경우, 오류가 발생한 파일을 다시 받아보면 보통 위에서 알려진 시트 오류 부분과 관련된 문제로, 나무위키 업로드 과정에서 매끄럽게 진행되지 못하고 구문이 불완전하게 처리된 흔적인지 시작 부분의 스타일 시트가 <style> 로 시작하여 </style@> 로 끝나는 문법 오류를 갖고 있습니다. 이 경우 물론 닫는 태그만 정확하게 고쳐주어도 브라우저에서는 바로 보여집니다만, 위에서와 같이 나무위키에서는 <style> 시트를 활용하지 않는 SVG를 권장하니 바로 아래의 #<style> 시트 개선 방법 을 참조하여 <style> 시트를 삭제하여주면 대개의 경우 정상적으로 불러올 수 있게 됩니다.
}}}
||<tablewidth=100%><tablebordercolor=#c77><bgcolor=#fdd><color=#000>This page contains the following errors:
error on line 11 at column 1: Document is empty
Below is a rendering of the page up to the first error.||}}}||
이 페이지에는 다음 오류가 있습니다.
11행 1열의 오류: 문서가 비어 있습니다.
아래는 첫 번째 오류까지의 페이지 렌더링입니다.
이 경우, 오류가 발생한 파일을 다시 받아보면 시작 부분에 ]&gt; 등이 존재하는 등 나무위키 업로드 과정에서 매끄럽게 진행되지 못하고 구문이 불완전하게 처리된 흔적이 보입니다. 이 때문에 구문 해석에 실패하고 빈 파일로 인식하게 된 것입니다. 정상적인 파일과 같이 <svg ~~~ 로 시작되도록 이 부분을 삭제하여주면 대개의 경우 정상적으로 불러올 수 있게 됩니다.
||<tablewidth=100%><tablebordercolor=#c77><bgcolor=#fdd><color=#000>This page contains the following errors:
error on line 11 at column 37: Specification mandates value for attribute d
Below is a rendering of the page up to the first error.||}}}||
이 페이지에는 다음 오류가 있습니다.
11행 37열의 오류: 규격은 d 특성의 값을 요구합니다.
아래는 첫 번째 오류까지의 페이지 렌더링입니다.
이 경우, 오류가 발생한 파일을 다시 받아보면 정상적인 name="value"의 형태를 띄고 있는 가운데, 나무위키 업로드 과정에서 매끄럽게 진행되지 못하고 구문이 불완전하게 처리된 흔적인지 말 그대로 ‘d’ 혼자 값을 가지고 있지 않고 혼자 놀고 있는 것이 SVG 파일 전반에 걸쳐 있습니다. 값이 없으면 존재할 필요가 없으니, 텍스트 에디터 등을 띄워서 찾아바꾸기로 “<공백>d<공백>”를 찾아 모두 “<공백>”으로 바꿔주는 등의 방법으로 삭제하여주면 대개의 경우 정상적으로 불러올 수 있게 됩니다.

6. <style> 시트 개선 방법

Path(선·형태)는 정상이지만 색상이 모두 검은색 등으로만 나오는 경우 개선하는 방법입니다.
  1. SVG 파일을 확보합니다.
    • Inkscape나 일러스트레이터에서 열 때 색상이 정상적으로 나오는 경우, 이 파일을 그대로 ‘다른 이름으로 저장’하면서 ‘파일 형식 : 일반 SVG’,(잉크스케이프), 또는 ‘CSS 속성 : 프레젠테이션 속성, 소수점 자리 : 3’,(일러스트레이터),과 같이 저장 옵션을 지정해 줍니다.
  2. 이제 크게 2가지 방법으로 <style> 태그 내의 내용들을 각 요소의 속성으로 넣습니다. 다른 태그의 수정 방법에 대해서는 아직 알려진 게 없습니다.
    1. svgo 프로그램이나 웹에서 svgomg를 이용해 어느 정도 해결할 수 있습니다. ( 사용 방법) 다만 이때 "style 요소 제거(Remove style elements)"는 인라인 속성으로 넣어주는 게 아니라 단지 나무위키처럼 <style> 시트를 삭제하는 것이니 섣불리 사용해서는 안 되며 스타일을 인라인 속성으로 넣고 싶다면 "Inline styles"를 사용해야 합니다. 구동 후에는 Path의 위치가 바뀌거나 일부 스타일이 누락되는 등 오류가 발생하였을 가능성이 있으므로 반드시 결과물을 원본과 비교하여 확인해야 합니다.
    2. SVG 파일을 문서 편집기[11]로 엽니다. 수동으로 혹은 문서 편집기의 찾기/바꾸기 기능을 이용해 코드를 수정합니다.
      • 예를 들어 <style>.fil0{fill:#ffc730}</style>이라고 되어있고, 밑에 <path class="fil0" d=□□□/>라고 되어있다면 <path fill="#ffc730" d=□□□/>또는 <path style="fill:#ffc730;" d=□□□/>로 바꾼 뒤 <style> 태그 밑 태그 내의 내용들을 모두 제거합니다.
  3. 저장한 후 업로드합니다.

7. 비트맵 따라 그리기

원하는 대상의 SVG 로고를 찾아보았지만 비트맵 로고밖에 없는 경우, Inkscape 등의 툴을 이용해 비트맵을 따라 그려서 SVG 로고 형태로 제작할 수 있습니다.

아니면 이 사이트를 통해 간단한 비트맵 로고는 자동으로 벡터 이미지로 만들 수 있습니다.[12]

무료 프로그램인 Inkscape를 기준으로 벡터화 과정을 소개하자면 다음과 같습니다.
  1. Inkscape를 실행하고, 기존의 비트맵 로고를 불러옵니다. 비트맵 로고를 선택하고 Ctrl+Shift+R로 캔버스를 로고에 맞춥니다.
  2. Alt+Shift+B를 눌러 비트맵 따라 그리기를 실행합니다. 적절한 결과가 나올 수 있도록 설정값을 조정합니다. 반점, 매그러운 모퉁이, 매끄럽게 설정을 켜는 경우 로고가 심하게 변형되므로 이 세 설정은 끄는 것을 추천드립니다. 간단한 로고인 경우 최적화는 5(최댓값)로 설정하는 것을 권장합니다.
  3. 적용을 누르고 창을 닫으면 경로가 나올 것입니다. 경로 도구(F2)를 누른 다음 Path를 선택합니다.
  4. 그러면 노드가 표시될 것입니다. 노드는 클릭, 드래그 등으로 선택할 수 있습니다. 2에서 추천한 설정으로 비트맵 따라 그리기를 실행하면 직선 구간은 알맞게 나오나, 곡선 부분은 그냥 짧은 직선들을 이어서 구현되어 있음을 알 수 있을 것입니다. 곡선 부분의 노드를 제거해가면서 핸들 등을 이용해 기존 로고의 곡선과 차이가 없도록 제작합니다.
    • 노드를 제거하는 경우는 크게 2가지가 있습니다. Delete와 Ctrl+Delete가 있는데, Delete는 노드는 제거하되 주위 노드의 핸들을 조정하여 기존의 곡선 형태를 유지하는 방법이고, Ctrl+Delete는 핸들 조정 없이 그냥 노드를 제거하는 방법입니다. 전자는 주로 곡선, 후자는 주로 직선 부분에 이용됩니다.
    • 곡선 부분을 다룰 때는, 일반적으로 곡선의 양끝 점 혹은 양끝 점+중간 점만 남기고 나머지 노드를 전부 드래그로 선택한 뒤 Delete로 제거합니다. 이후 양끝 점의 핸들과 중간 점의 핸들, 위치를 조정해가면서 곡선의 형태를 조정하면 됩니다.
    • 핸들을 노드로 드래그한 뒤 드롭하면 핸들이 삭제되며, Shift를 누른 채 노드에서 바깥쪽으로 드래그하면 핸들이 생성됩니다. 이를 통해 곡선을 추가로 만들거나 없앨 수 있습니다. 또, '선택한 노드를 모퉁이 노드로 바꿉니다' 버튼을 두 번 누르면 핸들이 모두 사라져서 유용합니다.
    • 노드를 생성하려면 경로 위에서 노드를 생성하고 싶은 위치에 커서를 갖다 대고 더블 클릭합니다.
  5. 비트맵 이미지와 Path를 비교하고 싶은 경우 '레이어 목록' 창에서 비트맵 이미지를 최하단에 둔 후 Path의 색상을 반 투명한 원색(빨강, 초록, 파랑 등)으로 설정하면 이 둘을 비교해가면서 세밀하게 경로를 편집할 수 있습니다.
  6. 경로 편집이 끝났다면 스포이드 도구를 통해 경로로 그린 도형의 색과 비트맵 그림 내 도형의 색을 맞춥니다. 투명도를 설정한 경우 올바른 투명도로 원상 복구했는지 확인합니다.
  7. 경로를 따는 데 참고한 비트맵 사진을 삭제합니다.
  8. Ctrl+S를 누르면 결과물을 SVG로 내보낼 수 있으며 해당 파일을 나무위키에 업로드하면 됩니다.

아래는 비트맵 따라 그리기를 할 때 주의 사항입니다.

추가로, Inkscape에서는 '개체를 경로로' (Ctrl+Shift+C) 기능을 이용해 텍스트를 일반 Path로 변환할 수 있으니 참고하시기 바랍니다.

8. 애니메이션 SVG 만들기

간단한 도형과 애니메이션만으로 이루어진 GIF의 경우, SVG 벡터 파일로 대체할 수 있습니다.

예시로는 다음과 같습니다.
파일:로딩.svg 파일:trafficYBlk.svg

SVG 각 객체나 그룹의 태그 내에 animate 등의 속성을 부여하여 애니메이션 효과를 줄 수 있습니다. 
#!syntax html
<circle fill="#FFAA00" cx="25" cy="25" r="23">  # circle 그리기
  <animate  # animate 태그를 circle 태그 내에 삽입
    attributeName="fill"  # fill 속성 변경
    values="#FFAA00;#1E1E1E"  # #FA0 #1E1E1E 순으로 값 변경
    dur="1s"  # 애니메이션 진행 시간 1초
    calcMode="discrete"  # 변환 효과 discrete (값이 바로 바뀌도록 함)
    repeatCount="indefinite"  # 무한 반복
  />
</circle>  # circle 태그 닫음


자세한 내용은 모질라 재단에서 해당 웹 표준 태그를 설명한 기술 문서를 참조할 수 있습니다.

9. 색상 변경


SVG 파일을 다루는 데 익숙하지 않으면 이 사이트 등의 웹 도구를 활용하면 비교적 간단하게 색상을 변경할 수 있습니다. SVG 파일 편집 방법을 잘 아는 경우 Inkscape에서 열어 색상을 수정하거나, Visual Studio Code로 파일을 열어 fill 속성을 변경하는 편이 빠르고 편리합니다. (<path ...를 <path fill="#헥스 코드" ...로 수정하여 색을 바꿀 수 있습니다.

원본 파일을 다크 혹은 라이트 테마에 맞춰 변환할 때, 가능한 경우 단순히 흰색/검정색으로 바꾸지 말고 해당 이미지 파일의 공식 가이드라인에 맞춘 색상을 사용하시기 바랍니다.

[1] 가령 대한민국 정부상징은 정부상징 디자인 가이드 10페이지의 내용을 준용합니다. 자세한 규정은 대한민국 정부상징/디자인 가이드 문서에서 확인하실 수 있습니다. [2] 다만 이 사이트로 파일을 저장하고 나면 파일:svg.svg라고 저장됩니다. 그리고 캔버스의 타이틀에서 "XXX 로고, XXX 국기"같은 형식으로 입력한 후에 저장하면 파일_.svg로 저장됩니다. 또한 기존 벡터 이미지의 형태가 중앙에 있는 파일을 이 사이트에서 저장하면 일반 벡터 이미지처럼 왼쪽으로 치우쳐지는 현상이 생깁니다. [3] 디자인에서 파일을 찾으면 됩니다. 다운로드는 무료지만 로그인이 필요합니다. 이 사이트는 AI 파일이 주로 올라오므로 #타 포맷 파일 변환 문단을 참고해 포맷을 변환합니다. sit 파일인 경우 StuffIt Expander이나 이 사이트를 통해 압축을 풀어서 작업하면 됩니다. [4] AI, EPS, CDR, SVG, PDF 포맷의 파일을 제공합니다. 그러나 모두 ZIP 파일로 압축되어 제공되므로 압축을 풀어야 합니다. [5] 확장자들 중 아무거나 선택해 다운로드할 수 있습니다. [6] 일반적인 로고 및 이미지는 모두 이 내용에 해당합니다. 텍스트 형태로 저장될 경우 기기의 상황(폰트 및 렌더링)에 따라 결과물에 차이가 발생하거나, 정상적으로 출력되지 않을 수 있습니다(폰트 깨짐 현상). [7] 해당 사이트는 비로그인 사용자든 계정 사용자든 하루 10회까지만 변환할 수 있습니다만, 계정만 여러 개라면 사실상 무제한 이용이 가능합니다. [8] 종종 실패 사례가 발생하는 AI 파일과 달리 상당수의 EPS 파일은 해당 사이트에서 SVG 파일로 변환할 수 있습니다. [9] 해당 사이트는 하루 10회 변환만 가능합니다. [10] 다만 이 사이트는 하루 2회 변환만 가능하며, 변환한 SVG 파일의 일부 개체가 잘려있는 사례가 간혹 있습니다. [11] 간단하게 메모장, 워드패드 등으로도 가능합니다. Android의 경우 지퍼7의 노트 에디터 등등의 앱에서 UTF-8로 열면 편집할 수 있습니다. [12] 현재 크레딧 제도가 도입되어 한 번 벡터화할 때마다 1 크레딧이 소모되므로, 하루 최대 50개 변환만 가능합니다. 이 사이트 또한 계정만 여러 개라면 사실상 무제한 이용이 가능합니다. [13] 예를 들어 대한민국 정부에서 공공누리 제1유형으로 배포하였다면 공공누리 제1유형, 미국 연방정부의 저작물일 경우 PD-USGov, 독일 정부의 저작물일 경우 PD-GermanGov-Coa, 단순 텍스트 및 도형이면 PD-textlogo, 서명일 경우 PD-signature, 그 외 독점 저작권이 존재하지만 제한적 이용으로서 공정 이용일 경우 제한적 이용, 그 외 기타 알 수 없는 경우는 라이선스 모름 등입니다. 자세한 내용은 나무위키:기능 도움말#이미지 라이선스를 참고할 수 있습니다. [14] 노드에서 뻗어나온 두 핸들을 대칭이 되게 설정하는 것도 방법입니다.

파일:CC-white.svg 이 문서의 내용 중 전체 또는 일부는
문서의 r5606 판
, 번 문단
에서 가져왔습니다. 이전 역사 보러 가기
파일:CC-white.svg 이 문서의 내용 중 전체 또는 일부는 다른 문서에서 가져왔습니다.
[ 펼치기 · 접기 ]
문서의 r5606 판 ( 이전 역사)
문서의 r 판 ( 이전 역사)

분류