| r8 vs r9 | ||
|---|---|---|
| ... | ... | |
| 13 | 13 | * 공식 출처의 브랜드 가이드라인 등에서 최소 여백, 최소 사이즈, 전경/배경색 등 디자인 규격을 명시한 경우 따르는 것을 권장합니다.[* 가령 [[대한민국 정부상징]]은 [[:파일:정부상징 디자인 가이드 2017 10페이지.svg|정부상징 디자인 가이드 10페이지의 내용]]을 준용합니다. 자세한 규정은 [[대한민국 정부상징/디자인 가이드]] 문서에서 확인하실 수 있습니다.] 여백 조정은 [[https://editor.method.ac|웹]]으로도 할 수 있습니다.[* 다만 이 사이트로 파일을 저장하고 나면 '''파일:svg.svg'''라고 저장됩니다. 그리고 캔버스의 타이틀에서 '''"XXX 로고, XXX 국기"'''같은 형식으로 입력한 후에 저장하면 '''파일_.svg'''로 저장됩니다. 또한 기존 벡터 이미지의 형태가 중앙에 있는 파일을 이 사이트에서 저장하면 일반 벡터 이미지처럼 왼쪽으로 치우쳐지는 현상이 생깁니다.] |
| 14 | 14 | * 부득이하게 공식 벡터 이미지 파일을 구할 수 없는 경우 [[위키백과]]([[위키미디어 공용]]), [[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]][* 확장자들 중 아무거나 선택해 다운로드할 수 있습니다.]에서 찾을 수 있습니다. |
| 15 | 15 | * [[어도비 일러스트레이터]] 등으로 직접 SVG 파일을 제작하여 업로드하는 경우 '''소수점 자리를 '3'으로 하고 CSS 속성을 '스타일 속성'이 아닌 '프레젠테이션 속성'으로 선택해 업로드해 주시기 바랍니다.''' |
| 16 | * 현재 | |
| 17 | * 정상적인 SVG 파일이었는데 | |
| 16 | * 현재 알파위키 SVG 파일 지원이 기능적으로 불완전합니다. '''따라서 SVG 파일을 올린 뒤 해당 이미지가 정상적으로 불러와지는지 확인할 필요가 있습니다.''' | |
| 17 | * 정상적인 SVG 파일이었는데 알파위키 업로드 시 엑박 오류가 발생할 경우 [[#엑박 개선]] 문단의 방법으로 개선해 볼 수 있습니다. | |
| 18 | 18 | * 색상이 검정색으로만 표시되는 등의 문제의 경우 the seed 엔진이 SVG 내의 <style> 시트를 지우는 것이 문제인 것으로 보여지며, 스타일 시트의 스타일들을 직접 인라인 스타일로 옮길 시 정상적으로 출력됩니다. 이외에 현재까지 지워지는 건 {{{<sodipodi>}}} 시트, {{{<svg>}}} 시트 내의 "{{{xmlns:xlink}}}"값입니다. [[#<style> 시트 개선 방법]] 으로 개선해 볼 수 있습니다. |
| 19 | 19 | * [[https://board.namu.wiki/b/free/2685471|비트맵 이미지를 base64 인코딩한 svg 파일은 엔진 내에서 막혀 이미지의 일부나 전체가 출력되지 않습니다.]] |
| 20 | 20 | * [[https://developer.mozilla.org/ko/docs/Web/CSS/mix-blend-mode|mix-blend-mode]] 스타일이 적용된 SVG 파일은 혼합 모드가 적용되지 않고 기본값인 '표준(normal)' 모드로 출력됩니다. |
| ... | ... | |
| 30 | 30 | |
| 31 | 31 | * 만일 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 파일의 일부 개체가 잘려있는 사례가 간혹 있습니다.] |
| 32 | 32 | * AI 파일은 일반적으로 일러스트레이터로 연뒤, SVG 파일로 저장해 변환합니다. 다만 잉크스케이프로 AI 파일을 여는 데 성공했다면, 잉크스케이프로도 SVG 파일로 저장함으로써 변환을 마칠 수 있습니다. |
| 33 | * AI 파일의 그레이디언트 망(매시)은 SVG에서 지원하지 않기 때문에 변환 시 비트맵 이미지로 치환됩니다. '''치환된 비트맵 이미지는 | |
| 33 | * AI 파일의 그레이디언트 망(매시)은 SVG에서 지원하지 않기 때문에 변환 시 비트맵 이미지로 치환됩니다. '''치환된 비트맵 이미지는 알파위키에 업로드할 때 오류의 원인이 되므로''' 적절히 조치해야 합니다. | |
| 34 | 34 | * [[어도비 플래시|SWF]]에서 로고만 추출하려는 경우 [[셰어웨어]]인 [[https://www.sothink.com/product/flashdecompiler/|Sothink SWF Decompiler]]보다는 [[오픈 소스]]인 [[https://github.com/jindrapetrik/jpexs-decompiler|JPEXS Free Flash Decompiler]]를 사용하는 것을 추천합니다. |
| 35 | 35 | |
| 36 | 36 | == 파일 업로드 시 오류 예방 == |
| ... | ... | |
| 57 | 57 | 1. "Minify SVG"를 누르고, OK 혹은 OK, Needless to say를 누릅니다. |
| 58 | 58 | 1. 확장 프로그램에 내장된 svgo 프로그램이 자동으로 SVG를 최적화하고 {{{<style>}}} 태그 내 스타일을 처리해줍니다. |
| 59 | 59 | |
| 60 | 이렇게 하면 알파위키에서 SVG 파일을 게시할 때 발생하는 대부분의 오류들이 예방됩니다. 하지만 '''아래 오류들이 발생할 수 있으므로''' 주의해 발견한 뒤 오류를 해결하시거나, 오류를 스스로 해결할 수 없는 경우 파일을 업로드한 뒤 [[ | |
| 60 | 이렇게 하면 알파위키에서 SVG 파일을 게시할 때 발생하는 대부분의 오류들이 예방됩니다. 하지만 '''아래 오류들이 발생할 수 있으므로''' 주의해 발견한 뒤 오류를 해결하시거나, 오류를 스스로 해결할 수 없는 경우 파일을 업로드한 뒤 [[알파위키:프로젝트/이미지 벡터화/진행 상황#개선이 필요한 이미지 파일|개선이 필요한 이미지 파일 목록]]에 해당 파일 링크를 달아주시기 바랍니다. | |
| 61 | 61 | |
| 62 | 62 | 1. 일부 개체의 위치, 모양이 이상해지거나 표시되지 않음 |
| 63 | 63 | 1. 일부 개체의 스타일이 누락됨 |
| ... | ... | |
| 66 | 66 | 1. 기타 발견되지 않은 오류 |
| 67 | 67 | |
| 68 | 68 | == [[엑스박스|엑박]] 개선 == |
| 69 | 핵심은 [[ | |
| 70 | 1. 엑박이 뜨는 경우, 이때에는 | |
| 69 | 핵심은 [[알파위키]]에서 처리하면서 ‘오류가 생긴 파일’을 그대로 다시 받아 구문 오류가 난 부분을 해결하여 다시 업로드하여 주는 것입니다. | |
| 70 | 1. 엑박이 뜨는 경우, 이때에는 알파위키에서 업로드하였던 파일을 [[Chrome]]으로 연 뒤에, 엑박 기호가 뜨는 곳을 우클릭 하여 ‘새 탭에서 이미지 열기’를 수행하면 깨진 파일만 크롬의 새 탭에 열립니다. | |
| 71 | 71 | 1. 여기에서 해당 파일의 오류 원인이 무엇이고 해당 오류가 파일 코드의 어디에 위치해 있는지 자세한 오류 메시지를 보여주며, 파일에서 해석이 가능한 부분까지 [[렌더링]] 된 미리보기가 함께 표시됩니다. {{{-3 (파일의 처음 부분부터 오류가 났을 경우 미리보기 결과물 없이 하얀 공란만 존재)}}} |
| 72 | 72 | 1. 확인 후 아래의 미리보기{{{-3 (비어있을 경우, 오류 메시지 아래의 하얀색 공백 공간)}}}를 우클릭 하여 ‘다른 이름으로 저장...’합니다. |
| 73 | 73 | 1. 저장한 파일을 [[텍스트 에디터]]에서 열고 해당 유형의 오류를 일괄 수정한 뒤 다시 [[Chrome]]으로 열어 오류가 더 이상 발생하지 않는지 확인합니다. |
| 74 | 1. 오류가 없는 것을 확인한 뒤 | |
| 74 | 1. 오류가 없는 것을 확인한 뒤 알파위키에 수정한 파일을 다시 업로드하면 대개의 경우 해결됩니다. | |
| 75 | 75 | |
| 76 | 76 | * 아래에 자주 접하는 3가지 사례와 해결법을 정리하였습니다. |
| 77 | 77 | {{{#!wiki |
| ... | ... | |
| 83 | 83 | 4행 455열의 오류: '>'가 필요합니다. |
| 84 | 84 | 아래는 첫 번째 오류까지의 페이지 렌더링입니다.|| |
| 85 | 85 | ||{{{#!wiki style="word-break: keep-all;" |
| 86 | 이 경우, 오류가 발생한 파일을 다시 받아보면 보통 위에서 알려진 <style> 시트 오류 부분과 관련된 문제로, | |
| 86 | 이 경우, 오류가 발생한 파일을 다시 받아보면 보통 위에서 알려진 <style> 시트 오류 부분과 관련된 문제로, 알파위키 업로드 과정에서 매끄럽게 진행되지 못하고 구문이 불완전하게 처리된 흔적인지 시작 부분의 스타일 시트가 {{{<style>}}} 로 시작하여 {{{</style@>}}} 로 끝나는 문법 오류를 갖고 있습니다. 이 경우 물론 닫는 태그만 정확하게 고쳐주어도 브라우저에서는 바로 보여집니다만, 위에서와 같이 알파위키에서는 <style> 시트를 활용하지 않는 SVG를 권장하니 바로 아래의 [[#<style> 시트 개선 방법]] 을 참조하여 <style> 시트를 삭제하여주면 대개의 경우 정상적으로 불러올 수 있게 됩니다.}}}|| | |
| 87 | 87 | }}} {{{#!wiki |
| 88 | 88 | ||<tablewidth=500>{{{#!wiki style="margin: -15px -10px;" |
| 89 | 89 | ||<tablewidth=100%><tablebordercolor=#c77><bgcolor=#fdd><color=#000>{{{+1 '''This page contains the following errors:'''}}} |
| ... | ... | |
| 93 | 93 | 11행 1열의 오류: 문서가 비어 있습니다. |
| 94 | 94 | 아래는 첫 번째 오류까지의 페이지 렌더링입니다.|| |
| 95 | 95 | ||{{{#!wiki style="word-break: keep-all;" |
| 96 | 이 경우, 오류가 발생한 파일을 다시 받아보면 시작 부분에 {{{]>}}} 등이 존재하는 등 | |
| 96 | 이 경우, 오류가 발생한 파일을 다시 받아보면 시작 부분에 {{{]>}}} 등이 존재하는 등 알파위키 업로드 과정에서 매끄럽게 진행되지 못하고 구문이 불완전하게 처리된 흔적이 보입니다. 이 때문에 구문 해석에 실패하고 빈 파일로 인식하게 된 것입니다. 정상적인 파일과 같이 {{{<svg ~~~}}} 로 시작되도록 이 부분을 삭제하여주면 대개의 경우 정상적으로 불러올 수 있게 됩니다.}}}|| | |
| 97 | 97 | }}} {{{#!wiki |
| 98 | 98 | ||<tablewidth=500>{{{#!wiki style="margin: -15px -10px;" |
| 99 | 99 | ||<tablewidth=100%><tablebordercolor=#c77><bgcolor=#fdd><color=#000>{{{+1 '''This page contains the following errors:'''}}} |
| ... | ... | |
| 103 | 103 | 11행 37열의 오류: 규격은 d 특성의 값을 요구합니다. |
| 104 | 104 | 아래는 첫 번째 오류까지의 페이지 렌더링입니다.|| |
| 105 | 105 | ||{{{#!wiki style="word-break: keep-all;" |
| 106 | 이 경우, 오류가 발생한 파일을 다시 받아보면 정상적인 {{{name="value"}}}의 형태를 띄고 있는 가운데, | |
| 106 | 이 경우, 오류가 발생한 파일을 다시 받아보면 정상적인 {{{name="value"}}}의 형태를 띄고 있는 가운데, 알파위키 업로드 과정에서 매끄럽게 진행되지 못하고 구문이 불완전하게 처리된 흔적인지 말 그대로 ‘d’ 혼자 값을 가지고 있지 않고 혼자 놀고 있는 것이 SVG 파일 전반에 걸쳐 있습니다. 값이 없으면 존재할 필요가 없으니, 텍스트 에디터 등을 띄워서 찾아바꾸기로 “''<공백>''d''<공백>''”를 찾아 모두 “''<공백>''”으로 바꿔주는 등의 방법으로 삭제하여주면 대개의 경우 정상적으로 불러올 수 있게 됩니다.}}}|| | |
| 107 | 107 | }}} |
| 108 | 108 | |
| 109 | 109 | == <style> 시트 개선 방법 == |
| ... | ... | |
| 112 | 112 | 1. SVG 파일을 확보합니다. |
| 113 | 113 | * [[Inkscape]]나 [[어도비 일러스트레이터|일러스트레이터]]에서 열 때 색상이 정상적으로 나오는 경우, 이 파일을 그대로 ‘다른 이름으로 저장’하면서 ‘파일 형식 : 일반 SVG’,,,(잉크스케이프),,, 또는 ‘CSS 속성 : 프레젠테이션 속성, 소수점 자리 : 3’,,,(일러스트레이터),,,과 같이 저장 옵션을 지정해 줍니다. |
| 114 | 114 | 1. 이제 크게 2가지 방법으로 <style> 태그 내의 내용들을 각 요소의 속성으로 넣습니다. 다른 태그의 수정 방법에 대해서는 아직 알려진 게 없습니다. |
| 115 | 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)"는 '''인라인 속성으로 넣어주는 게 아니라 단지 | |
| 115 | 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의 위치가 바뀌거나 일부 스타일이 누락되는 등 '''오류가 발생하였을 가능성이 있으므로 반드시 결과물을 원본과 비교하여 확인'''해야 합니다. | |
| 116 | 116 | 1. SVG 파일을 [[문서 편집기]][* 간단하게 메모장, 워드패드 등으로도 가능합니다. [[Android]]의 경우 [[지퍼(애플리케이션)|지퍼7]]의 노트 에디터 등등의 앱에서 [[UTF-8]]로 열면 편집할 수 있습니다.]로 엽니다. 수동으로 혹은 문서 편집기의 찾기/바꾸기 기능을 이용해 코드를 수정합니다. |
| 117 | 117 | * 예를 들어 {{{<style>.fil0{fill:#ffc730}</style>}}}이라고 되어있고, 밑에 {{{<path class="fil0" d=□□□/>}}}라고 되어있다면 {{{<path fill="#ffc730" d=□□□/>}}}또는 {{{<path style="fill:#ffc730;" d=□□□/>}}}로 바꾼 뒤 {{{<style>}}} 태그 밑 태그 내의 내용들을 모두 제거합니다. |
| 118 | 118 | 1. 저장한 후 업로드합니다. |
| ... | ... | |
| 133 | 133 | 1. 비트맵 이미지와 Path를 비교하고 싶은 경우 '레이어 목록' 창에서 비트맵 이미지를 최하단에 둔 후 Path의 색상을 반 투명한 원색(빨강, 초록, 파랑 등)으로 설정하면 이 둘을 비교해가면서 세밀하게 경로를 편집할 수 있습니다. |
| 134 | 134 | 1. 경로 편집이 끝났다면 스포이드 도구를 통해 경로로 그린 도형의 색과 비트맵 그림 내 도형의 색을 맞춥니다. 투명도를 설정한 경우 올바른 투명도로 원상 복구했는지 확인합니다. |
| 135 | 135 | 1. 경로를 따는 데 참고한 비트맵 사진을 삭제합니다. |
| 136 | 1. Ctrl+S를 누르면 결과물을 SVG로 내보낼 수 있으며 해당 파일을 | |
| 136 | 1. Ctrl+S를 누르면 결과물을 SVG로 내보낼 수 있으며 해당 파일을 알파위키에 업로드하면 됩니다. | |
| 137 | 137 | |
| 138 | 138 | 아래는 비트맵 따라 그리기를 할 때 주의 사항입니다. |
| 139 | 139 | |
| 140 | 140 | * '''저작권 관련''' |
| 141 | 비트맵 따라 그리기로 만든 대상의 [[저작권]], [[상표권]] 등 여러 권리는 '''해당 대상의 저작자, 소유자에게 있습니다.''' 파일을 업로드할 때 PD-self 등의 라이선스가 아닌, 원래의 이미지 라이선스[* 예를 들어 [[대한민국 정부]]에서 [[공공누리]] 제1유형으로 배포하였다면 [[틀:이미지 라이선스/공공누리 제1유형|공공누리 제1유형]], [[미국 정부|미국 연방정부]]의 저작물일 경우 [[틀:이미지 라이선스/PD-USGov|PD-USGov]], [[국가행정조직/독일|독일 정부]]의 저작물일 경우 [[틀:이미지 라이선스/PD-GermanGov-Coa|PD-GermanGov-Coa]], 단순 [[텍스트]] 및 [[도형]]이면 [[틀:이미지 라이선스/PD-textlogo|PD-textlogo]], [[서명]]일 경우 [[틀:이미지 라이선스/PD-signature|PD-signature]], 그 외 독점 저작권이 존재하지만 [[제한적 이용]]으로서 [[공정 이용]]일 경우 [[틀:이미지 라이선스/제한적 이용|제한적 이용]], 그 외 기타 알 수 없는 경우는 [[틀:이미지 라이선스/라이선스 모름|라이선스 모름]] 등입니다. 자세한 내용은 [[ | |
| 141 | 비트맵 따라 그리기로 만든 대상의 [[저작권]], [[상표권]] 등 여러 권리는 '''해당 대상의 저작자, 소유자에게 있습니다.''' 파일을 업로드할 때 PD-self 등의 라이선스가 아닌, 원래의 이미지 라이선스[* 예를 들어 [[대한민국 정부]]에서 [[공공누리]] 제1유형으로 배포하였다면 [[틀:이미지 라이선스/공공누리 제1유형|공공누리 제1유형]], [[미국 정부|미국 연방정부]]의 저작물일 경우 [[틀:이미지 라이선스/PD-USGov|PD-USGov]], [[국가행정조직/독일|독일 정부]]의 저작물일 경우 [[틀:이미지 라이선스/PD-GermanGov-Coa|PD-GermanGov-Coa]], 단순 [[텍스트]] 및 [[도형]]이면 [[틀:이미지 라이선스/PD-textlogo|PD-textlogo]], [[서명]]일 경우 [[틀:이미지 라이선스/PD-signature|PD-signature]], 그 외 독점 저작권이 존재하지만 [[제한적 이용]]으로서 [[공정 이용]]일 경우 [[틀:이미지 라이선스/제한적 이용|제한적 이용]], 그 외 기타 알 수 없는 경우는 [[틀:이미지 라이선스/라이선스 모름|라이선스 모름]] 등입니다. 자세한 내용은 [[알파위키:기능 도움말#이미지 라이선스|알파위키:기능 도움말#이미지 라이선스]]를 참고할 수 있습니다.]로 업로드하고 출처와 저작권 사항, 문제 시 삭제 의사 등을 명확히 표기해야 합니다. 단, 상표권이 존재하는 이미지라도 '''독창성을 저작권법상 인정받지 못하는 경우'''에는 비트맵 따라 그리기로 제작한 사람에게 저작권이 있습니다. | |
| 142 | 142 | * '''간단한 도형 표현''' |
| 143 | 143 | 특히 로고에 원 혹은 타원이 들어가는 경우, 경로 도구로 원에 맞추지 마시고 그냥 원 도구로 원 / 타원을 새로 그리시는 것이 정확합니다. 평행사변형, 모서리가 둥근 직사각형과 같은 경우나, 도 사각형 도구에서 이를 지원하므로 경로 도구가 아닌 해당 도구를 활용하시기 바랍니다. |
| 144 | 144 | * '''노드 곡률 / 삐죽삐죽 곡선 문제''' |
| ... | ... |