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

 r6 vs r7
 ...
 [목차]
 [clearfix]
 == 개요 ==
-[[알파위키]]에 [[벡터 그래픽]]([[SVG]] 파일)을 업로드하는 방법입니다.
+[[알파위키]]에 벡터 그래픽([[SVG]] 파일)을 업로드하는 방법입니다.
 == 업로드 방법 ==
  * SVG 원본이 있는 파일일 경우 해당 이미지를 구글 이미지 찾기로 검색한 후 원본 SVG 파일을 올리면 됩니다. 단, 규정에 의거하여 출처 및 라이선스 표기를 꼭 해주시기 바랍니다.
- * 악의적으로 왜곡된 로고 및 잘못된 로고가 업로드되는 것을 막기 위해 가급적 공식적으로 제공되는 벡터 파일을 SVG 파일로 변환하여 올리는 것을 권장합니다. '''{{{#red 제삼자 사이트에 올라와 있는 이미지 파일은 잘못되었거나 오래되었을 수 있으므로}}}''' 해당 로고의 공식 홈페이지에서 벡터 파일(AI, EPS, 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 파일을 제작하여 업로드하는 경우 '''{{{#red 소수점 자리를 '3'으로 하고 CSS 속성을 '스타일 속성'이 아닌 '프레젠테이션 속성'으로 선택해 업로드해 주시기 바랍니다.}}}'''
- * 현재 나무위키 SVG 파일 지원이 기능적으로 불완전합니다. '''{{{#red 따라서 SVG 파일을 올린 뒤 해당 이미지가 정상적으로 불러와지는지 확인할 필요가 있습니다.}}}''' [[나무위키:프로젝트/이미지 벡터화/진행 상황]] 문서의 [[나무위키:프로젝트/이미지 벡터화/진행 상황#개선이 필요한 이미지 파일|개선이 필요한 이미지 파일]] 문단이 해당 오류가 일어난 파일들입니다.
+ * [[어도비 일러스트레이터]] 등으로 직접 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|잉크스케이프]]를 사용하시길 바라며 [[어도비 일러스트레이터]]로 작업 후 저장하는 경우에는 '''{{{#red SVG 프로파일: SVG 1.1 / 이미지 위치: 포함 / Illustrator 편집 기능 보존은 체크 해제}}}'''한 뒤 저장하시길 추천드립니다.
+  * 웬만하면 [[오픈 소스]]에 호환성이 좋은 [[Inkscape|잉크스케이프]]를 사용하시길 바라며 [[어도비 일러스트레이터]]로 작업 후 저장하는 경우에는 '''SVG 프로파일: SVG 1.1 / 이미지 위치: 포함 / Illustrator 편집 기능 보존은 체크 해제'''한 뒤 저장하시길 추천드립니다.
  * [[the seed]] 엔진에서 라이트/다크 모드에서 다른 이미지 표시를 지원하므로, 라이트 모드와 다크 모드에서 표시될 이미지를 두 종류로 분리하여 업로드해 주세요. 이미지 색상 변경에 대한 내용은 [[#색상 변경]] 문단을 참조합니다. 테마에 따른 이미지 표시 문법은 [[알파위키:문법 도움말#이미지 파일]]을 참조합니다.
  * 최종 업로드할 파일에서 불필요한 요소가 상당한 양으로 존재하는 것은 아닌지 확인하여 주세요. 데이터로만 존재하고 보여지지 않는 항목, 이를테면 투명해서 무의미한 객체이거나, 캔버스 밖에 존재하는 다른 요소 등이 많지 않은지 확인해야 합니다. 캔버스 밖에 존재하는 무의미한 데이터는 모두 삭제하고, 한 개의 파일에는 한 개 목적의 내용만 들어가도록 할 것을 권장합니다. 불필요한 요소가 많으면 파일 크기가 과도하게 커져 데이터 사용량이 많아지고, 페이지 로드 속도가 떨어집니다. 또한 눈에 보이지 않아도 해당 벡터 파일을 불러올 때마다 같이 렌더링되어 브라우저의 렉과 강제 중지를 유발할 수 있습니다.
  * 혹시라도 SVG에 텍스트 데이터가 존재하는 것은 아닌지 확인해 주세요. 특수한 경우(도표나 데이터처럼 SVG에서 텍스트를 꼭 다뤄야 할 필요가 있는 경우 등)를 제외하고는 Outstroke(외곽선)하여 텍스트가 아닌 Path의 형태로만 존재하도록 하여 저장하는 것을 권장합니다.[* 일반적인 로고 및 이미지는 모두 이 내용에 해당합니다. 텍스트 형태로 저장될 경우 기기의 상황(폰트 및 렌더링)에 따라 결과물에 차이가 발생하거나, 정상적으로 출력되지 않을 수 있습니다(폰트 깨짐 현상).] [[Inkscape]]에서는 '개체를 경로로'(Ctrl+Shift+C) 기능을 이용해 텍스트를 일반 Path로 변환할 수 있으니 참고하시기 바랍니다.
 ...