알파위키:기능 도움말/벡터 이미지 업로드(비교)

[[분류:알파위키의 도움말]][[분류:파일]]

[include(틀:상위 문서, top1=알파위키:기능 도움말)]

[include(틀:알파위키)]

[include(틀:알파위키 도움말)]

[목차]

[clearfix]

== 개요 ==

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

== 업로드 방법 ==

* SVG 원본이 있는 파일일 경우 해당 이미지를 구글 이미지 찾기로 검색한 후 원본 SVG 파일을 올리면 됩니다. 단, 규정에 의거하여 출처 및 라이선스 표기를 꼭 해주시기 바랍니다.

* 악의적으로 왜곡된 로고 및 잘못된 로고가 업로드되는 것을 막기 위해 가급적 공식적으로 제공되는 벡터 파일을 SVG 파일로 변환하여 올리는 것을 권장합니다. '''제삼자 사이트에 올라와 있는 이미지 파일은 잘못되었거나 오래되었을 수 있으므로''' 해당 로고의 공식 홈페이지에서 벡터 파일(AI, EPS, SVG)을 제공하지 않을 때만 사용하고 '''웬만하면 사용하지 마세요.'''

* 공식 출처의 브랜드 가이드라인 등에서 최소 여백, 최소 사이즈, 전경/배경색 등 디자인 규격을 명시한 경우 따르는 것을 권장합니다.[* 가령 [[대한민국 정부상징]]은 [[:파일:정부상징 디자인 가이드 2017 10페이지.svg|정부상징 디자인 가이드 10페이지의 내용]]을 준용합니다. 자세한 규정은 [[대한민국 정부상징/디자인 가이드]] 문서에서 확인하실 수 있습니다.] 여백 조정은 [[https://editor.method.ac|웹]]으로도 할 수 있습니다.[* 다만 이 사이트로 파일을 저장하고 나면 '''파일:svg.svg'''라고 저장됩니다. 그리고 캔버스의 타이틀에서 '''"XXX 로고, XXX 국기"'''같은 형식으로 입력한 후에 저장하면 '''파일_.svg'''로 저장됩니다. 또한 기존 벡터 이미지의 형태가 중앙에 있는 파일을 이 사이트에서 저장하면 일반 벡터 이미지처럼 왼쪽으로 치우쳐지는 현상이 생깁니다.]

* 부득이하게 공식 벡터 이미지 파일을 구할 수 없는 경우 [[위키백과]]([[위키미디어 공용]]), [[FANDOM]], [[https://kmug.co.kr/page/?pid=design|케이머그]][* 디자인에서 파일을 찾으면 됩니다. 다운로드는 무료지만 로그인이 필요합니다. 이 사이트는 AI 파일이 주로 올라오므로 [[#타 포맷 파일 변환]] 문단을 참고해 포맷을 변환합니다. sit 파일인 경우 [[https://www.stuffit.com/|StuffIt Expander]]이나 [[https://extract.me/ko/|이 사이트]]를 통해 압축을 풀어서 작업하면 됩니다.], [[https://logos.fandom.com/wiki/Logopedia|Logopedia]], [[https://seeklogo.com/|seeklogo]][* AI, EPS, CDR, SVG, PDF 포맷의 파일을 제공합니다. 그러나 모두 ZIP 파일로 압축되어 제공되므로 압축을 풀어야 합니다.], [[https://iconape.com/|iconeApe]][* 확장자들 중 아무거나 선택해 다운로드할 수 있습니다.]에서 찾을 수 있습니다.

* [[어도비 일러스트레이터]] 등으로 직접 SVG 파일을 제작하여 업로드하는 경우 '''소수점 자리를 '3'으로 하고 CSS 속성을 '스타일 속성'이 아닌 '프레젠테이션 속성'으로 선택해 업로드해 주시기 바랍니다.'''

* 현재 알파위키 SVG 파일 지원이 기능적으로 불완전합니다. '''따라서 SVG 파일을 올린 뒤 해당 이미지가 정상적으로 불러와지는지 확인할 필요가 있습니다.'''

* 정상적인 SVG 파일이었는데 알파위키 업로드 시 엑박 오류가 발생할 경우 [[#엑박 개선]] 문단의 방법으로 개선해 볼 수 있습니다.

* 색상이 검정색으로만 표시되는 등의 문제의 경우 the seed 엔진이 SVG 내의 <style> 시트를 지우는 것이 문제인 것으로 보여지며, 스타일 시트의 스타일들을 직접 인라인 스타일로 옮길 시 정상적으로 출력됩니다. 이외에 현재까지 지워지는 건 {{{<sodipodi>}}} 시트, {{{<svg>}}} 시트 내의 "{{{xmlns:xlink}}}"값입니다. [[#<style> 시트 개선 방법]] 으로 개선해 볼 수 있습니다.

* [[https://board.namu.wiki/b/free/2685471|비트맵 이미지를 base64 인코딩한 svg 파일은 엔진 내에서 막혀 이미지의 일부나 전체가 출력되지 않습니다.]]

* [[https://developer.mozilla.org/ko/docs/Web/CSS/mix-blend-mode|mix-blend-mode]] 스타일이 적용된 SVG 파일은 혼합 모드가 적용되지 않고 기본값인 '표준(normal)' 모드로 출력됩니다.

* 출력 오류 시 Inkscape에서 '''파일 - 새로 만들기''' 실행 후 기존 내용물을 붙여넣기 하면 제대로 출력되는 경우가 있으니 시도해 보시기 바랍니다.

* PNG 파일을 SVG로 제작할 때 개선 방법에 있는 내용처럼 메모장이나 워드 패드로 tag의 속성을 넣는다.

* 웬만하면 [[오픈 소스]]에 호환성이 좋은 [[Inkscape|잉크스케이프]]를 사용하시길 바라며 [[어도비 일러스트레이터]]로 작업 후 저장하는 경우에는 '''SVG 프로파일: SVG 1.1 / 이미지 위치: 포함 / Illustrator 편집 기능 보존은 체크 해제'''한 뒤 저장하시길 추천드립니다.

* [[the seed]] 엔진에서 라이트/다크 모드에서 다른 이미지 표시를 지원하므로, 라이트 모드와 다크 모드에서 표시될 이미지를 두 종류로 분리하여 업로드해 주세요. 이미지 색상 변경에 대한 내용은 [[#색상 변경]] 문단을 참조합니다. 테마에 따른 이미지 표시 문법은 [[알파위키:문법 도움말#이미지 파일]]을 참조합니다.

* 최종 업로드할 파일에서 불필요한 요소가 상당한 양으로 존재하는 것은 아닌지 확인하여 주세요. 데이터로만 존재하고 보여지지 않는 항목, 이를테면 투명해서 무의미한 객체이거나, 캔버스 밖에 존재하는 다른 요소 등이 많지 않은지 확인해야 합니다. 캔버스 밖에 존재하는 무의미한 데이터는 모두 삭제하고, 한 개의 파일에는 한 개 목적의 내용만 들어가도록 할 것을 권장합니다. 불필요한 요소가 많으면 파일 크기가 과도하게 커져 데이터 사용량이 많아지고, 페이지 로드 속도가 떨어집니다. 또한 눈에 보이지 않아도 해당 벡터 파일을 불러올 때마다 같이 렌더링되어 브라우저의 렉과 강제 중지를 유발할 수 있습니다.

* 혹시라도 SVG에 텍스트 데이터가 존재하는 것은 아닌지 확인해 주세요. 특수한 경우(도표나 데이터처럼 SVG에서 텍스트를 꼭 다뤄야 할 필요가 있는 경우 등)를 제외하고는 Outstroke(외곽선)하여 텍스트가 아닌 Path의 형태로만 존재하도록 하여 저장하는 것을 권장합니다.[* 일반적인 로고 및 이미지는 모두 이 내용에 해당합니다. 텍스트 형태로 저장될 경우 기기의 상황(폰트 및 렌더링)에 따라 결과물에 차이가 발생하거나, 정상적으로 출력되지 않을 수 있습니다(폰트 깨짐 현상).] [[Inkscape]]에서는 '개체를 경로로'(Ctrl+Shift+C) 기능을 이용해 텍스트를 일반 Path로 변환할 수 있으니 참고하시기 바랍니다.

== 타 포맷 파일 변환 ==

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

* 만일 SVG가 아니라 AI 파일만 있고, [[어도비 일러스트레이터]]가 없다면 [[Inkscape|잉크스케이프]]로도 AI 파일을 열 수 있지만, 잉크스케이프에서 열리지 않는 AI 파일들이 간혹 있습니다. 이 경우 [[https://cloudconvert.com/|Cloudconvert]]를 통해 SVG로 변환해보시길 바랍니다.[* 해당 사이트는 비로그인 사용자든 계정 사용자든 하루 10회까지만 변환할 수 있습니다만, 계정만 여러 개라면 사실상 무제한 이용이 가능합니다.] 다만 해당 사이트에서는 AI 파일을 SVG로 변환하는데 실패하는 경우가 간혹 존재합니다.[* 종종 실패 사례가 발생하는 AI 파일과 달리 상당수의 EPS 파일은 해당 사이트에서 SVG 파일로 변환할 수 있습니다.] 이 경우 2차로 [[https://convertio.co/kr/|Convertio]]를 이용하시길 바랍니다.[* 해당 사이트는 하루 10회 변환만 가능합니다.] 만약 1차와 2차에서 AI 파일을 SVG로 변환하는데 실패하셨다면 [[https://www.zamzar.com/converters/image/ai-to-svg/|Zamzar]]를 이용하시길 바랍니다.[* 다만 이 사이트는 하루 2회 변환만 가능하며, 변환한 SVG 파일의 일부 개체가 잘려있는 사례가 간혹 있습니다.]

* AI 파일은 일반적으로 일러스트레이터로 연뒤, SVG 파일로 저장해 변환합니다. 다만 잉크스케이프로 AI 파일을 여는 데 성공했다면, 잉크스케이프로도 SVG 파일로 저장함으로써 변환을 마칠 수 있습니다.

* AI 파일의 그레이디언트 망(매시)은 SVG에서 지원하지 않기 때문에 변환 시 비트맵 이미지로 치환됩니다. '''치환된 비트맵 이미지는 알파위키에 업로드할 때 오류의 원인이 되므로''' 적절히 조치해야 합니다.

* [[어도비 플래시|SWF]]에서 로고만 추출하려는 경우 [[셰어웨어]]인 [[https://www.sothink.com/product/flashdecompiler/|Sothink SWF Decompiler]]보다는 [[오픈 소스]]인 [[https://github.com/jindrapetrik/jpexs-decompiler|JPEXS Free Flash Decompiler]]를 사용하는 것을 추천합니다.

== 파일 업로드 시 오류 예방 ==

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

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

우선 확장 프로그램 설치 및 설정 방법입니다. (향후 업데이트에 따라 과정이 달라질 수 있음)

1. Visual Studio Code에서 SVG (jock 개발) 확장 프로그램을 설치합니다.

1. 확장 프로그램 설정으로 들어갑니다.

1. 검색창에 "{{{@ext:jock.svg inline}}}"을 검색합니다. ({{{@ext:jock.svg }}} 부분은 기본으로 들어가 있음)

1. "settings.json에서 편집"을 누릅니다.

1. 중괄호로 묶인 부분의 최하단에 아래 문자열을 추가합니다. {{{inlineStyles}}} 설정 관련 오류 문구는 무시합니다.

{{{#!syntax json

"svg.minify.inlineStyles": { "onlyMatchedOnce": false },

"svg.minify.prefixIds": false,

"svg.minify.removeViewBox": false

}}}

위와 같이 하면 설정 작업은 끝났습니다. 이제 어떤 SVG 파일의 오류를 예방하려면 아래와 같이 하면 됩니다.

1. Visual Studio Code에서 SVG 파일을 엽니다.

1. XML 본문 중 아무 곳이나 우클릭합니다.

1. "Minify SVG"를 누르고, OK 혹은 OK, Needless to say를 누릅니다.

1. 확장 프로그램에 내장된 svgo 프로그램이 자동으로 SVG를 최적화하고 {{{<style>}}} 태그 내 스타일을 처리해줍니다.

이렇게 하면 알파위키에서 SVG 파일을 게시할 때 발생하는 대부분의 오류들이 예방됩니다.

1. 일부 개체의 위치, 모양이 이상해지거나 표시되지 않음

1. 일부 개체의 스타일이 누락됨

1. 개체에 적용된 마스크에 이상이 발생함

1. 빈 {{{<style>}}} 태그가 삭제되지 않고 남아 있음

1. 기타 발견되지 않은 오류

== [[엑스박스|엑박]] 개선 ==

핵심은 [[알파위키]]에서 처리하면서 ‘오류가 생긴 파일’을 그대로 다시 받아 구문 오류가 난 부분을 해결하여 다시 업로드하여 주는 것입니다.

1. 엑박이 뜨는 경우, 이때에는 알파위키에서 업로드하였던 파일을 [[Chrome]]으로 연 뒤에, 엑박 기호가 뜨는 곳을 우클릭 하여 ‘새 탭에서 이미지 열기’를 수행하면 깨진 파일만 크롬의 새 탭에 열립니다.

1. 여기에서 해당 파일의 오류 원인이 무엇이고 해당 오류가 파일 코드의 어디에 위치해 있는지 자세한 오류 메시지를 보여주며, 파일에서 해석이 가능한 부분까지 [[렌더링]] 된 미리보기가 함께 표시됩니다. {{{-3 (파일의 처음 부분부터 오류가 났을 경우 미리보기 결과물 없이 하얀 공란만 존재)}}}

1. 확인 후 아래의 미리보기{{{-3 (비어있을 경우, 오류 메시지 아래의 하얀색 공백 공간)}}}를 우클릭 하여 ‘다른 이름으로 저장...’합니다.

1. 저장한 파일을 [[텍스트 에디터]]에서 열고 해당 유형의 오류를 일괄 수정한 뒤 다시 [[Chrome]]으로 열어 오류가 더 이상 발생하지 않는지 확인합니다.

1. 오류가 없는 것을 확인한 뒤 알파위키에 수정한 파일을 다시 업로드하면 대개의 경우 해결됩니다.

* 아래에 자주 접하는 3가지 사례와 해결법을 정리하였습니다.

{{{#!wiki

||<tablewidth=500>{{{#!wiki style="margin: -15px -10px;"

||<tablewidth=100%><tablebordercolor=#c77><bgcolor=#fdd><color=#000>{{{+1 '''This page contains the following errors:'''}}}

{{{error on line 4 at column 455: expected '>'}}}

{{{+1 '''Below is a rendering of the page up to the first error.'''}}}||}}}||

||<bgcolor=#ddd,#666>이 페이지에는 다음 오류가 있습니다.

4행 455열의 오류: '>'가 필요합니다.

아래는 첫 번째 오류까지의 페이지 렌더링입니다.||

||{{{#!wiki style="word-break: keep-all;"

이 경우, 오류가 발생한 파일을 다시 받아보면 보통 위에서 알려진 <style> 시트 오류 부분과 관련된 문제로, 알파위키 업로드 과정에서 매끄럽게 진행되지 못하고 구문이 불완전하게 처리된 흔적인지 시작 부분의 스타일 시트가 {{{<style>}}} 로 시작하여 {{{</style@>}}} 로 끝나는 문법 오류를 갖고 있습니다. 이 경우 물론 닫는 태그만 정확하게 고쳐주어도 브라우저에서는 바로 보여집니다만, 위에서와 같이 알파위키에서는 <style> 시트를 활용하지 않는 SVG를 권장하니 바로 아래의 [[#<style> 시트 개선 방법]] 을 참조하여 <style> 시트를 삭제하여주면 대개의 경우 정상적으로 불러올 수 있게 됩니다.}}}||

}}} {{{#!wiki

||<tablewidth=500>{{{#!wiki style="margin: -15px -10px;"

||<tablewidth=100%><tablebordercolor=#c77><bgcolor=#fdd><color=#000>{{{+1 '''This page contains the following errors:'''}}}

{{{error on line 11 at column 1: Document is empty}}}

{{{+1 '''Below is a rendering of the page up to the first error.'''}}}||}}}||

||<bgcolor=#ddd,#666>이 페이지에는 다음 오류가 있습니다.

11행 1열의 오류: 문서가 비어 있습니다.

아래는 첫 번째 오류까지의 페이지 렌더링입니다.||

||{{{#!wiki style="word-break: keep-all;"

이 경우, 오류가 발생한 파일을 다시 받아보면 시작 부분에 {{{]&gt;}}} 등이 존재하는 등 알파위키 업로드 과정에서 매끄럽게 진행되지 못하고 구문이 불완전하게 처리된 흔적이 보입니다. 이 때문에 구문 해석에 실패하고 빈 파일로 인식하게 된 것입니다. 정상적인 파일과 같이 {{{<svg ~~~}}} 로 시작되도록 이 부분을 삭제하여주면 대개의 경우 정상적으로 불러올 수 있게 됩니다.}}}||

}}} {{{#!wiki

||<tablewidth=500>{{{#!wiki style="margin: -15px -10px;"

||<tablewidth=100%><tablebordercolor=#c77><bgcolor=#fdd><color=#000>{{{+1 '''This page contains the following errors:'''}}}

{{{error on line 11 at column 37: Specification mandates value for attribute d}}}

{{{+1 '''Below is a rendering of the page up to the first error.'''}}}||}}}||

||<bgcolor=#ddd,#666>이 페이지에는 다음 오류가 있습니다.

11행 37열의 오류: 규격은 d 특성의 값을 요구합니다.

아래는 첫 번째 오류까지의 페이지 렌더링입니다.||

||{{{#!wiki style="word-break: keep-all;"

이 경우, 오류가 발생한 파일을 다시 받아보면 정상적인 {{{name="value"}}}의 형태를 띄고 있는 가운데, 알파위키 업로드 과정에서 매끄럽게 진행되지 못하고 구문이 불완전하게 처리된 흔적인지 말 그대로 ‘d’ 혼자 값을 가지고 있지 않고 혼자 놀고 있는 것이 SVG 파일 전반에 걸쳐 있습니다. 값이 없으면 존재할 필요가 없으니, 텍스트 에디터 등을 띄워서 찾아바꾸기로 “''<공백>''d''<공백>''”를 찾아 모두 “''<공백>''”으로 바꿔주는 등의 방법으로 삭제하여주면 대개의 경우 정상적으로 불러올 수 있게 됩니다.}}}||

}}}

== <style> 시트 개선 방법 ==

Path(선·형태)는 정상이지만 색상이 모두 검정색 등으로만 나오는 경우 개선하는 방법입니다.

1. SVG 파일을 확보합니다.

* [[Inkscape]]나 [[어도비 일러스트레이터|일러스트레이터]]에서 열 때 색상이 정상적으로 나오는 경우, 이 파일을 그대로 ‘다른 이름으로 저장’하면서 ‘파일 형식 : 일반 SVG’,,,(잉크스케이프),,, 또는 ‘CSS 속성 : 프레젠테이션 속성, 소수점 자리 : 3’,,,(일러스트레이터),,,과 같이 저장 옵션을 지정해 줍니다.

1. 이제 크게 2가지 방법으로 <style> 태그 내의 내용들을 각 요소의 속성으로 넣습니다. 다른 태그의 수정 방법에 대해서는 아직 알려진 게 없습니다.

1. svgo [[https://github.com/svg/svgo|프로그램]]이나 [[https://jakearchibald.github.io/svgomg|웹]]에서 svgomg를 이용해 어느 정도 해결할 수 있습니다. ([[https://a11y.gitbook.io/graphics-aria/svg-graphics/svg-optimize|사용 방법]]) 다만 이때 "style 요소 제거(Remove style elements)"는 '''인라인 속성으로 넣어주는 게 아니라 단지 알파위키처럼 <style> 시트를 삭제하는 것'''이니 섣불리 사용해서는 안 되며 스타일을 인라인 속성으로 넣고 싶다면 "Inline styles"를 사용해야 합니다. 구동 후에는 Path의 위치가 바뀌거나 일부 스타일이 누락되는 등 '''오류가 발생하였을 가능성이 있으므로 반드시 결과물을 원본과 비교하여 확인'''해야 합니다.

1. SVG 파일을 [[문서 편집기]][* 간단하게 메모장, 워드패드 등으로도 가능합니다. [[Android]]의 경우 [[지퍼(애플리케이션)|지퍼7]]의 노트 에디터 등등의 앱에서 [[UTF-8]]로 열면 편집할 수 있습니다.]로 엽니다. 수동으로 혹은 문서 편집기의 찾기/바꾸기 기능을 이용해 코드를 수정합니다.

* 예를 들어 {{{<style>.fil0{fill:#ffc730}</style>}}}이라고 되어있고, 밑에 {{{<path class="fil0" d=□□□/>}}}라고 되어있다면 {{{<path fill="#ffc730" d=□□□/>}}}또는 {{{<path style="fill:#ffc730;" d=□□□/>}}}로 바꾼 뒤 {{{<style>}}} 태그 밑 태그 내의 내용들을 모두 제거합니다.

1. 저장한 후 업로드합니다.

== [[비트맵]] 따라 그리기 ==

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

무료 프로그램인 [[Inkscape]]를 기준으로 벡터화 과정을 소개하자면 다음과 같습니다.

1. [[Inkscape]]를 실행하고, 기존의 비트맵 로고를 불러옵니다. 비트맵 로고를 선택하고 Ctrl+Shift+R로 캔버스를 로고에 맞춥니다.

1. 비트맵 로고를 선택한 상태로 Alt+Shift+B를 눌러 비트맵 따라 그리기를 실행합니다. 적절한 결과가 나올 수 있도록 설정값을 조정합니다. 반점, 매그러운 모퉁이, 매끄럽게 설정을 켜는 경우 로고가 심하게 변형되므로 이 세 설정은 끄는 것을 추천드립니다. 간단한 로고인 경우 최적화는 5(최댓값)로 설정하는 것을 권장합니다.

1. 적용을 누르고 창을 닫으면 경로가 나올 것입니다. 경로 도구(F2)를 누른 다음 Path를 선택합니다.

1. 그러면 노드가 표시될 것입니다. 노드는 클릭, 드래그 등으로 선택할 수 있습니다. 2에서 추천한 설정으로 비트맵 따라 그리기를 실행하면 직선 구간은 알맞게 나오나, 곡선 부분은 그냥 짧은 직선들을 이어서 구현되어 있음을 알 수 있을 것입니다. 곡선 부분의 노드를 제거해가면서 핸들 등을 이용해 기존 로고의 곡선과 차이가 없도록 제작합니다.

* 노드를 제거하는 경우는 크게 2가지가 있습니다. Delete와 Ctrl+Delete가 있는데, Delete는 노드는 제거하되 주위 노드의 핸들을 조정하여 기존의 곡선 형태를 유지하는 방법이고, Ctrl+Delete는 핸들 조정 없이 그냥 노드를 제거하는 방법입니다. 전자는 주로 곡선, 후자는 주로 직선 부분에 이용됩니다.

* 곡선 부분을 다룰 때는, 일반적으로 곡선의 양끝 점 혹은 양끝 점+중간 점만 남기고 나머지 노드를 전부 드래그로 선택한 뒤 Delete로 제거합니다. 이후 양끝 점의 핸들과 중간 점의 핸들, 위치를 조정해가면서 곡선의 형태를 조정하면 됩니다.

* 핸들을 노드로 드래그한 뒤 드롭하면 핸들이 삭제되며, Shift를 누른 채 노드에서 바깥쪽으로 드래그하면 핸들이 생성됩니다. 이를 통해 곡선을 추가로 만들거나 없앨 수 있습니다. 또, '선택한 노드를 모퉁이 노드로 바꿉니다' 버튼을 두 번 누르면 핸들이 모두 사라져서 유용합니다.

* 노드를 생성하려면 경로 위에서 노드를 생성하고 싶은 위치에 커서를 갖다 대고 더블 클릭합니다.

1. 비트맵 이미지와 Path를 비교하고 싶은 경우 '레이어 목록' 창에서 비트맵 이미지를 최하단에 둔 후 Path의 색상을 반 투명한 원색(빨강, 초록, 파랑 등)으로 설정하면 이 둘을 비교해가면서 세밀하게 경로를 편집할 수 있습니다.

1. 경로 편집이 끝났다면 스포이드 도구를 통해 경로로 그린 도형의 색과 비트맵 그림 내 도형의 색을 맞춥니다. 투명도를 설정한 경우 올바른 투명도로 원상 복구했는지 확인합니다.

1. 경로를 따는 데 참고한 비트맵 사진을 삭제합니다.

1. Ctrl+S를 누르면 결과물을 SVG로 내보낼 수 있으며 해당 파일을 알파위키에 업로드하면 됩니다.

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

* '''저작권 관련'''

비트맵 따라 그리기로 만든 대상의 [[저작권]], [[상표권]] 등 여러 권리는 '''해당 대상의 저작자, 소유자에게 있습니다.''' 파일을 업로드할 때 PD-self 등의 라이선스가 아닌, 원래의 이미지 라이선스[* 예를 들어 [[대한민국 정부]]에서 [[공공누리]] 제1유형으로 배포하였다면 [[틀:이미지 라이선스/공공누리 제1유형|공공누리 제1유형]], [[미국 정부|미국 연방정부]]의 저작물일 경우 [[틀:이미지 라이선스/PD-USGov|PD-USGov]], [[국가행정조직/독일|독일 정부]]의 저작물일 경우 [[틀:이미지 라이선스/PD-GermanGov-Coa|PD-GermanGov-Coa]], 단순 [[텍스트]] 및 [[도형]]이면 [[틀:이미지 라이선스/PD-textlogo|PD-textlogo]], [[서명]]일 경우 [[틀:이미지 라이선스/PD-signature|PD-signature]], 그 외 독점 저작권이 존재하지만 [[제한적 이용]]으로서 [[공정 이용]]일 경우 [[틀:이미지 라이선스/제한적 이용|제한적 이용]], 그 외 기타 알 수 없는 경우는 [[틀:이미지 라이선스/라이선스 모름|라이선스 모름]] 등입니다. 자세한 내용은 [[알파위키:기능 도움말#이미지 라이선스|알파위키:기능 도움말#이미지 라이선스]]를 참고할 수 있습니다.]로 업로드하고 출처와 저작권 사항, 문제 시 삭제 의사 등을 명확히 표기해야 합니다. 단, 상표권이 존재하는 이미지라도 '''독창성을 저작권법상 인정받지 못하는 경우'''에는 비트맵 따라 그리기로 제작한 사람에게 저작권이 있습니다.

* '''간단한 도형 표현'''

특히 로고에 원 혹은 타원이 들어가는 경우, 경로 도구로 원에 맞추지 마시고 그냥 원 도구로 원 / 타원을 새로 그리시는 것이 정확합니다. 평행사변형, 모서리가 둥근 직사각형과 같은 경우나, 도 사각형 도구에서 이를 지원하므로 경로 도구가 아닌 해당 도구를 활용하시기 바랍니다.

* '''노드 곡률 / 삐죽삐죽 곡선 문제'''

노드의 '핸들'이 잘못 설정되어서 이런 문제가 나타납니다. 핸들의 길이를 잘 조정해야 최종적인 로고의 형태가 어색하게 나오지 않습니다.

특히 곡선이 삐죽삐죽하게 나오는 경우가 있는데, 이는 곡선 중간 노드의 핸들의 방향과 전체적인 경로 상에서의 접선 방향이 일치하지 않기 때문으로, 이를 일치하게 만들어주셔야 합니다.[* 노드에서 뻗어나온 두 핸들을 대칭이 되게 설정하는 것도 방법입니다.] 핸들을 드래그한 상태에서 Ctrl 키를 홀드하면 수직/수평 방향으로 핸들을 뻗게 할 수 있으니 참고하시기 바랍니다.

* '''모퉁이 문제'''

비트맵 따라 그리기로 경로를 생성하면, 한 모퉁이를 표현하는 데 두 개 이상의 노드가 쓰이는 경우도 있습니다. 이 경우 하나의 노드를 제외한 나머지 노드를 Ctrl+Delete로 제거하시고, 남은 노드의 위치를 alt+방향키로 세밀하게 조정하실 필요가 있습니다.

*{{{#red ''''비트맵 따라 그리기' 기능의 결과물에는 생각보다 오류나 오차가 많으므로 이를 그대로 업로드해서는 안 되며, 우선 경로 편집을 통해 이를 해결해야 합니다.'''}}}

특히 저해상도 이미지에 해당 기능을 적용하면 오차가 더 크게 발생하는 경향이 있습니다.

또한 [[서명]]의 경우 비트맵이 [[PNG]] 파일이면 단일 스캔에서 밝기 컷오프로 벡터화시켜 그나마 비슷하게 결과가 나올 수 있으나 [[JPEG]] 파일인 경우에는 대부분 원본이 화질이 깨져 따라 그린 후에 백터 파일이 원본과 상당히 차이나는 경우가 있습니다.

* 벡터 경로가 비트맵 이미지보다 소폭 커진 경우, 캔버스 바깥으로 튀어나가지는 않았는지 확인해야 합니다. 벡터 경로를 선택한 채로 Ctrl+Shift+R을 한 번 더 눌러서 캔버스를 경로에 딱 맞추는 방법도 있습니다.

* 작업이 다 끝난 뒤 비트맵 이미지를 삭제하였는지 레이어 목록 창을 통해 확인하도록 합니다.

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

== 애니메이션 SVG 만들기 ==

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

예시로는 다음과 같습니다.

[[파일:Circles.svg|width=200]]

SVG 각 객체나 그룹의 태그 내에 animate 등의 속성을 부여하여 애니메이션 효과를 줄 수 있습니다.

* [[https://stackoverflow.com/questions/29205294/how-to-achieve-blinking-effect-in-svg|animation - How to achieve blinking effect in svg? - Stack Overflow]]

* [[:파일:trafficYBlk.svg]] (노란 점멸 신호 SVG) 파일의 예시

{{{#!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 태그 닫음}}}

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

* [[https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate|<animate> 문서]]

* [[https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateMotion|<animateMotion> 문서]]

* [[https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateTransform|<animateTransform> 문서]]

== 색상 변경 ==

## FAQ라서 씀

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

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

[각주][include(틀:문서 가져옴/나무위키, title=나무위키:기능 도움말/벡터 이미지 업로드, version=21)]