도움말:SVG

From Wikimedia Commons, the free media repository
Jump to navigation Jump to search
This page is a translated version of a page Help:SVG and the translation is 87% complete. Changes to the translation template, respectively the source language can be submitted through Help:SVG and have to be approved by a translation administrator.
Outdated translations are marked like this.
Other languages:

Shortcut: COM:SVG

SVG 파일 형식의 공식 로고.

SVG(스케일러블 벡터 그래픽스)는 위키미디어 공용에서 허용되는 파일 형식입니다. 도표, 지도 등 사진이 아닌 이미지에 적합합니다. SVG는 그래픽 객체를 소스 코드와 함께 표현하므로 현재 콘텐츠를 수정하고 개선하는 가장 좋은 방법이기 때문에 위키미디어 공용에서 선호받고 있습니다.

SVG 파일은 위키미디어 공용에서 광범위하게 사용됩니다. 다음은 시작하는 데 도움이 되는 몇 가지 팁입니다. (이러한 파일을 생성하는 데 사용할 프로그램을 이미 알고 있는 경우 도움말:일러스트레이터 또는 도움말:잉크스케이프를 추가로 참조하십시오.)

SVG란 무엇인가

SVG 이미지의 예시. 이미지가 배율에 관계없이 곡선이 항상 매끄럽게 표시되고 울퉁불퉁하지 않습니다.

스케일러블 벡터 그래픽스(SVG)는 2차원 벡터 그래픽스(비트맵 또는 래스터 그래픽스의 반대)를 정적 및 애니메이션 형태로 표현하기 위한 XML 사양이자 파일 형식입니다. 플레인 텍스트 또는 압축(바이너리) 형식으로 저장되며, JPEG나 GIF와 같은 대부분의 다른 이미지 형식보다 크기 효율이 훨씬 높습니다. 또한 SVG를 사용하면 래스터 그래픽스와 편집 가능한 텍스트를 삽입할 수 있습니다.

librsvg

librsvg(또는 ‘RSVG’)는 미디어위키에서 SVG 파일을 위키미디어 페이지에 제공되는 PNG 비트맵 형식으로 래스터화하기 위해 사용하는 렌더링 라이브러리입니다. 표시되는 이미지는 SVG가 아니므로 애니메이션이나 상호작용은 사용할 수 없습니다. 이러한 선택의 한 가지 이유는 SVG를 실시간으로 렌더링하면 구형 컴퓨터나 운영 체제의 속도가 느려지기 때문입니다. SVG를 소스에서 효율적으로 변환한 래스터 버전은 이러한 기술적 문제를 극복하는 데 도움이 됩니다. 또 다른 이유는 일부 SVG 파일은 용량이 크지만(예: 1 MB) 모니터에 표시되는 이미지는 압축되지 않은 51200픽셀(24비트 컬러의 경우 153600바이트)인 160×320픽셀일 수 있기 때문입니다.

2023년 5월 현재, 위키미디어 공용은 이미 4년이 지난 librsvg 2.44.10(phab:T193352)을 실행하고 있습니다. 이 버전은 러스트 프로그래밍 언어로 다시 작성된 librsvg의 초기 버전입니다. mask 버그(phab:T55899)와 같은 오랜 문제를 해결하고 SVG 2.0에 대한 초기 지원을 제공하지만, 이전 데비안 릴리스(phab:T265549)로 인해 업스트림에 대한 일부 수정 사항은 아직 제공되지 않습니다.

librsvg의 몇 가지 누락된 기능과 오류는 위키미디어 공용의 SVG 이미지에 영향을 미칩니다. 따라서 SVG 파일은 이러한 문제를 피하거나 해결해야 합니다. 예를 들어 librsvg는 패스 상의 문자 기능을 지원하지 않으며, 세로쓰기 텍스트를 처리하는 데 문제가 있습니다. librsvg가 완벽하게 작동하더라도 호환성 문제가 있을 수 있습니다. SVG 파일은 위키미디어 공용에 없는 글꼴을 사용할 수 있습니다.

특이 사항

스타일시트

Tracked in Phabricator
Task T68672
RESOLVED

SVG 사양에서 스타일 요소는 유형 속성을 반드시 "text/css"로 기본 설정해야 합니다.[1] style 요소를 사용하는 SVG 이미지는 ‎<style> 태그에 명시적으로 type="text/css"를 설정해야 합니다. (즉, ‎<style type="text/css">가 ‎<style>보다 선호되어야 합니다.) (phab:T68672)

표시되지 않는 텍스트 / 플로 요소

§ 텍스트가 표시되지 않음 (플로 텍스트 오류)를 참조하십시오.

systemLanguage 처리

개인용 언어 태그 qcs를 사용하여 zh-Hans를 선택합니다.
개인용 언어 태그 qct를 사용하여 zh-Hant를 선택합니다.

RSVG는 SVG가 IETF 언어 태그(langtag)의 쉼표로 구분된 목록으로 지정하는 systemLanguage 속성을 ​​올바르게 비교하지 않습니다. RSVG는 언어 태그의 첫 번째 하위 태그(첫 번째 하이픈 앞의 문자 그룹)만 일치시키므로 그 뒤에 오는 국가 코드나 문자 하위 태그는 무시합니다. 예를 들어, RSVG는 zh-Hans(간체자 중국어)과 zh-Hant(번체자 중국어)를 구분하지 못합니다. 이 문제를 해결하기 위해 개인용 언어 태그(qaa~qtz 범위에 속하는 언어 태그)를 사용하여 언어를 지정할 수 있습니다.

IETF 언어 태그 SVG 마크업
sr-Cyrl systemLanguage="sr-Cyrl,qsc"
sr-Latn systemLanguage="sr-Latn,qsl"
zh-Hans systemLanguage="zh-Hans,qcs"
zh-Hant systemLanguage="zh-Hant,qct"

systemLanguage 속성은 IETF 언어 태그 목록이어야 합니다. 적절한 언어 태그에 대해 약간의 혼란이 있습니다. 세르비아어의 경우, 미디어위키는 sr-EC와 sr-EL을 사용해 왔지만, BCP 47에 따라 이 태그는 EC(에콰도르) 지역에서 사용되는 세르비아어와 EL(미지정 지역)에서 사용되는 세르비아어를 의미합니다. 올바른 언어 태그는 sr-Cyrl 및 sr-Latn입니다. 키릴 문자 언어 태그는 라틴 문자 언어 태그 앞에 있어야 SVG 1.1 switch 처리에서 사용자가 sr을 포함하는 언어 기본 설정을 지정한 경우 키릴 문자를 선택할 수 있습니다. (미디어위키는 적절한 언어 태그를 사용하기 시작했습니다. Phab:T117845를 참조하십시오.)

중국어는 더 복잡합니다. zh는 모든 중국어 방언(예: 관화 또는 광둥어)을 참조하는 매크로랭귀지 하위 태그입니다. zh-cmn으로 관화를 지정할 수도 있지만 IETF 레지스트리[2]에서는 cmn을 사용하는 것을 선호합니다. 마찬가지로 광둥어의 경우 IETF는 zh-yue 대신 yue를 선호합니다. 한자를 지정할 수도 있습니다. Hans는 간체자, Hant는 번체자입니다. 중국어에 어떤 언어 태그를 사용해야 하는지는 명확하지 않습니다. 간단한 접근 방식은 zh-Hans 또는 zh-Hant를 사용하여 문자를 지정하는 것입니다. (IETF 레지스트리에서는 두 가지를 모두 ‘중복’으로 표시하지만 선호하는 대안은 제공하지 않습니다.) 대안으로 cmn-Hans 또는 cmn-Hant와 같이 방언과 문자를 함께 지정할 수 있으며 cmn-Hans-CN과 같이 지역 언어 태그를 추가할 수 있습니다. (중국에서 사용되며 간체자를 사용하는 관화)

미디어위키의 경우, 세르비아어 페이지는 키릴 문자 또는 라틴 문자로 렌더링할 수 있는 공통 소스를 가지고 있습니다. 마찬가지로 중국어 문서에는 간체자 또는 번체자로 렌더링할 수 있는 공통 소스가 있습니다. 이상적으로는 중국어 사용자가 간체자를 선택하면 문서의 모든 이미지가 간체자로 렌더링되는 것입니다. 이상적인 효과는 다음과 같습니다.

  • zh-Hant 사용자의 경우 [[File:xyz.svg|lang=zh-hant|...]] 사용.
  • zh-Hans 사용자의 경우 [[File:xyz.svg|lang=zh-hans|...]] 사용.

미디어위키에서 이 작업을 수행할 수 있는지 또는 어떻게 수행할 수 있는지는 명확하지 않습니다.

Large attributes

The maximum size of an attribute or text node of an SVG in MediaWiki is 10 MB. This means an embedded raster image cannot exceed 6.9 MiB in size. Using embedded raster images is discouraged.

위키미디어 공용을 위한 SVG 이미지 만들기

SVG 이미지를 만드는 데 사용할 수 있는 프로그램은 아래 § 편집기에 나와 있습니다. 또는 텍스트 편집기나 IDE를 사용하여 SVG 코드를 직접 편집할 수도 있습니다.

다음 섹션에서는 SVG의 구체적인 기능에 대해 설명합니다.

업로드하기 전에: 유효성 검사 및 이미지 모양 확인

유효성 검사

위키미디어 공용의 필수 요건은 아니지만, 업로드하기 전에 월드 와이드 웹 컨소시엄 (W3C) XML 유효성 검사기 (https://validator.w3.org) 를 통해 파일을 실행해보는 것이 좋습니다. 유효성 검사기는 다른 플랫폼에서 파일이 잘못 렌더링될 수 있는 SVG 파일의 문제를 찾아낼 수 있습니다. 예를 들어 유효성 검사에서는 비표준이며 제대로 지원되지 않는 flowText 요소의 사용에 대해 경고를 표시합니다. 그러나 일반적으로 파일 유효성 검사가 재업로드를 정당화하지는 않으며,[3] 예외적인 경우는 이미 업로드한 SVG 최적화하기를 참조하십시오.

SVG 파일에 DOCTYPE 선언이 있는 경우 유효성 검사기는 해당 DTD를 사용하여 구문을 검사합니다. DOCTYPE이 없는 경우(필수 사항도 아니며 권장 사항도 아님)[4][5] 유효성 검사기는 파일이 올바른 형식의 XML인지 확인할 수 있지만 파일이 SVG임을 인식하고 해당 파일을 nu 유효성 검사기로 전달하여 비 DTD 유효성 검사를 수행할 수 있습니다. W3C 유효성 검사기 웹 페이지에서 파일을 SVG 1.1로 유효성 검사하도록 선택할 수 있습니다. (곧 출시될 SVG 2 초안에서는 SVG DTD에 대한 참조가 제거될 예정입니다.)

SVG 문서에 추가 이름공간이 있는 경우 유효성 검사기는 이에 대해 경고를 표시합니다. 어도비 일러스트레이터 및 잉크스케이프와 같은 많은 도구는 추가 이름공간에 노드를 삽입합니다.

공통 접두사 이름공간 목적
cc http://creativecommons.org/ns# 권한 및 라이선스
cdml http://www.freesoftware.fsf.org/bkchem/cdml 화학 도표
dc http://purl.org/dc/elements/1.1/ 메타데이터
i http://ns.adobe.com/AdobeIllustrator/10.0/ 어도비 일러스트레이터
inkscape http://www.inkscape.org/namespaces/inkscape 잉크스케이프
its http://www.w3.org/2005/11/its 국제화 태그 세트
rdf http://www.w3.org/1999/02/22-rdf-syntax-ns# 리소스 설명 형식
serif http://www.serif.com/ 세리프 선호도 (공백과 같은 부적절한 문자로 인해 표준 id 속성에 저장할 수 없는 개체 이름에 사용됨)
sodipodi http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd 그래픽스
svg http://www.w3.org/2000/svg SVG
xlink http://www.w3.org/1999/xlink XML 링킹 언어

W3C 유효성 검사기에 적절한 Content-Type HTTP 헤더와 함께 파일이 제공되면 해당 파일은 SVG 1.1+XHTML+MathML 3.0으로 유효성이 검사됩니다. (UI 드롭다운 상자에서는 사용할 수 없는 옵션) 이 유효성 검사는 보다 최신의 두 번째 유효성 검사기인 nu 유효성 검사기 (https://validator.w3.org/nu) 에 의해 수행됩니다. 또한 유효성 검사는 rdf 이름공간 요소 트리에 대해 오류를 표시하지 않으며 스키마를 사용하여 inkscape 및 sodipodi 이름공간을 검사합니다. SVG 1.1+XHTML+MathML 3.0 유효성 검사는 {{ValidSVG}}로 사용합니다.

다른 이름공간은 여전히 유효성 검사 오류를 일으킵니다. W3C nu 유효성 검사기는 nsfilter 매개 변수를 사용하여 다른 이름공간에 대한 오류를 억제하도록 지시할 수 있습니다.[6]

또한 SVG 1.1이 아닌 속성은 유효성 검사 오류를 발생시킵니다. SVG 2.0 초안에서는 HTML 5.0과 마찬가지로 사용자가 임의의 data-* 속성을 포함할 수 있지만 W3C 유효성 검사기는 이에 대해 경고를 표시합니다.

유효성이 검사된 파일에 태그를 지정하는 방법에 대해서는 § SVG 파일 태그하기를 참조하십시오.

이미지 모양

소프트웨어 프로그램과 브라우저 플랫폼에 따라 완전히 동일한 SVG 파일이 약간 다른 방식으로 렌더링될 수 있습니다. 벡터 이미지 편집기에서 최종 이미지를 보는 방식은 해당 이미지가 위키미디어 공용에 업로드되어 다른 사람이 볼 때 어떻게 보일지를 반영하지 않을 수 있습니다. 또한 모든 SVG 이미지는 위키백과 문서에 사용될 때 자동으로 PNG 파일로 변환되며, 이는 최종 이미지의 모양에도 영향을 미칠 수 있습니다. 전자의 예로, 매우 가는 획이 연속적으로 포함된 이미지의 경우 편집기에서는 해당 획이 SVG로 변환된 후 웹 브라우저에서 볼 때보다 훨씬 굵고 굵어 보일 수 있습니다. SVG 파일을 만드는 사람은 작업을 SVG 형식으로 저장한 다음 두세 개의 다른 브라우저에서 동일한 이미지를 열어 의도한 대로 렌더링되는지 확인하는 것이 좋습니다. 다른 이미지 편집 프로그램에서 파일을 열어서도 비슷한 확인 작업을 수행할 수 있습니다.

위키미디어 공용에서 SVG가 PNG로 렌더링되는 방식을 확인하려면 위키미디어 공용 SVG 체커를 참조하십시오.

동일한 파일이 컨텍스트에 따라 다르게 렌더링되는 이유는 이러한 컨텍스트(브라우저 또는 프로그램)가 파일의 SVG 코드를 해석하고 해당 코드를 사용하여 이미지를 생성하는 방식에 따라 달라지기 때문입니다. 어떤 브라우저에서 열어도 올바르게 렌더링되는 ‘최소 공통 분모’ SVG를 만드는 것을 목표로 하고, 자신의 이미지 편집 프로그램이 다른 뷰어에게 실제 이미지가 어떻게 보이는지 보여줄 것이라고 가정해서는 안 됩니다. 벡터 그래픽 편집기가 아닌 웹 브라우저에서 SVG를 미리 보면 몇 가지 문제를 발견할 수 있습니다. 특히 DOM 검사기 도구와 함께 사용하면 SVG 코드를 조정하고 수정하는 데 도움이 될 때가 있습니다.

또한 일부 프로그램에서는 래스터 기반 구성 요소를 파일에 삽입할 수 있지만, 파일이 SVG로 변환될 경우 이러한 구성 요소가 벡터로 동시에 변환되지 않는다는 경고 없이 삽입할 수 있으므로 이미지에 포함하는 필터 및 효과의 종류에 매우 주의해야 하며, 위키미디어 공용에 SVG를 업로드하기 전에 이미지 내에 불필요하게 포함된 ‘링크’가 없는지 확인해야 합니다. 이를 수행하는 방법은 프로그램마다 다릅니다.

그러나 어도비 일러스트레이터를 사용하는 경우 일러스트레이터에서 패스를 래스터 컴포넌트로 변환하게 되는 예는 다음과 같습니다.

  • 일러스트레이터에 자동으로 포함된 패턴을 포함하여 모든 채우기에 적용된 모든 패턴. 사용한 패턴을 래스터로 직접 변환한 다음 이미지 --> 추적 기능을 사용하여 다시 벡터로 변환하여 이 문제를 해결할 수 있습니다.
  • 일러스트레이터의 ‘효과(Effect)’(예: 어안 왜곡 및 자유 변형)를 2개 이상 포함하는 모든 패스. 일러스트레이터는 이 2가지를 단일 패스의 모양(Appearance) 메뉴에서 처리할 수 없으며 모두 래스터화합니다.
  • 둘러싸기 왜곡(Envelope Distort)으로 변경된 모든 패스. 위에서 언급한 패턴 문제를 해결하는 것과 같은 방법으로 이 문제를 해결할 수 있지만 결과는 대개 실망스럽습니다.
  • 효과 메뉴에서 래스터 효과가 할당된 모든 패스. 벡터로 유지하려면 이 효과를 실행 취소하기만 하면 됩니다.
  • 일러스트레이터에서는 획(stroke) 안의 그레이디언트, 획을 따라 가는 그레이디언트, 획을 가로지르는 그레이디언트의 3가지 방법으로 획에 그레이디언트를 적용할 수 있습니다. 그러나 이중 첫 번째 방법인 획 안의 그레이디언트만 동등한 SVG 코드에서 지원되며, 획을 따라 가는, 또는 가로지르는 그라데이션이 포함된 모든 획은 이미지를 SVG 형식으로 저장할 때 래스터로 변환됩니다.

이는 벡터를 의도했을 때 일러스트레이터가 래스터를 생성하게 하는 몇 가지 예에 불과합니다. 이러한 패스가 단순할수록 일러스트레이터가 벡터로 유지할 가능성이 높아집니다.

미디어위키에서 SVG 파일을 확인하는 방법에 대한 자세한 내용은 § 미디어위키에서 SVG 파일이 작동하는 방식을 참조하십시오.

문서 선언

<?xml version="1.0" encoding="UTF-8"?>
<svg
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 version="1.1"
 viewBox="0 0 400 300"
>

모든 SVG 파일의 소스 코드는 XML 처리 명령으로 시작해야 합니다.[7] XML 처리 명령은 XML 버전과 문자 집합을 지정합니다.[8] W3C는 문자 인코딩 선언을 사용해야 한다고 주장합니다.[9] (W3C의 유효성 검사기는 이 선언이 없을 경우에만 경고합니다.) SVG 파일을 생성하거나 편집하는 소프트웨어에서 문자 인코딩을 선택할 수 있는 옵션이 제공되어야 합니다. 국제화를 위해 UTF-8을 권장하며, UTF-8 이외의 ANSI 또는 유니코드 인코딩은 사용하지 않는 것이 좋습니다. XML 선언이 없으면 위키미디어 서버의 SVG 소스 파일을 브라우저에서 열 때 이미지로 렌더링되지 않고 원시 XML 코드가 표시되어 약간의 혼란이 발생할 수 있습니다. SVG 소스 파일을 장치에 다운로드하여 로컬에서 열면 문제가 되지 않습니다.

DTD가 포함된 DOCTYPE 선언은 필요하지 않으며 공식적으로 DTD를 사용하지 않는 것이 권장되지는 않지만[5] DTD를 사용하지 않는 것이 권장되는 것도 아닙니다. SVG 1.0과 SVG 1.1에는 DTD 사양이 있지만 SVG 2.0에는 없습니다. SVG DTD는 SVG의 유효성을 검사하지만 DTD는 확장을 인식하지 못합니다. 따라서 DTD 유효성 검사기는 RDF 메타데이터와 잉크스케이프가 SVG 출력에 포함하는 추가 요소 및 속성을 오류로 나열합니다. 위키미디어 서버는 또한 DTD의 내부 하위 집합에 포함될 수 있는 항목을 제한하므로 더 이상 추가 요소와 속성을 포함하도록 SVG DTD를 확장할 수 없습니다.

svg 루트 요소는 다음과 같아야 합니다. SVG 이름공간이 없으면 SVG 이미지가 렌더링되지 않으므로 반드시 SVG의 XML 이름공간 xmlns="http://www.w3.org/2000/svg"를 지정해야 합니다.[10] (기본 이름공간은 xmlns로 지정됩니다.) 다른 이름공간은 svg 요소에 포함될 수 있습니다. 예를 들어 파일에서 링크를 사용하는 경우[11] xlink 이름공간 xmlns:xlink="http://www.w3.org/1999/xlink"를 선언해야 합니다. SVG version 번호가 포함되어야 합니다. (일반적으로 1.1) 소프트웨어는 일반적으로 이러한 이름공간 선언을 제공하며 다른 이름공간을 포함할 수도 있습니다.

width 및 height 속성의 기본값은 "100%"이며, 이 기본값을 사용하면 자동 크기 조정이 허용됩니다. width="400px"을 지정한 이미지는 컨테이너를 깔끔하게 채우는 대신 400픽셀 크기로 표시되기를 원한다고 선언하는 것입니다. 안타깝게도 많은 소프트웨어 도구는 이러한 속성에 대해 고정된 크기를 지정합니다. svg 요소는 viewBox[12] 속성을 지정해야 합니다. 보기 상자는 이미지의 표시 부분을 지정하며, 보기 상자는 컨테이너의 너비와 높이에 맞게 변환되고 크기가 조정됩니다.

비트맵

사진에 주석을 달거나 해부학 사진의 부위에 이름표를 붙이는 등 SVG 파일 내에서 비트맵 이미지를 유용하게 사용할 수 있는 경우가 있습니다. 하지만 대부분의 경우 SVG 파일에서 비트맵을 사용할 필요는 없으며, 비트맵은 벡터로 변환하거나 다시 그리는 것이 더 좋습니다. 어떤 이유로든 이것이 최선의 해결책이라면 SVG 파일에 비트맵을 포함해야 하지만, 전반적으로 더 나은 이미지나 더 많은 정보를 얻을 수 있다면 벡터로 다시 그려야 합니다. 또한 위키미디어 공용에서 이미지를 접한 다른 편집자는 바람직하지 않은 래스터 기반 요소가 포함된 SVG 이미지에 {{BadSVG}} 태그를 붙일 수 있습니다.

SVG 파일에 비트맵을 사용할 때는 신중하게 생각하고, 이미지에 비트맵을 직접 포함하기보다는 변환하거나 벡터로 다시 그리는 것을 고려하십시오. 이 문제에 대한 자세한 내용은 토론 페이지를 참조하십시오. 비트맵 이미지를 사용하기로 결정한 경우 이미지에 연결하지 말고 포함해야 하며, 그렇지 않으면 렌더링되지 않습니다.

애니메이션

SVG 이미지에 애니메이션을 적용할 수 있지만 SVG는 위키미디어 프로젝트에서 사용하기 위해 래스터 PNG 형식으로 변환되기 때문에 SVG 파일이 브라우저에 불러와질 때만 애니메이션이 표시됩니다. 문서 페이지에서 이미지를 클릭하여 File: 페이지로 이동한 다음 해당 이미지를 클릭하여 SVG를 불러와야 합니다.

원래 SVG를 애니메이션하는 방법은 SMIL을 사용합니다. 최근에는 CSS 애니메이션을 사용할 수 있습니다.

SMIL은 여러 브라우저에서 지원이 줄어들고 있습니다. 인터넷 익스플로러는 지원하지 않았고, 구글은 2015년부터 SMIL을 더 이상 권장하지 않았으며 향후 구글 크롬에서 SMIL을 완전히 제거할 가능성이 있습니다.[13] 2018년 7월 현재, 인터넷 익스플로러, 에지, 오페라를 제외한 대부분의 브라우저에서 SVG SMIL 애니메이션을 사용할 수 있습니다.[14]

SVG 파일을 애니메이션으로 표시하는 방법에 대해서는 § SVG 파일 태그하기를 참조하십시오.

제목

SVG 요소 바로 아래에 있는 title 요소는 SVG 이미지 자체의 제목 이름으로 사용되지만, SVG 이미지 내의 하위 요소 내부에 추가로 적용될 수도 있습니다. 대부분의 최신 데스크톱 브라우저는 이러한 제목을 팝업 말풍선으로 렌더링하여 객체 옆에 텍스트 레이블이 있어도 마우스 오버 시 객체의 의미를 파악할 수 있도록 도와줍니다. 마찬가지로 텍스트에도 제목을 적용하여 메시지를 축소할 수 있지만 밑줄과 같은 텍스트 장식을 사용하여 제목 요소의 존재에 대한 힌트를 주는 것이 좋습니다. XML 주석은 일반적으로 사용자에게 표시되어서는 안 되는 기술 정보에 더 적합하지만 SVG 소스 코드를 편집할 수 있는 다른 사용자에게 전하는 정보에도 적합합니다.

현재 대부분의 모바일 브라우저는 모바일 장치에서 포인터를 가져다 놓는 동작이 없기 때문에 SVG 요소 바로 아래에 있는 것을 제외하고는 제목 콘텐츠를 기본적으로 표시할 수 없습니다. 

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 50 50">
	<title>전체 SVG 이미지 제목</title>
	<g id="shapes">
		<title>‘shapes’ 그룹 제목</title>
		<rect x="0" y="0" width="10" height="20" fill="#f00">
			<title>사각형 제목</title><!--XML comment-->
		</rect>
		<circle cx="5" cy="5" r="3" fill="#0f0"/>
		<text x="2" y="30" text-decoration="underline">텍스트
			<title>텍스트 제목</title>
		</text>
	</g>
</svg>

차단된 요소 및 스크립팅

보안상의 이유로 미디어위키는 다음 패턴이 포함된 SVG 파일을 허용하지 않습니다. 

<!--not whitelisted namespaces-->
xmlns:d="http://www.w3.org/2000/02/svg/testsuite/description/"
xmlns="http://www.w3.org/1999/xhtml"
xmlns="http://www.example.org/notsvg"
xmlns="http://example.org/notsvg"
xmlns:bd="http://example.org/ExampleBusinessData"
<!--no external content-->
xlink:href="../resources/SVGFreeSans.svg#ascii"
xlink:href="animate-elem-09-t.svg"
xlink:href="url(#testPattern)"
<image xlink:href="http://example.org/image.jpg"/>
<d:testDescription href="http://www.w3.org/TR/SVG11/styling.html#StylingWithCSS">
<image xlink:href="data:image/svg+xml;base64,"/>
<!-- attributeName -->
<set attributeName="xlink:href"/>
<animate attributeName="xlink:href"/>
<set xlink:href='#s'/>
<set attributeName='xlink:href'/>
<!-- css -->
@import
url("../images/selector-types-visibility-hidden.css")
url(woffs/embeded-text-text-05.woff)
<!-- scipts -->
<script></script>
<!-- interactive -->
onactivate=""
onbegin=""
onclick=""
onend=""
onfocusin=""
onfocusout=""
onload=""
onmousedown=""
onmousemove=""
onmouseout=""
onmouseover=""
onmouseup=""

문제가 있는 SVG 파일을 정정하려면 https://svgworkaroundbot.toolforge.org/ (santicize potenitally dangerous commands 활성화)를 사용할 수 있으며, 자세한 내용은 User:JoKalliauer/IllegalSVGPattern에서 확인할 수 있습니다.

제한된 기능으로 인해 XML 파서는 다음 패턴을 인식하고 차단하지 못합니다. 

<!--ATTLIST-->
<!DOCTYPE svg [
<!ATTLIST bar id ID #REQUIRED>
]>
<!--ENTITY with more than one element-->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Basic//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd" [
  <!ENTITY Smile "
    <rect x='.5' y='.5' width='29' height='39' fill='black' stroke='orange' stroke-width='2'/>
    <g transform='translate(0, 5)'>
      <circle cx='15' cy='15' r='10' fill='yellow'/>
      <circle cx='12' cy='12' r='1.5' fill='black'/>
      <circle cx='17' cy='12' r='1.5' fill='black'/>
      <path d='M 10 19 L 15 23 20 19' stroke='black' stroke-width='2'/>
    </g>
  ">
  <!ENTITY Viewport1 "<rect x='.5' y='.5' width='49' height='29' fill='none' stroke='blue'/>">
  <!ENTITY Viewport2 "<rect x='.5' y='.5' width='29' height='59' fill='none' stroke='blue'/>">
]>

외부 파일

SVG 이미지의 최종 버전을 저장하기 전에 SVG를 만드는 데 사용한 다른 파일에 대한 참조를 제거해야 합니다. (‘연결’이라는 뜻) 이러한 참조가 SVG 텍스트에 남아 있으면 렌더링이 외부 파일을 찾지 못하고 실패합니다. 위키미디어는 이러한 업로드를 차단하므로 더 이상 업로드할 수 없습니다.

정리하기

또한 사용하지 않는 정의(defs)는 불필요하게 파일 크기를 부풀릴 수 있으므로 제거하거나 ‘진공 청소기’로 청소하는 것이 좋습니다. (기본 틀과 같은 추가 편집을 위해 필요한 경우 제외)

일반적인 SVG 최적화 도구로 scour, svgcleaner, svgo가 있지만 3개 모두 수십 가지의 버그가 있으며 더 이상 활발하게 개발되지 않는다는 점에 유의하십시오. 더 많은 최적화 옵션과 사용 방법에 대한 참조는 최적화 도구 사용하기를 참조하십시오.

그러나 정리 작업은 논란의 여지가 있으며 종종 바람직하지 않다는 점에 유의하십시오. 자세한 내용과 이유는 파일 최적화/검증은 언제 바람직하지 않은가요?를 참조하십시오. 정리 또는 유효성 검사를 한다고 해서 재업로드가 정당화되지는 않습니다.[15] 잘못된 요소와 속성은 올바른 렌더링을 위해 필요한 경우가 많으므로 제거해서는 안 됩니다.[16]

플레인 SVG, 압축 SVG, 일반 사양

잉크스케이프 및 기타 프로그램을 사용하면 SVGZ (압축 바이너리 SVG) 형식으로 파일을 저장할 수도 있습니다. 이 형식은 위키미디어 공용에서 지원되지 않으며 여기에 업로드된 이미지에 적용해서는 안 됩니다. 이러한 이미지는 업로드할 수 없습니다.

어도비 일러스트레이터와 잉크스케이프는 저장 옵션이 다르므로 도움말:잉크스케이프#잉크스케이프 SVG와 플레인 SVG 비교 및 도움말:일러스트레이터#일러스트레이터 SVG로 저장하는 방법을 참조하십시오. 잉크스케이프에는 사용할 수 있는 SVG 옵션으로 ‘잉크스케이프 SVG’, ‘일반 SVG’, ‘최적화된 SVG’ 3가지가 있습니다. 잉크스케이프 SVG는 잉크스케이프에서 파일을 다시 편집하는 데 가장 적합한 파일 형식이며, 그렇지 않으면 레이어 또는 격자 등의 정보가 제거되므로 이러한 이미지는 {{Created with Inkscape|IMPORTANT=yes}}로 태깅하여 최적화되지 않았음을 표시해야 합니다. 일반 SVG는 잉크스케이프 SVG와 동일하게 렌더링되며 약간 더 작습니다. 최적화된 SVG는 scour라는 최적화 프로그램을 사용하여 파일 크기를 훨씬 더 줄일 수 있으며, phab:T217990과 같은 librsvg 버그에 대한 몇 가지 해결 방법을 제공합니다.[17]

글꼴, 텍스트

Shortcut

위키미디어 서버에 설치된 여러 무료 글꼴은 <text> 태그를 사용하여 렌더링할 수 있습니다. 메타위키에서 샘플 렌더링을 찾거나 원시 목록을 확인할 수 있습니다. 웹 글꼴은 전혀 지원되지 않습니다. 일부 글꼴은 일반 스타일로 사용할 수 없고 굵게 또는 이탤릭체와 같은 다른 글꼴로만 사용할 수 있으므로 리버레이션과 같은 대체 글꼴을 고려하십시오. 다음과 같은 이유로 이러한 글꼴을 사용하고 텍스트를 패스로 변환하지 않는 것이 좋습니다.

  • 패스가 아닌 글꼴로 저장하면 특히 이미지에 많은 양의 텍스트가 포함된 경우 전체 파일 크기를 크게 줄일 수 있습니다.
  • 이미지의 오타나 문법 오류를 전체 텍스트 세트를 다시 그리지 않고도 다른 편집자가 수정할 수 있습니다.
  • 현지화 기여자가 모든 텍스트 이름표를 다시 배치하는 번거로움 없이 텍스트를 다른 언어로 쉽게 번역할 수 있으며, 이는 위키미디어 공용이 다국어 프로젝트이기 때문에 중요한 특징입니다. 패스는 번역하는 데 훨씬 더 많은 작업이 필요합니다. 틀:번역을 참조하십시오.
  • 텍스트는 패스 윤곽선을 인식하지 못하는 검색 엔진으로 쉽게 검색할 수 있습니다.

또한 글꼴을 패스로 변환할 때 해당 글꼴에 허용되는 무료 라이선스가 없는 경우 저작권 문제가 발생할 수 있습니다. (이러한 벡터 이미지는 글꼴의 2차적 저작물이 됩니다.) WP:PD#글꼴 및 서체를 참조하십시오.

텍스트를 패스 모양으로 변환해서는 안 되는 SVG 파일은 {{Path text SVG}}로 태그를 지정할 수 있습니다. 수정할 수 있는 텍스트(‘텍스트’ 또는 ‘글꼴’이라고 부르는 것)와 수정할 수 없는 텍스트(즉, 패스 기반) 버전의 SVG 파일을 연결하려면 {{Vector text versions|…}}을 사용하십시오.

텍스트가 선택 가능(브라우저에서 실시간으로 열었을 때)하고 검색 가능(구글과 같은 검색 엔진에서)한 상태로 유지될 수 있도록 잉크스케이프에서 패스로 변환하기 전에 텍스트를 보존하는 기본 단계를 시연합니다.

textPath 함수가 지원되지 않거나 대부분의 글꼴에 없는 희귀 글리프 등의 이유로 텍스트를 패스로 변환해야 하는 경우 원시 텍스트 그룹을 복제하여 변환된 텍스트와 겹치게 하고 이 그룹에 fill-opacity="0" stroke-opacity="0" 속성을 추가하여 원시 텍스트를 숨기도록 해야 합니다. 이렇게 하면 원본 SVG 파일의 텍스트를 독자가 수동으로 검색하고 클릭하고 강조 표시할 수 있습니다. opacity="0"는 선택 가능하지만 강조 표시를 보이지 않게 하므로 오해를 불러일으킬 수 있습니다. display="none"은 독자가 소스 코드에 액세스하지 않고 텍스트를 검색할 수 없도록 합니다.

벡터 그래픽 소프트웨어가 text-align 속성을 text-anchor로 변환하지 않고 위키미디어의 대체 글꼴이 이미지 기여자가 선택한 글꼴과 다른 글꼴 메트릭을 가지고 있기 때문에 SVG를 내보내기 전에 텍스트를 윤곽선(패스)으로 변환하는 것은 어도비 일러스트레이터 사용자에게 특히 인기가 있습니다. 이로 인해 텍스트 위치가 잘못 지정되고 사용자가 벡터 파일에 원시 텍스트를 유지함으로써 얻을 수 있는 이점을 무시하게 됩니다.

<span id="Not_displayed_text_(Flowed_Text_bug)_">

텍스트가 표시되지 않음 (플로 텍스트 오류)

See also: § Line wrap.

잉크스케이프는 주어진 텍스트 상자의 경계에 맞게 텍스트를 자동으로 감싸는 ‘플로 텍스트’라는 기능을 지원합니다. 안타깝게도 이 기능은 아무도 지원하지 않는 SVG 타이니 1.2의 일부입니다. 이 기능을 사용하면 거의 확실하게 호환성 문제가 발생할 것입니다.[18] 위키백과에서는 플로 텍스트 상자가 전혀 렌더링되지 않습니다. (phab:T43424 - 글꼴 크기와 색상에 따라 다름)[19]

잉크스케이프에서 이 문제를 방지하려면:

  • 가장 쉬운 방법은 (드래그하지 않고) 한 번만 클릭하여 잉크스케이프의 텍스트 도구로 텍스트를 만드는 것입니다. (마우스 버튼을 누른 채 드래그하여 텍스트 상자를 그리는 경우는 잉크스케이프가 플로 텍스트를 사용하도록 지시하는 것입니다.)

그러나 이 문제를 쉽게 해결할 수 있는 몇 가지 방법이 있습니다.

  • 플로 텍스트 상자를 이미 생성한 경우 텍스트 → 텍스트로 변환을 사용하여 일반 텍스트로 변환할 수 있습니다.[20] (단, 텍스트가 번역되거나 텍스트 정렬이 변경되는 경우가 약 15%이므로[21] 나중에 텍스트 정렬을 확인하십시오.[22])
  • 한 줄로만 구성된 플로 텍스트가 있는 경우 (10건 중 9건 이상에서와 같이) 사각형의 x 및 y 좌표가 포함된 <text x=".." y=".."> 태그로 flowRegion을 바꾸면 모든 텍스트 편집기에서 간단한 텍스트(잉크스케이프와 정확히 동일하게 생성)로 변환할 수 있습니다. User:JoKalliauer/RepairFlowRoot#replace the flow-text by <text> using (Text-Editor)에서 자동으로 문자열을 편집하는 스크립트[23]를 찾을 수도 있습니다.

실수로 비어 있는 (즉, 텍스트가 포함되지 않은) 플로 텍스트 상자를 만든 경우 잉크스케이프에서는 표시되거나 선택할 수 없지만 위키백과에서는 여전히 검은색 사각형으로 표시됩니다. 이를 삭제하려면 몇 가지 방법이 있습니다.

  • 잉크스케이프에 내장된 XML 편집기(편집 → XML 편집기)를 사용하여 모든 플로 텍스트 상자를 삭제합니다. (트리 보기에서 <svg:flowRoot id="flowRootXXXX">라고 하는 모든 노드 검색)
  • 간단한 텍스트 편집기(예: 메모장)를 사용하여 ‘flowRoot’ 텍스트를 검색합니다. 모든 플로 텍스트 상자의 여는 XML 태그 (<flowRoot ...>), 닫는 XML 태그 (</flowRoot>) 및 일치하는 두 태그 사이의 모든 텍스트를 제거하여 수동으로 삭제합니다.[24]
  • 보이지 않는 직사각형을 숨기려면 <rect … fill-opacity="0"/> 태그에 fill-opacity="0"을 추가하면 됩니다. (또는 <path d="…" fill-opacity="0"> 태그에)

텍스트 변형 제한 사항

SVG 원시 텍스트 렌더링과 패스로 변환된 텍스트의 비교.

(유효 변환 매트릭스에 따라) 가로 및 세로 배율이 같지 않은 경우 글꼴 배율이 현재 예상대로 작동하지 않습니다. (가로 늘임은 무시되고 현재 매트릭스에서 계산된 글꼴 높이만 적용됨) 이로 인해 다른 글꼴에서 좁게/축소되거나 폭이 확장된 스타일로 렌더링할 때 텍스트가 예상치 못한 폭을 취하고 예상 상자 밖으로 흘러나오는 등 올바른 렌더링이 되지 않을 수 있습니다. (대안은 이미 좁혀진/축소된 대체 무료 글꼴 패밀리를 선택하는 것입니다.)

스케일링 배율(예: 0.5, 2, 4)이 얼마나 ‘규칙적인지’에 관계없이 PNG 렌더링의 해상도가 SVG 파일 자체에 정의된 기본 치수와 동일하지 않으면 텍스트가 잘못 배치될 수 있습니다.[25] (경우에 따라 커닝이 어색해질 수 있음) (phab:T36947) 어떤 경우에도 글꼴 크기가 너무 작거나 (>10px) 큰 글꼴을 사용한 다음 텍스트 또는 전체 이미지의 크기를 원하는 크기로 조정하지 마십시오. 항상 적당한 글꼴 크기로 시작하십시오.[26] (안타깝게도 80px 내외의 크기가 가장 좋습니다.)

글꼴 메트릭 차이도 주의하십시오. SVG 파일은 윈도나 맥 OS(쿠리어나 쿠리어 뉴와 같은 무료 글꼴이 아닌 일반 글꼴을 사용할 수 있는)의 SVG 지원 (모든 최신) 브라우저에서 직접 렌더링할 때는 보기 좋지만, 미디어위키의 SVG-PNG 렌더러가 현재 지원하는 무료 글꼴 목록으로 제한하면 (또는 리눅스의 무료 배포판 같은 OS에서 볼 때) 다른 모습으로 보일 수 있습니다. (‘글꼴 대체 및 폴백 글꼴’ 부분 참조)

textLength 속성이 완전히 지원되지 않아 올바르게 렌더링할 수 없습니다. phab:T15387을 참조하십시오.

쓰기 방향 제한

세로쓰기의 이점을 누릴 수 있지만 특정 글꼴을 사용할 수 없는 중국어로 된 도표.

RSVG는 writing-mode 속성을 인식하지만 올바르게 구현하지는 않습니다. 이 속성에 기본값이 아닌 값(즉, 가로쓰기가 아닌 다른 값)을 지정하면 텍스트가 특정 글꼴(phab:T65236)로 렌더링되는 동안 모든 문자가 함께 뭉쳐집니다. 예를 들어 세로쓰기 텍스트를 생성하는 일반적인 방법이 작동하지 않습니다. 

<text x="50" y="50" writing-mode="tb-lr" font-size="15px">東涌綫</text>

대체 쓰기 모드가 여전히 필요한 경우 (예: 아시아 언어의 경우 세로쓰기 모드) 이 속성에 의존하지 말고 모든 문자를 개별적으로 정렬하세요.


글꼴 대체 및 폴백 글꼴

폴백 글꼴이 렌더링되는 방식.

SVG 글꼴 사양에서는 에어리얼(Arial) 또는 타임스 뉴 로먼(Times New Roman)과 같은 특정 글꼴 패밀리를 사용할 수 있습니다. 이러한 글꼴 사양은 일반적으로 사용자 에이전트가 해당 이름의 글꼴 파일에 액세스할 수 있어야 함을 의미합니다. 안타깝게도 많은 글꼴은 독점적이어서 모든 운영 체제에서 사용할 수 없습니다. 예를 들어 모든 운영 체제에서 독점적인 에어리얼 글꼴을 사용할 수 있는 것은 아닙니다. 특정 글꼴 패밀리를 사용할 수 없는 경우에는 일부 기본 글꼴이 사용되며, 기본 글꼴의 모양이 매우 다를 수 있습니다. 사용자 에이전트 librsvg의 경우 기본 글꼴은 리버레이션 세리프(Liberation Serif)입니다.

많은 사용자 에이전트에는 사용자 에이전트가 가까운 글꼴 패밀리로 대체할 수 있는 글꼴 대체 테이블이 있습니다. 글꼴 일치를 개선하기 위해 SVG에서는 font-family가 글꼴 패밀리 이름의 목록이 될 수 있으며, 사용자 에이전트는 가장 먼저 인식하는 글꼴 패밀리를 사용합니다. 그래픽 아티스트는 사용자 에이전트가 원하는 글꼴을 가질 확률을 높이기 위해 유사한 마이크로소프트, 애플 및 유닉스 글꼴을 나열할 수 있습니다. 또한 SVG는 CSS 일반 글꼴 패밀리 사양을 지원합니다.[27][28] 즉, 대부분의 SVG 사용자 에이전트는 serif, sans-serif, cursive, fantasy, monospace의 일반 글꼴 패밀리를 지원해야 합니다. 글꼴 패밀리 목록의 마지막 항목으로 일반 글꼴 패밀리를 사용하는 것이 좋습니다. 위키미디어 공용의 librsvg의 경우는 다음과 같습니다.

  • sans-serif는 데자뷔 산스(DejaVu Sans)로 매핑됨
  • serif는 데자뷔 세리프(DejaVu Serif)로 매핑됨
  • cursive는 데자뷔 산스(DejaVu Sans)로 매핑됨
  • fantasy는 데자뷔 산스(DejaVu Sans)로 매핑됨
  • monospace는 데자뷔 산스 모노(DejaVu Sans Mono)로 매핑됨

위키미디어 공용에서 librsvg는 m:SVG 글꼴#라틴(기본) 글꼴 비교에 나열된 글꼴을 가지고 있습니다. 해당 글꼴만 사용하면 librsvg를 사용하여 이미지를 표시하는 위키백과 문서에서 좋은 결과를 얻을 수 있지만, 그래픽 아티스트는 다른 사용자 에이전트가 SVG 파일을 표시할 수도 있다는 사실을 알고 있어야 합니다. 따라서 일반적인 글꼴 패밀리(예: Arial) 또는 일반적인 글꼴 패밀리로 끝나는 글꼴 패밀리(예: Trebuchet, sans-serif)를 사용하는 것이 가장 좋습니다.

산세리프(Sans-serif)와 같은 일반 글꼴 모음에 대한 글꼴 메트릭은 사용자 에이전트마다 크게 다를 수 있습니다. 그래픽 일러스트에서는 정확한 텍스트 요소를 측정하는 것이 중요한 경우가 많으며, 에어리얼(Arial)은 이러한 기능에 대한 사실상의 표준으로 간주될 수 있습니다. 에어리얼과 산세리프를 모두 대체 글꼴로 추가하면 에어리얼이 없거나 대체할 수 있는 글꼴이 없는 컴퓨터에서도 SVG를 최대한 잘 표시하는 데 도움이 됩니다. SVG 파일을 에어리얼과 독립적으로 만들려면 모든 font-family: Arial을 font-family: 'Liberation Sans', Arial, sans-serif로 변경합니다.

서양 문자가 아닌 문자를 사용하는 경우 해당 서체를 리버레이션 산스(Liberation Sans) 뒤에 정의해야 합니다. 예를 들어 텍스트에 한자가 포함된 경우 글꼴 패밀리는 다음과 같이 정의해야 합니다. ‘Liberation Sans, Arial, WenQuanYi Zen Hei, SimHei, sans-serif’. 이 경우 서양 글꼴을 앞에 넣는 이유는 중국어 글꼴에서 서양 문자의 품질이 낮은 경우가 많으므로 품질이 높은 글꼴을 먼저 사용하기 위해서입니다.

  • 잉크스케이프는 0.91 버전부터 폴백 글꼴을 지원합니다.
  • 어도비 일러스트레이터는 버전 18.1.1 이하(이후 버전에서도 마찬가지)에서 폴백 글꼴을 지원하지 않으므로 SVG 파일을 저장한 후 텍스트 편집기에서 수동으로 업데이트해야 합니다.
정의된 글꼴 위키 폴백 유사하게 보이는 가능한 대체 정의 (위키미디어/윈도/리눅스/맥에서 작동)
[-정의 없음-] Liberation Serif
serif DejaVu Serif[29] font-family="serif"
Times New Roman Liberation Serif font-family="Liberation Serif,Times New Roman,Times,Times-Roman,serif"
sans-serif DejaVu Sans[29] font-family="sans-serif"
Arial Liberation Sans font-family="Liberation Sans,Arial,Nimbus Sans L,Helvetica,sans-serif"
Helvetica Nimbus Sans L font-family="Nimbus Sans L,Ubuntu,Liberation Sans,Helvetica,Arial,sans-serif"
Calibri font-family="Liberation Sans,Carlito,Calibri,Segoe UI,Myriad,UnDotum,Optima,Tahoma,Arial,sans-serif"
monospace DejaVu Sans Mono font-family="monospace"
Courier New Liberation Mono font-family="Liberation Mono,Courier New,Courier,monospace"
[-그 외 모두-] DejaVu Sans


텍스트 및 tspan 요소가 있는 레이아웃

text 요소만 사용하여 이미지에 간단한 텍스트를 렌더링할 수 있지만 단어의 위치가 다른 단어에 종속된 텍스트를 처리하는 데는 tspan 요소가 유용할 수 있습니다.[30] tspan 요소는 text 요소 내에 중첩되어야 하며, 이 tspan 내에 더 많은 tspan을 중첩할 수 있으며, 부모 text 요소에 정의된 모든 스타일링은 하위 tspan 요소에 상속됩니다. 예시는 다음과 같습니다. 

<g font-size="12px">
  <text font-weight="bold" x="10" y="10">지식을 전하는 위키백과
    <tspan fill="blue"> 
      <tspan text-anchor="end" dy="12">자원봉사자</tspan>에 의해 기여됨
    </tspan>
  </text>
  <text font-style="italic" x="15" y="30">위키미디어 공용은 모든 자매 프로젝트를 위한 무료 미디어 파일을 호스팅합니다.</text>
</g>

‘g 중첩 text’ 구조와의 주요 차이점은 tspan에만 적용되는 중요한 텍스트 레이아웃 동작이 거의 없다는 점입니다. 여러 개의 text 요소가 연속적으로 정렬되어 있어도 여전히 독립적으로 배치되며, 여러 개의 tspan 요소가 연속적으로 정렬되어 있지만 두 번째 및 후속 tspan 요소에 절대 x 좌표가 지정되지 않은 경우 이러한 tspan 요소의 텍스트는 동일한 text 요소의 이전 tspan 문자 끝 바로 옆에 가로로 정렬됩니다.

그러나 text 요소의 모든 단일 tspan 요소에 대해 절대 x 좌표를 정의하더라도 tspan은 신중하게 사용해야 합니다. 이는 기본 xml:space 정의에 따라 text 또는 tspan 내에 줄 바꿈이 있는 경우 후행 공백이 추가되면 자동으로 공백 문자로 변환되기 때문입니다.[31] 연속된 줄 바꿈이 여러 개 있는 경우 여전히 하나의 공백으로 취급됩니다. 줄 바꿈 뒤에 절대 x 좌표를 가진 tspan 요소가 있고 왼쪽에 정렬되어 있는 경우(기본값인 text-anchor=start) 문제가 되지 않습니다. xml:space에 'preserve' 값을 지정하면 librsvg는 들여쓰기를 8개의 공백 문자에 해당하는 긴 흰색 탭 문자로 변환합니다. 대부분의 XML 편집기의 자동 서식 지정 또는 다시 들여쓰기(들여쓰기 방식)는 모든 새 하위 XML 태그에 대해 자동으로 들여쓰기를 생성하므로 SVG 파일에 이러한 tspan 사용법이 포함된 경우 다시 들여쓰기를 신중하게 사용하십시오.

이 문제에 대한 SVG 렌더러마다의 동작은 매우 다양하며 일반적으로 W3C 사양과 일치하지 않습니다. (또한 xml:space의 'preserve' 값은 SVG 2에서 더 이상 사용되지 않습니다.[32]) librsvg의 유일한 문제는 tspan 태그 앞에 후행 공백이나 들여쓰기가 없는 경우 xml:space의 어떤 값을 지정해도 줄 바꿈만 공백으로 변환하지 않는다는 점입니다. librsvg를 제외한 거의 모든 최신 브라우저는 항상 변환된 공백 문자를 앞의 텍스트 바로 뒤에 추가하는데, 이는 text-anchor 속성의 end 또는 middle 값이 항상 텍스트를 1칸 왼쪽으로 정렬하는 이유는 새 줄 및/또는 닫는 tspan 태그 뒤의 후행 탭 또는 공백이 예상치 못한 공백 문자로 변환되기 때문입니다.[33]

줄 바꿈 XML 코드 결과
이전 
<text>
  <tspan>O</tspan><tspan>n</tspan><tspan>e</tspan>
</text>
One
이후 
<text>
  <tspan>O</tspan>
  <tspan>n</tspan>
  <tspan>e</tspan>
</text>
O n e

예를 들어, 모든 tspan 요소에 속성이 구체적으로 지정된 경우에도 첫 번째 tspan 요소의 text-anchor 속성을 후속 tspan 요소에 잘못 상속하는 등, 잉크스케이프에서 tspan을 렌더링하는 데 버그가 있습니다.[34] 이 경우 ‘텍스트 중첩 tspan’ 구조를 ‘g 중첩 텍스트’로 되돌리기만 하면 됩니다. 또한 잉크스케이프의 기본값은 xml:space="preserve"으로 설정되어 tspan 사이의 공백을 처리합니다. SVG가 잉크스케이프에 표시되는 방식은 전혀 신경 쓰이지 않지만 기본 xml:space 처리를 선호하는 경우 &#160;를 사용하여 각 일반 공간을 대체하여 잉크스케이프에서 숨겨지지 않도록 하십시오.

어도비 일러스트레이터를 사용하여 SVG를 생성하는 경우 저장 대화 상자에서 ‘<tspan> 요소 출력 줄임’ 및 ‘패스의 텍스트에 <textPath> 요소 사용’에 대한 옵션이 제공됩니다. 브라우저 플랫폼에서 글꼴 모양의 일관성을 최대화하려면 전자 옆에 체크 표시를 하고 후자 옆에 체크 표시가 없는지 확인해야 합니다. 이렇게 하지 않으면 일부 글자의 커닝으로 인해 글자가 겹칠 수 있습니다. (브라우저에 따라 다름)

줄 바꿈

SVG 1.1은 어떤 형태의 줄 바꿈(하드 또는 소프트)도 제공하지 않습니다. 줄 바꿈은 새 text 또는 tspan 요소를 동일한 절대 x 좌표와 새 y 좌표로 재배치하여 수동으로 수행해야 합니다. tspan 요소의 경우 다음 줄의 y 좌표는 dy 속성으로 설정할 수 있습니다. textPath도 비슷한 상황을 처리할 수 있지만[35] 이 요소는 librsvg/위키미디어에서 지원되지 않습니다. (phab:T11420)

SVG 1.2 초안에서는 줄 바꿈에 대해 다루었지만 거의 지원되지 않습니다.

SVG 2.0 초안에서는 줄 바꿈도 다루고 있지만 2018년 5월 현재 크롬, 파이어폭스, 에지 및 librsvg에서는 지원하지 않습니다.

글꼴 스타일링 클래스

일반적으로는 ‘style 속성’을 무상으로 사용하는 경우가 많습니다. 모든 text 또는 tspan 요소에 대한 글꼴 패밀리를 업데이트하는 과정을 쉽게 하려면 ‘style 요소’ 내에 글꼴 CSS 클래스를 정의하고 요소에 class 속성을 다음과 같이 적용하면 됩니다. 

<style type="text/css">
text {font-size:12px; font-family:Liberation Sans, Arial, sans-serif} <!-- 일반 글꼴 스타일링 -->
.small {font-size:9px}
.special {fill:#f93500; font-weight:bold}
.title {font-size:14px; font-weight:bold; font-family:Liberation Serif, Times New Roman, serif}
.italic {font-style:italic}
</style>
<text class="title" x="10" y="20">Qridfs</text>
<text x="10" y="30">Rfnkl fgkj qljf fgk gskla</text>
<text class="small">
  <tspan x="15" y="40">Dfj fdmnkl</tspan>
  <tspan x="15" dy="12" class="italic">Akgfld fkdngf mna</tspan>
</text>
<text class="special" x="10" y="60">Tcjgh xlij qpfj</text>

‘style 요소’에 정의된 CSS 클래스는 오해의 소지가 있는 type="text/css" 속성에도 불구하고 다른 SVG 요소(예: g 및 path)에도 사용할 수 있습니다. 특정 스타일이 SVG에 한 번 정의되어 있더라도 XML 코드의 깔끔한 레이아웃을 위해 스타일을 클래스로 대체하는 것이 좋습니다.

Contrary to popular belief the style attribute does not separate content from presentation, and unless you need to override properties set by a CSS selector, it is best to use the SVG formatting attributes instead (e.g. <path fill="#fff" stroke="none"/> instead of <path style="fill:#fff;stroke:none"/>).[36] However, if you need to override the element style defined in style element, you do need to employ style attribute. If you need to override the style for text element without style attribute, you can use a tspan element container to nest the text you need to override the style, presuming there is nothing predefined in style element for tspan element.

참고
  • phab:T68672 – 기본값 type="text/css"가 생략된 경우 CSS 스타일 요소는 무시됩니다.
  • phab:T43423 – CSS 하위 선택기는 librsvg에서 지원되지 않습니다.
  • phab:T68551 – 텍스트 요소의 CSS 클래스는 하위 tspan 요소에 상속되지 않습니다. 이 기능을 원한다면 tspan에 대해서도 별도의 클래스를 추가하거나 단순히 그룹을 사용해야 합니다. (안타깝게도 Scour처럼 텍스트 요소에는 사용할 수 없음)

배경 경계가 있는 텍스트

배경색과 글꼴 색의 대비가 낮거나 패턴이 너무 복잡하여 독자가 혼란스러워 텍스트를 읽을 수 없는 경우가 있습니다. 이 문제는 텍스트를 정확히 같은 위치에 복제하되, 뒤쪽 텍스트는 획으로 렌더링하고 앞쪽 텍스트는 획 없이 렌더링하면 해결할 수 있습니다. 

<text style="font-size:12px">
  <tspan x="10" y="20" style="stroke:white; stroke-width:3px; stroke-linejoin:round;">자리 표시자</tspan>
  <tspan x="10" y="20">자리 표시자</tspan>
</text>
  • 텍스트 획의 날카로운 모서리를 피하기 위해 ‘stroke-linejoin:round’를 정의합니다.

동일한 텍스트 요소에 획과 채우기를 적용할 때 발생하는 문제는 획이 텍스트 본문 위에 겹쳐서 렌더링되어 글꼴이 너무 작아 배경과 구분하기 위해 더 큰 획이 필요한 경우 읽을 수 없게 된다는 점입니다.

SVG 필터를 사용하여 텍스트의 확장된 버전 위에 텍스트를 그릴 수 있습니다. 필터는 먼저 텍스트를 확장하고 확장된 텍스트의 색상을 설정한 다음 원본 텍스트를 확장된 버전 위에 그립니다. 하나의 필터를 정의할 수 있으며 여러 텍스트 블록에서 해당 필터를 사용할 수 있습니다. 

<filter id="textBack">
  <feMorphology in="SourceAlpha" operator="dilate" radius="1" result="bloom" />
  <feFlood flood-color="white" flood-opacity="1" result="flback"/>
  <feComposite in="flback" in2="bloom" operator="in" result="surround" />
  <feMerge>
    <feMergeNode in="surround" />
    <feMergeNode in="SourceGraphic" />
  </feMerge>
</filter>
<text x="10" y="50" filter="url(#textBack)">gibberish</text>
<text x="10" y="70" filter="url(#textBack)">more gibberish</text>

SVG 필터를 사용하여 텍스트를 둘러싸는 불투명한 직사각형 배경의 크기를 조정할 수도 있습니다. 필터를 사용하는 것이 직사각형을 그린 다음 그 위에 텍스트를 그리는 것보다 더 강력합니다. 고정된 크기의 직사각형은 텍스트에 사용되는 글꼴에 맞지 않을 수 있으며, 텍스트가 변경되면 직사각형의 크기도 조정해야 합니다. 예를 들어 텍스트가 번역된 경우 직사각형을 변경해야 할 수 있습니다. 필터를 사용하면 크기가 자동으로 조정됩니다. 

<filter id="rectBack" x="-2%" y="0%" width="104%" height="100%">
  <feFlood flood-color="white" flood-opacity="1" result="rect"/>
  <feMerge>
    <feMergeNode in="rect" />
    <feMergeNode in="SourceGraphic" />
  </feMerge>
</filter>
<text x="10" y="50" filter="url(#rectBack)">gibberish</text>
<text x="10" y="70" filter="url(#rectBack)">more gibberish</text>

텍스트를 명시적으로 2번 렌더링하여 필터 없이 텍스트 윤곽선을 설정할 수 있습니다. 첫 번째는 텍스트가 흰색 획으로 렌더링되어 윤곽선을 설정합니다. 흰색 윤곽선이 텍스트를 침범합니다. 텍스트가 두 번째로 렌더링되지만 이번에는 텍스트에 획이 그려지지 않습니다. 결과적으로 문자가 전체 크기로 렌더링됩니다. (침범 없이)

If you have lot of text that needs to be rendered with a stroke background, you can manually include the text within <g>, <text> and <tspan> elements. The <g> element which will be rendered underneath, apply the stroke, then <use> the text group of <text> element without a stroke and fill the font with contrasting color: 

<g style="stroke:white; stroke-width:3px; stroke-linejoin:round">
  <text id="text_group" style="font-size:12px">
    <tspan x="10" y="80">자리 표시자 1</tspan>
    <tspan x="10" y="95">자리 표시자 2</tspan>
  </text>
</g>
<use xlink:href="#text_group" style="fill:black; stroke:none"/>

W3C includes paint-order property in SVG 2.0 which allows the order to render the attributes of "fill", "stroke" and "markers" within one element arranged by the user manually, instead of following the default mandatory order.[37]

모질라 파이어폭스도 이 속성을 실험적으로 포함하고 있지만 SVG 2.0이 완성될 때까지 안정 릴리스에서는 기본적으로 비활성화되어 있습니다. 이 기능은 파이어폭스의 about:config에서 활성화할 수 있습니다.[38]

그레이디언트

모질라 파이어폭스의 잘못된 렌더링의 예시.

잉크스케이프 버전 0.46 사용자는 ‘그레이디언트 채우기’가 적용된 이미지가 잉크스케이프에서는 완벽하게 표시되지만 오페라 또는 파이어폭스 브라우저에서는 ‘엉망’으로 표시되는 것을 발견할 수 있습니다. 한 가지 가능한 원인은 그레이디언트의 마지막 ‘정지점’의 불투명도가 0으로 설정되어 있기 때문입니다. 잉크스케이프에서는 이 마지막 정지점을 무시하는 것처럼 보이지만 파이어폭스 3.0.6과 오페라 9.36에서는 채워진 객체에서 흰색 테두리로 렌더링됩니다. 해결 방법은 마지막 정류장을 제거하거나(오류로 인해 생성되었을 수 있으므로) 불투명도(및 색상)를 변경하여 이미지가 브라우저에서 올바르게 렌더링되도록 하는 것입니다.

잉크스케이프는 메시 그라데이션이 포함된 SVG 이미지에 자바스크립트 polyfill을 추가합니다. 스크립트로 작성된 SVG 이미지는 위키미디어 공용에 업로드할 수 없지만, 자바스크립트 코드를 제거하면 그레이디언트가 손상됩니다.

어도비 일러스트레이터 CS5, CS6 또는 CC를 사용하면서 파이어폭스를 함께 사용하는 사용자는 그레이디언트가 포함된 일러스트레이터 ‘심볼’이 위키미디어 공용에서는 정상적으로 PNG 파일로 렌더링되지만, SVG 파일 자체를 파이어폭스에서 열면 이 심볼이 비어 있는 것처럼 보이는 것을 알 수 있을 것입니다. 다른 브라우저는 별다른 문제가 없습니다. 구글 크롬, 심지어 인터넷 익스플로러에서도 일러스트레이터의 SVG 심볼 그레이디언트가 올바르게 렌더링됩니다. 파이어폭스의 디자이너가 2005년부터 알고 있었지만 (모질라의 버그질라 버그 376027 및 버그 353575 등 관련 보고) 지금까지 적절하게 수정하지 못한 알려진 버그 때문에 파이어폭스에서는 해당 심볼이 빈 모양으로 표시됩니다. (그레이디언트가 없는 심볼 획 및 심볼 패스는 영향을 받지 않음)

또한 그레이디언트와 필터가 모두 포함된 패스가 포함된 일러스트레이터 ‘심볼’은 해당 심볼을 처음 사용하는 경우에만 위키미디어 공용에서 PNG로 렌더링된다는 점에 유의해야 합니다. 이후 이러한 패스가 포함된 심볼을 사용하면 패스(전체 심볼은 아님)가 공백으로 렌더링됩니다. (그레이디언트, 필터, 채우기, 획 모두 적용되지 않음)

흐림 효과

구글 크롬과 위키미디어의 가우시안 흐림 필터 효과 비교. (원본 SVG 파일)

위키미디어의 SVG 렌더러는 현재 다양한 필터 효과를 지원하지만, 가우시안 블러(feGaussianBlur)와 같은 일부 효과는 흐리게 처리된 객체가 실제 이미지의 가장자리를 초과할 때 다르게 작동합니다. 현재 버전의 RSVG는 잘린 가장자리를 효과를 적용할 객체의 실제 가장자리로 취급하여 (마치 필터 효과를 적용하기 전에 객체에 clipPath를 적용한 것처럼) 이미지 가장자리에 바람직하지 않은 필터 효과를 생성합니다.

크기

파일 크기 줄이기

파일이 너무 크다면 크기를 줄이거나 최적화해야 합니다.

  • 특별한 프로그램 사용
    • [$url Scour - SVG 스크러버]
    • 잉크스케이프, 최적화된 SVG 파일로 저장
  • 수동으로 파일 편집
  • 파일을 만들기 위한 프로그램 (스크립트) 편집
    • 커브에 더 적은 고정점 사용
    • 더 적은 수의 커브 그리기


번역

SVG 파일은 번역이 가능하며 다국어(번역이 내장됨)로 만들 수 있습니다. 자세한 내용은 Commons:Translation possible/Learn more를 참조하십시오.

SVG로 변환하기

See also: Commons:Media for cleanup.

SVG가 아닌 다른 형식의 이미지 파일이 있는 경우 이를 SVG로 변환하는 다양한 방법이 있습니다. 프로그램용 § 변환기를 참조하십시오.

참고: 제3자가 벡터화를 수행한 벡터 이미지의 경우 묘사된 이미지 자체는 저작권이 없거나 독창성 기준에 미달하더라도 벡터화 코드가 자체 저작권을 가질 수 있는 문제가 있습니다. 자세한 내용은 § 저작권을 참조하십시오.

일반적으로 기존 이미지가 주어졌을 때 SVG 파일을 생성하는 방법에는 3가지가 있습니다.

  1. 다시 생성하기
  2. 변환하기
  3. 새로 만들기

이미지를 직접 변환할 수 없는 경우 {{Convert to SVG}} 태그를 추가하여 이미지를 변환해야 한다는 플래그를 지정하십시오. 일부 이미지, 특히 사진과 같은 연속된 톤 이미지의 경우 SVG에 적합하지 않습니다. 이러한 이미지는 보통 JPG로 저장해야 합니다.

다시 생성하기

이미지를 직접 그린 것이 아니라 프로그램으로 생성한 경우 (예를 들면 스프레드시트의 차트) 출력 형식을 PNG나 다른 형식이 아닌 SVG로 설정하여 동일한 소스에서 SVG 이미지를 생성할 수 있습니다. 가능하다면 일반적으로 이 방법이 가장 쉽습니다.

변환하기

대부분의 벡터 파일 형식은 변환기 프로그램을 사용하여 형식을 변경(기존 데이터 재포장)하는 것만으로 쉽게 SVG로 변환할 수 있습니다. 벡터 이미지 편집기에서 파일을 연 다음 SVG로 저장하는 것만큼 간단할 수도 있습니다.

래스터(비트맵) 그래픽스의 경우 이미지가 선(벡터)의 집합이 아니라 개별 픽셀 값의 집합이므로 이 작업을 수행할 수 없습니다. 이러한 이미지(특히 PNG 이미지)의 경우 ‘벡터화(vectorization)’ 또는 ‘추적(tracing)’을 통해 SVG로 변환하여 래스터 이미지에서 벡터 그래픽을 자동으로 생성할 수 있습니다.

많은 SVG 편집기에는 추적 기능이 있으며 전용 변환기가 존재합니다. 잉크스케이프에서는 포트레이스 프로그램으로 이 작업을 수행합니다.[42][43] 구체적으로는, 비트맵을 열고 (파일 → 열기… (Ctrl-O)) 경로 → 비트맵 따라 그리기…(Shift-Alt-B)을 선택합니다. 다양한 옵션이 있으며 사용 후에는 기존 비트맵을 삭제하고 패스를 단순화하여 노드 수를 줄이는 것을 고려하십시오. (Ctrl-L)

또한 어도비 일러스트레이터에서는 이미지 추적 기능을 통해 비트맵 이미지를 벡터로 변환할 수 있습니다. 이 경우 결과의 벡터 이미지가 지나치게 크거나 (색상과 모양에 대한 변환 충실도가 너무 높을 경우) 너무 단순하여 원본 이미지의 충실도를 잃지 않도록 주의해야 합니다. 변환된 이미지는 거의 항상 변환 후 약간의 수동 보정이 필요합니다. 잉크스케이프에서와 마찬가지로 변환이 완료된 후에는 기존 비트맵을 제거해야 합니다.

또한 일러스트레이터가 파일 중 하나를 SVG 파일로 변환할 때 ‘내부 광선’, ‘외부 광선’ 및 패스를 따라 또는 패스를 가로질러 적용된 그레이디언트와 같은 여러 가지 음영 효과를 원하지 않는 래스터 이미지로 변환한 다음 링크를 사용하여 SVG 이미지에 포함시키는 경향이 있다는 점에 유의해야 합니다. 이러한 식으로 포함된 이미지는 웹 브라우저에서 이미지를 높은 배율로 확대하여 보면 흐리게 보이거나 가장자리가 눈에 띄게 들쭉날쭉한 것을 즉시 확인할 수 있습니다. (올바르게 렌더링된 벡터 이미지에서는 이 2가지 모두 발생하지 않음) 이러한 효과는 원래 W3C 컨소시엄과 무관하게 만들어졌기 때문에 어도비는 이 문제에 대한 해결책을 제공하지 않으며 앞으로도 그럴 가능성이 없습니다.

이미지를 위키미디어 공용에 업로드하기 전에 어도비 일러스트레이터에서 생성한 SVG에서 래스터 구성 요소를 제거하려면 먼저 아티스트가 일러스트레이터에서 해당 구성 요소를 어디에 배치했는지 식별할 수 있어야 합니다. 이 작업은 다음과 같은 방법으로 수행할 수 있습니다.

먼저 이미지 파일 편집을 완료하고 일러스트레이터의 AI 형식(*.AI)으로 저장한 다음 SVG 형식으로 다시 저장합니다. 두 번째 저장 대화 상자에서 연결을 (일단은) ‘포함’하도록 선택합니다. 그런 다음 이미지를 닫습니다. (파일=>닫기 또는 Ctrl+w) 그런 다음 SVG 버전을 다시 열고 상단 메뉴 표시줄의 오른쪽에서 ‘창’을 클릭한 다음 ‘연결’까지 아래로 스크롤합니다. 그러면 현재 SVG 이미지에 있는 각 연결(있는 경우)에 대한 정보가 포함된 작은 창이 열립니다. (일러스트레이터에서 생성했는지 여부에 관계없이) 창 상단에 있는 항목을 클릭한 다음 중간쯤에 있는 '연결로 가기' 버튼을 선택하면 특정 래스터로 이동하여 해당 래스터를 식별하고 제거하거나 래스터가 아닌 다른 이미지로 대체할 수 있습니다.

이 SVG 버전의 이미지를 일러스트레이터에서 보면 불과 몇 분 전에 저장했다고 생각했던 동일한 SVG 파일과 매우 다르게 보일 수 있습니다. 이는 일러스트레이터가 해당 파일을 생성하는 동안 일련의 코드를 만들었는데, 이 코드를 읽는 데 어려움이 있기 때문입니다. (SVG는 일러스트레이터 전용 형식이 아니라 AI가 전용 형식이므로 일러스트레이터는 AI(Adobe Illustrator) 파일을 제대로 보는 데는 문제가 없지만, 자체적으로 생성한 SVG를 올바르게 렌더링하는 데 어려움을 겪을 수 있습니다.) 다행히도 일러스트레이터에서 혼란스러워 보이는 SVG라도 대부분의 브라우저(가끔씩 이미 언급된 파이어폭스는 예외)와 잉크스케이프에서는 적어도 올바르게 렌더링되는 것처럼 보입니다.

새로 만들기

이미지를 다시 생성하거나 변환할 수 없는 경우 남은 옵션은 기존 이미지를 모델로 사용하여 새 SVG 이미지를 그리는 것입니다. 이 방법은 수동으로 수행해야 하고 시간이 가장 많이 걸리는 옵션이지만 궁극적으로 가장 높은 품질을 얻을 수 있습니다.

원본 프로그램에서 생성하기 어렵거나 불가능한 세부 사항을 추가하거나 복잡한 변환을 단순화하거나 다듬는 등 (예: 100개의 고정점으로 구성된 패스를 5개의 고정점으로 구성된 패스로 단순화하는 경우) 모든 경우에 SVG 편집기에서 만들어진 이미지를 수정하는 것이 유용할 수 있습니다.

SVG 이미지를 만든 후에는 새 이름으로 업로드하고 원본 래스터 이미지에 {{Vector version available}} 태그를 지정하되, 래스터 이미지는 여전히 일부 용도로 사용되므로 삭제하거나 삭제 목록에 올리지 마십시오. (자세한 내용은 Commons:대체 이미지 정책 참조)

업로드 및 분류

위키미디어 공용에 업로드된 모든 SVG 파일은 {{Inkscape}}, {{Adobe}}, {{HandSVG}} 등의 틀을 사용하여 만든 방법을 표시해야 합니다.
파일을 업로드하기 전에 모양과 유효성을 확인해야 합니다. 공용 SVG 검사기 도구를 사용하십시오.
파일이 어떻게 렌더링되는지 확실하지 않거나 먼저 보고 싶다면 Test.svg에 파일을 업로드하세요.

이미지 설명 페이지

업로드는 Commons:첫 단계/파일 업로드에 설명되어 있습니다.

{{Information}} 상자를 가능한 한 완전히 채워야 합니다. 이미지에 완전한 정보 상자가 있으면 다른 사람들이 쉽게 분류하고 다른 사람들이 번역을 할 수 있으므로 도움이 되는 경우가 많습니다.

SVG 미디어에 대한 자세한 내용은 § SVG 소프트웨어 태그 부분을 참조하십시오.

SVG 파일 분류하기

SVG files
SVG by country
SVG by creator
SVG by language
SVG by source
SVG by subject
SVG by technical feature
Featured pictures on Wikimedia Commons - vector
Quality images - vector
Categories which should only contain SVG files
SVG cartoons
SVG coat of arms elements
SVG color gradient
SVG diagrams
SVG example images
SVG files generated by ChatGPT
SVG files with errors
SVG frames
SVG icons
SVG image placeholders
SVG line art
SVG military map symbols by contents
SVG OpenData RATP Indices
Perspective SVG
SVG pixel art
SVG posters
SVG printing art
Tux Paint SVG
SVG related to Wikipedia
Wikipedia 20 derivatives/svg

모든 SVG 그래픽은 적절한 하위 분류 또는 Category:SVG files의 하위 분류로 분류해야 합니다. 상위 분류에 이미지를 직접 배치하면 과부하가 걸려 쓸모가 없어지므로 상위 분류에 직접 배치하지 마십시오. (SVG 파일이 10만 개가 넘습니다)

Sort subcategories which rely not on subject but on technical aspects ("created with…", "animated", "valid", and so on) by '*' to keep them outside the alphabet listing.

SVG 분류 트리

The main tree is Category:SVG, as a part of Category:Images → Category:Media types.

Concerning the creation of topical subcategories, it is unnecessary to rebuild the complete hierarchy tree of Category:Topics. Normally, it is enough to gather some topics into one. For instance, Category:SVG colors could contain all color-related SVG files of Category:Colors, so it’s pointless to create Category:SVG red, Category:SVG blue and so on. Maybe some subcategories will become useful later, but stay close to the existing topics tree, and do not put any SVG files only into a SVG category: Categories are primarily for finding media, not for hiding them. Do not over-categorize.

일반적인 정보는 공용:분류를 참조하십시오.

분류 이름 지정 규칙

분류 이름은 ‘SVG’로 시작하고 그 뒤에 소문자로 주제를 붙입니다. (고유명사가 아닌 경우) 예를 들어 화학 관련 SVG 파일이 포함된 카테고리는 분류:SVG 화학입니다. 오랫동안 명명 규칙이 없었기 때문에 이 형식과 일치하지 않는 제목이 보일 수 있으나, 이는 시간이 지남에 따라 변할 것입니다.

SVG 파일 태그하기

사용 가능한 모든 SVG 마커는 Category:SVG marker templates을 참조하십시오.
Other languages:
Transcluded from Commons:SVG marker templates

SVG software tags

Use always at least the W3C-validity/invalidity flag! To get easily the best results use Image generation

You will find the complete up-to-date list at SVG created with ... templates
For the software used (Category:SVG graphics by software used):

 
This vector image was created with Adobe Illustrator.
 
This table was created with bin2svg.
 
This structural formula was created with ChemDraw.
 
This vector image was created with CorelDRAW.
 
This diagram was created with Dia.
 
This circuit diagram was created with the Electrical Symbols Library.
V
 
This vector image was created with Xfig and a Fig-to-SVG conversion tool.
 
This plot was created with Gnuplot.
 
The SVG code is valid.
 
This vector image was created with a text editor.
 
This vector image was created with Inkscape.
 
The SVG code is valid.
 
This vector image was created with Inkscape, and then manually edited
.
 
This vector image was created with MetaPost.
 
This vector image was created with Sodipodi.
 
This vector image was created with Scribus.
 
The SVG code is valid.
 
This vector image was created with a text editor.
 
This vector image was created with another SVG tool.
 
This vector image was created with an unknown SVG tool.
 
This vector image was created with Vim.
 
This vector image was extracted with Inkscape.


See #Software section for a list of programs.

SVG file tags

 
This image includes elements that have been taken or adapted from this file:
 Example.svg.
Translate this file This SVG file contains embedded text that can be translated into your language, using any capable SVG editor, text editor or the SVG Translate tool. For more information see: About translating SVG files.
This file is translated using SVG <switch> elements. All translations are stored in the same file! Learn more.

For most Wikipedia projects, you can embed the file normally (without a lang parameter). The Wikipedia will use its language if the SVG file supports that language. For example, the German Wikipedia will use German if the SVG file has German. To embed this file in a particular language use the lang parameter with the appropriate language code, e.g. [[Help:SVG/ko|lang=en]] for the English version. Do not specify a lang parameter if it is not needed. The parameter may prevent the use of a subsequent translation.

To translate the text into your language, you can use the SVG Translate tool. Alternatively, you can download the file to your computer, add your translations using whatever software you're familiar with, and re-upload it with the same name. You will find help in Graphics Lab if you're not sure how to do this.

This image is an animated SVG file. The .png preview above created by RSVG for use in Wikimedia is not animated and may be incomplete or incorrect. To see the animation, open the original file. It should run in any modern browser or viewer. Recent versions of Chrome, Firefox, Microsoft Edge, Safari, and Opera all support SVG animated with SMIL. Other SVG animations can be found at Category:Animated SVG files.
Templates:Animated SVG/I18n
العربية ∙ Boarisch ∙ বাংলা ∙ català ∙ čeština ∙ Deutsch ∙ Deutsch (Sie-Form) ∙ English ∙ español ∙ فارسی ∙ suomi ∙ français ∙ galego ∙ עברית ∙ हिन्दी ∙ magyar ∙ հայերեն ∙ íslenska ∙ italiano ∙ 日本語 ∙ 한국어 ∙ lietuvių ∙ македонски ∙ മലയാളം ∙ Plattdüütsch ∙ Nederlands ∙ occitan ∙ português ∙ português do Brasil ∙ русский ∙ sicilianu ∙ slovenščina ∙ svenska ∙ தமிழ் ∙ ไทย ∙ українська ∙ 中文 ∙ 中文（简体） ∙ 中文（繁體） ∙ +/−

.

  • SVG files containing JavaScript cannot be uploaded at present, but this template anticipates that possibility {{Scripted SVG}}.




SVG conversion tags

All Ba images in this gallery could be re-created using vector graphics as SVG files. This has several advantages; see Commons:Media for cleanup for more information. If an SVG form of this image is available, please upload it and afterwards replace this template with {{vector version available|new image name}}.

All images in this gallery could be re-created using vector graphics as SVG animation files. This has several advantages; see Commons:Media for cleanup for more information. If an SVG form of this image is available, please upload it and afterwards replace this template with {{vector version available|new image name}}.
  • To indicate that you are currently working on a vector version of a raster image you can tag it with {{Vector wip|1=~~~|time=~~~~~}}.
SVG work in progress
This file is actively undergoing vectorizing or optimizing, which may take a while. To avoid edit conflicts or unnecessary work, please refrain from vectorizing or optimizing it yourself until this message is removed. The SVG will be available soon….
For usage it is recommended to take: {{Vector wip|1=~~~|time=~~~~~}}
This page was last revised by FuzzyBot at 15:34, 27 10월 2024 (UTC).
  • For SVG files using embedded bitmaps causing bad quality, use {{BadSVG}} and for rasters that have been superseded by a SVG file, use {{vector version available|File name.svg}}
All the SVG images in this gallery contain embedded raster graphics.[1] Such images are liable to produce inferior results when scaled to different sizes (as well as possibly being very inefficient in file size). If appropriate to do so, they should be replaced with images created using vector graphics.
Note: This template is only supposed to be used if the SVG file mixes vector and raster graphics. If the SVG file only contains raster graphics {{FakeSVG}} is supposed to be used. See also {{TopoSVG}}.
This image is not a real SVG file and is just a wrapper containing one or more raster graphics without vector coding.
Using SVG as just a wrapper is undesirable.
Note: This template should be used if the SVG file contains only raster graphics. If the SVG file contains both vector and raster graphics, then use {{BadSVG}}.
All the SVG (Scalable Vector Graphics) in this page appear to have been inadequately vectorized, for example, by auto-tracing, and may require revectorization to meet quality standards.
Automatic tracing of complex images can produce overly-large files, inaccurate outlines, and often miss out smaller details completely. Please consider editing this image by hand in a vector editor to improve it. For further information please see our picture tutorial and SVG help. For assistance, refer to the Graphics Lab.
Deutsch ∙ English ∙ español ∙ français ∙ italiano ∙ sicilianu ∙ slovenščina ∙ svenska ∙ македонски ∙ português do Brasil ∙ русский ∙ 日本語 ∙ 한국어 ∙ 中文 ∙ 中文（简体） ∙ 中文（繁體） ∙ +/−
The file size of this SVG image may be abnormally large because most or all of its text has been converted to paths rather than using the more conventional <text> element. Unless rendering the text of the SVG file produces an image with text that is incurably unreadable due to technical limitations, it is highly recommended to change the paths back to text. Doing so will ease the process of localizing this image to other languages and is likely to reduce the file size in a significant scale. Other SVGs containing path-based text can be found at Category:Path text SVG. For more information, see SVG: Fonts and Preparing images for upload: Text.
беларуская (тарашкевіца) ∙ Deutsch ∙ English ∙ español ∙ magyar ∙ italiano ∙ 日本語 ∙ македонски ∙ русский ∙ slovenščina ∙ svenska ∙ ไทย ∙ Tiếng Việt ∙ 中文 ∙ 中文（中国大陆） ∙ 中文（简体） ∙ 中文（繁體） ∙ 中文（香港） ∙ 中文（新加坡） ∙ 中文（臺灣） ∙ +/−
This file has been superseded by Example.svg. It is recommended to use the other file. Please note that deleting superseded images requires consent.
 new file
Sorry, this SVG file is solely a source for re-utilization, editing or printing purposes. Please do not use this graphic within Wikipedia articles! MediaWiki isn't able to render this image correctly. Some details may be missing or look wrong. When you include the image in a Wikipedia or any other Wikimedia project site's page, you may want to use the other file, until the support increases.
Help:SVG/ko File:SMW Logo.SVG

Deutsch ∙ English ∙ español ∙ italiano ∙ 日本語 ∙ 한국어 ∙ македонски ∙ português do Brasil ∙ русский ∙ sicilianu ∙ slovenščina ∙ 简体中文 ∙ 繁體中文 ∙ +/−

{{{svgImageLabel}}}

{{{image alt}}} This SVG file is a generic template for creating new images. It contains embedded placeholder text using specific fonts that may not be available on Wikimedia Commons. This file is not intended to be embedded in a wiki page. Do not reupload this file with text converted to paths, even if the text appears unsightly in an image preview.
How to derive an image from this template
To create an image using this template:
  1. Download this SVG.
  2. Open the SVG in an SVG editor and change the wording and numbering.
  3. Convert all text to a path and save as a basic or plain SVG.
  4. Upload the new SVG to Wikimedia Commons.

미디어위키의 SVG 파일

미디어위키에서 SVG 파일이 작동하는 방식

위키미디어 공용(또는 다른 미디어위키 위키)에 SVG를 업로드하면 소프트웨어가 자동으로 PNG 미리보기를 생성하여 문서와 설명 페이지에 삽입합니다. 이미지를 다운로드하면 (보통 이미지를 마우스 오른쪽 버튼으로 클릭) PNG 이미지를 얻을 수 있습니다. SVG 파일을 원하면 이미지 자체 대신 이미지에 대한 링크를 저장해야 합니다. 이 방법은 분류 페이지의 미리보기가 아닌 이미지의 설명 페이지에서만 작동하며 이미지 아래의 링크를 마우스 오른쪽 버튼으로 클릭하면 됩니다.

미디어위키는 librsvg를 사용하여 SVG 파일을 PNG 파일로 변환하여 표시(SVG 렌더링)하는데, 이 프로그램에는 오래되고 잘 알려진 버그가 몇 가지 있으므로 업로드하기 전에 해당 프로그램으로 파일을 검사하는 것이 좋습니다. 정확한 PNG 렌더링 미리보기를 위해 SVG Check로 SVG를 검사하고 코드 오류나 SVG 요소 또는 속성의 비호환성을 위해 W3 XML 유효성 검사기를 사용할 수 있습니다.

추가 정보: 미디어위키 SVG 제한.

미디어위키를 통해 SVG 파일 크기 조정하기

자세한 지도를 위해 SVG의 큰 버전을 생성하거나 김프와 같은 비트맵 소프트웨어 또는 페이지당 한 글자씩 인쇄된 캘리그래피 등을 사용한다고 가정해 봅시다. https://commons.wikimedia.org/w/thumb.php?f=Foo.svg&w=1000을 사용하거나 연습장이나 토론 페이지 또는 다른 중요하지 않은 곳에 [[File:Foo.svg|1000px]]와 같은 작업을 수행하여 미디어위키가 거대한 PNG 미리보기를 생성하도록 강제해야 합니다. 이 거대한 PNG를 인쇄하면 기본 미리보기 중 하나를 확대하는 것보다 훨씬 더 멋지게 보입니다! 물론 잉크스케이프와 같은 인쇄용 SVG 소프트웨어를 사용할 수도 있지만 가끔 화면에 표시되는 것과 다른 것(검은색 배경, 다른 글꼴 등)이 표시될 수 있습니다.

자주 하는 질문

내 SVG 이미지에 대해 선택할 수 있는 합리적인 크기는 어느 정도입니까?
문서의 절대 크기는 문서 자체로 볼 때 표시되는 방식에만 영향을 미치므로 크게 중요하지 않습니다. 파일 크기는 문서 크기에 따라 달라지지 않습니다. 품질이나 파일 크기를 변경하지 않고도 사용자가 원하는 만큼 이미지를 늘리거나 압축할 수 있습니다. 이를 염두에 두고 권장되는 이미지 높이는 약 400~600픽셀입니다. 사용자가 전체 크기의 이미지를 볼 때 600~800픽셀의 너비는 확대 또는 축소하지 않고도 전체 이미지를 화면에 맞출 수 있는 반면, 9×9픽셀은 너무 작고 3000×2000픽셀은 너무 커서 보기에 좋지 않습니다. 위키미디어에서 librsvg로 렌더링된 PNG의 짧은 쪽 길이가 4096픽셀로 제한되므로 (즉, 너비가 높이보다 짧은 경우 너비에 4096픽셀의 길이 제한이 적용되고 그에 따라 높이가 조정되거나 그 반대의 경우) 미리보기 크기로 축소한 후 일부 텍스트가 너무 작아지면 읽을 수 있을 정도의 해상도가 필요한 SVG 이미지를 업로드할 필요가 없습니다. SVG 이미지의 가장 작은 글꼴은 이미지 설명 페이지에서 권장하는 최대 렌더링 해상도인 2000픽셀 너비 이상에서 읽을 수 있어야 합니다. 그렇지 않은 경우 SVG 소스와 함께 래스터 버전을 제공해야 합니다.
내 컴퓨터에서 SVG 파일을 래스터 형식으로 변환하는 방법은 무엇입니까?
잉크스케이프와 같은 그래픽 소프트웨어에서 제대로 작동하지 않는 SVG 파일의 경우, SVG를 위키미디어에 업로드한 다음 파일 설명 페이지에 다른 너비로 PNG 렌더링을 제공하는 링크를 저장하면 됩니다. 링크의 숫자-px을 조정하여 원하는 PNG 렌더링 너비를 생성할 수 있습니다. 4096픽셀보다 큰 면이 있는 이미지의 경우 안티에일리어싱이 없다는 점만 다를 뿐 RSVG-Convert와 같은 변환 도구를 사용할 수 있습니다. 래스터 이미지를 더 매끄럽게 보이게 하려면 RSVG-Convert에서 SVG를 PDF로 변환한 다음 포토샵에서 PDF를 래스터 버전으로 변환할 수 있습니다. (잉크스케이프에서는 PDF를 열 때 여전히 일부 글꼴 문제가 발생함) (무료 라이선스가 아니기 때문에) SVG 소스를 위키미디어에 업로드하지 않는 또 다른 옵션은 글꼴과 같은 특정 렌더링 결과가 약간 다를 수 있지만 최대 사이드 캡이 없는 위키미디어 툴포지의 SVG 미리보기를 사용하는 것입니다.
내 이미지가 렌더링되지 않는 이유는 무엇입니까?
여러 가지 이유가 있을 수 있습니다. 대부분의 경우 외부 파일에 대한 참조, 즉 비트맵을 추적하고 남은 파일 때문일 수 있습니다. (웹사이트가 이 다른 파일을 찾으려고 시도하는 동안 렌더링이 중지됩니다.) 이 문제를 해결하려면 편집기에서 최종 버전을 저장하기 전에 다른 파일에 대한 참조를 제거해야 합니다. 비트맵을 사용해야 하는 경우 잉크스케이프에서 이미지 포함 기능(확장 → 이미지 → 이미지 끼워넣기)을 사용할 수 있습니다. 흐림 효과와 같은 특수 효과를 사용할 수도 있습니다. 안타깝게도 현재 librsvg에서는 잘 지원되지 않습니다. § 플레인 SVG, 압축 SVG, 일반 사양을 참조하십시오.
SVG 이미지에 대한 추가 도움말은 어디에서 볼 수 있습니까?
Try Commons:Graphic Lab if you have a problem with an individual image. Commons:Graphics village pump can be useful for SVG discussion (as well as graphics in general). Often SVG enthusiasts will be around on those pages, and are more than willing to help.
잉크스케이프에서 문서 크기를 변경하려면 어떻게 합니까?
The document size starts out with an A4 page. To make this larger or smaller, create a rectangle with the dimensions you desire the document to be, and select it with the arrow tool. Then select File → Document Properties, and under Custom Size, choose Fit page to selection, and click OK. You can now delete the "sizing" rectangle, and move or resize the other elements to fit the space you have created.
내 텍스트가 작은 블록으로 표시되거나 위키미디어 공용에 업로드한 후 전혀 표시되지 않습니다!
If you use "Flowed Text" in Inkscape, it will not render at all. Flowed text boxes are created when you click and drag to make you text box. To avoid this, just click once to position your cursor and then type your text. To convert a flowed text box to a normal text box, go to the "Text" menu and choose "Convert to Text".
If this still doesn't work, some text features of Inkscape are not supported by MediaWiki’s renderer, such as text-on-path. If you are not using flowed text and still have problem, convert the text to paths. Do this by selecting the command Path → Object to Path. This will convert the text to paths. Save as plain SVG, and reupload your file.
My arrowheads/dashed lines are appearing as little blocks, or aren't showing up at all after uploading to Commons!
Check that attribute style="overflow:visible" is in tag marker and not in tag path. Some stroke features of Inkscape are not supported by MediaWiki’s renderer. Select the offending objects, and select the command Path → Stroke to Path. This will convert the strokes to paths. Save as plain SVG, and reupload your file.
투명한 배경을 제거하려면 어떻게 합니까?
Do you really need to? Usually not! MediaWiki’s renderer will convert the SVG file to PNG with a transparent white background for display (displays white if your browser doesn't support PNG transparencies). Browsers that natively support SVG transparency will show the background color through the image, white! (or grey if the image is displayed as a thumbnail). Leaving your image transparent behind helps future editors, and allows the image to be displayed over other background colors without a big white square. However, if your image really needs a specific colored background, create a rectangle the size of the image, fill it with the background color of your choice, and choose the command Object → Lower to Bottom. Save your image, and enjoy the solid background color![44]
글꼴이 제대로 렌더링되지 않습니다. 사이트의 렌더러가 지원하는 글꼴은 무엇입니까?
목록을 보려면 meta:SVG 글꼴을 참조하십시오.
위키미디어에 설치된 글꼴과 동일한 글꼴을 사용하고 있지만 SVG 이미지의 텍스트 위치가 여전히 로컬 렌더링과 위키미디어 렌더링 간에 다르게 보입니다.
로컬 렌더러에서 사용하는 렌더링 라이브러리 및 버전에 따라 다릅니다. 텍스트 위치 및 기타 SVG 측면(‘변형’ 등)은 렌더링 라이브러리마다 다르게 작동하는 것으로 알려져 있습니다. 위키미디어 렌더링에 가장 가까운 결과를 얻으려면 librsvg를 사용하는 렌더러를 사용해야 합니다. 오페라, 크롬, 사파리는 정확한 결과를 제공합니다. 파이어폭스와 인터넷 익스플로러 10은 약간 부정확합니다. 사파리는 특정 font-smoothing을 활성화하면 더 깔끔하게 보입니다.
깃발(또는 다른 휘장)을 그리는 중인데 팬톤 또는 CMYK 색상을 선택하라는 메시지가 표시됩니다. 어떻게 해야 합니까?
먼저, 팬톤 또는 CMYK라는 단어가 보이면 RGB라는 게 있는지 확인하십시오. 위키미디어 공용 이미지는 위키백과 등의 위키미디어 프로젝트에서 많이 사용되며 컴퓨터 화면에서 사용하도록 설계되었습니다. RGB 색상을 찾았다면 그것을 사용하십시오. 찾을 수 없는 경우 프로그램 자체의 색상 선택기를 사용하거나 팬톤의 경우 색상 코드의 RGB 값을 추출할 수 있는 컬러 파인더[2]를 사용하여 색상을 변환할 수 있습니다. 토론 페이지 또는 이미지 요약에 “[특정 프로그램]을 사용하여 CMYK 값 […]을 RGB […]로 변환했습니다”와 같이 어떤 변환 방법을 사용했는지 표시해야 합니다.


소프트웨어

많은 프로그램에서 SVG 파일을 처리할 수 있습니다. 이 프로그램들만 있는 것은 아니지만 아래에 제시된 프로그램을 사용해 볼 수 있습니다. 무료로 다운로드할 수 있는 프로그램도 있고 상용 소프트웨어인 프로그램도 있습니다.

SVG는 XML 사양일 뿐이므로 텍스트 편집기나 자체 프로그램/스크립트를 사용하여 SVG 파일을 수동으로 작성할 수 있습니다.[45] 실제로 많은 SVG 이미지가 텍스트 편집기로 작성됩니다. 구문을 강조 표시할 수 있는 편집기를 사용하면 도움이 됩니다. W3C SVG 유효성 검사기로 작업물을 검사하십시오.

뷰어

모든 현대 웹 브라우저는 기본적으로 SVG를 렌더링합니다.

  • librsvg: 미디어위키와 다음 뷰어에서 사용하는 렌더링 라이브러리
  • Svg-explorer-extension: SVG 파일의 미리보기를 생성하는 윈도 파일 탐색기용 무료 LGPL 확장 프로그램
  • iShell, a free MIT licensed extension for Windows Explorer that generates thumnails for SVG files
  • SvgShellExtensions.dll, a free Boost licensed extension for Windows Explorer that generates thumnails for SVG files, based on Image32 graphics library by the same author
  • SVG Shell Extensions, a free Apache licensed extension for Windows Explorer that generates thumnails for SVG files, based on the same library above, and includes a basic SVG editor used to preview SVG from its source code
  • resvg: 가장 빠르고 정확한 SVG 렌더러 중 하나[46]
  • Inkscape: SVG-1.1-DTD-Standard에 없는 잉크스케이프 기능도 지원
  • IrfanView, an image viewer provides a plug-in for svg-rendering
  • Imagine, another image viewer provides a plug-in for svg-rendering
  • batik: SVG 렌더링을 위한 자바 기반 툴킷
  • svgexport: Node.js 모듈
  • cairosvg: 파이선 라이브러리
  • ImageMagick: 이미지 변환기
  • chrome-svgrender: 헤드리스 크롬을 사용하여 SVG 파일 렌더링
  • SVG.NET: 기본적인 렌더러
  • QtSVG: 기본적인 렌더러
  • wxsvg: 기본적인 렌더러

변환기

대부분의 SVG 편집기에는 래스터-벡터 변환기(이미지 추적)가 포함되어 있습니다.

  • toolforge:convert: PDF-SVG 및 SVG-PNG 변환기
  • Autotrace (경고: 링크 중 하나 이상이 피싱 사이트에 의해 도용되었습니다): 2004년 마틴 웨버가 개발하였으며 다음 도구에서 사용하는 라이브러리
  • Scribus (GhostScript): EPS-to-SVG 변환기
  • PDFTron PDF2SVG: 윈도용 상용 PDF-SVG 변환기
  • ‘포플러(Poppler)’와 ‘카이로(Cairo)’라는 2개의 무료 라이브러리를 사용하는 리눅스용 PDF-SVG 변환기
  • librsvg: 미디어위키와 다음 변환기에서 사용하는 렌더링 라이브러리
    • RSVG-Convert: SVG를 PNG, PDF 또는 PS로 변환하는 오픈 소스 도구
  • Bitmap to SVG converter: 픽셀 아트 변환에 유용한 도구
  • Vectorizer.AI: 래스터 이미지를 변환하는 인공지능 기반 온라인 추적기
  • PDF24 Tools: 온라인 PDF-SVG 변환기를 포함하는 도구


편집기


전문 앱

  • Ipe - 수학 및 기술 다이어그램에 적합한 라텍스(LaTeX) 통합 기능을 갖춘 SVG 변환기가 포함된 무료 오픈 소스 편집기.
  • Scour - 파일 크기를 더 작게 정리/생성. (파이선용, 잉크스케이프에도 포함됨)
  • Graphviz - 자동 다이어그램 레이아웃을 위한 오픈 소스 애플리케이션.
  • BKchem - 화학 구조를 SVG로 그리는 무료 소프트웨어. 윈도우, 맥 OS 및 유닉스 시스템에서 실행됩니다.
  • 프리마인드 - 자바로 작성된 무료 오픈 소스 마인드 매핑 애플리케이션 프리마인드.
  • GeoGebra is a free and open source multi-platform mathematics software with ability to export SVG. Geogebra.
  • LibreOffice Calc (libreoffice.org), for creating bar charts, pie charts, etc.
  • Gnumeric spreadsheet, saves/exports charts in SVG format, cf. gnumeric.
  • Nano by Vecta.io - 파일 크기 줄이기.
  • SVGO - 파일 크기 줄이기.
    • SVGOMG - SVGO용 웹 기반 프런트엔드
    • SVGOMFG - a web-based front-end for SVGO
  • SvgPathEditor. An online editor useful for analyzing and improving SVG path data.
  • SVG Path Visualizer. For analyzing SVG path data.

저작권

There is some concern that the SVG source code of images might be copyrightable as a "computer program" even if the output is an image in the public domain due to being below the threshold of originality or otherwise indistinguishable from a work that is public domain due to copyright expiration. This could mean that even though the output of an SVG, the image, is in public domain, the code could be restrictively copyrighted, and therefore inappropriate for including in Wikimedia Commons.

Elements that weigh in favor of SVG source code containing sufficient creative expression to be copyrightable might include hand-written code, complex embedded CSS, embedded comments longer than short phrases, or a large carefully selected set of control points. Elements that weigh in favor of SVG source code lacking creativity include programmatically generated code or slavish copying of a public domain source. See the following for additional context:

같이 보기

유지 관리:

각주

  1. ↑ style 요소에 type 속성이 지정되지 않은 경우 type은 svg 요소의 contentStyleType 속성에서 가져옵니다. (SVG DTD의 기본값은 "text/css"입니다.) http://www.w3.org/TR/SVG11/styling.html#StyleElement
  2. ↑ http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry
  3. ↑ User:JoKalliauer/Optimization#SVG sourcecode edits without visual change
  4. ↑ W3C – valid DTD list – Optional doctype declarations
  5. ↑ a b Don't include a DOCTYPE declaration, W3C – It is not recommended that a DOCTYPE declaration be included in SVG documents.
  6. ↑ Validator API, https://validator.w3.org/docs/api.html
  7. ↑ W3C: XML declaration
  8. ↑ W3C: SVG – Prolog and Document Type Declaration
  9. ↑ W3C: XML charencoding
  10. ↑ http://www.w3.org/TR/SVG/struct.html#NewDocumentOverview
  11. ↑ W3C: SVG linking
  12. ↑ W3C: SVG viewBox
  13. ↑ Philip Rogers (2015-04-30). Intent to deprecate: SMIL. Google Groups. Retrieved on 2015-06-27.
  14. ↑ https://caniuse.com/#feat=svg-smil
  15. ↑ User:JoKalliauer/Optimization#SVG sourcecode edits without visual change
  16. ↑ User:JoKalliauer/Optimization#Useless elements that should be kept
  17. ↑ https://github.com/scour-project/scour/wiki/Documentation#--renderer-workaround-and---no-renderer-workaround
  18. ↑ Inkscape FAQ: What about flowed text?
  19. ↑ File:FlowRoot and flowRegion.svg와 유사하게 flowRoot의 경계로 사용되는 보이지 않는 패스의 색상을 변경하거나 보다 일반적인 path 태그를 사용하여 다른 모양을 만들 수도 있습니다.
  20. ↑ User:JoKalliauer/RepairFlowRoot#replace notempty flow-text using (Inkscape)
  21. ↑ translate=".." 속성을 사용하는 일부 경우 또는 text-align=".." 속성을 사용하는 일부 경우.
  22. ↑ 예: File:Petit Monde de Gondry, Jonze & Kaufman.svg
  23. ↑ Which can also be downloaded from Github
  24. ↑ User:JoKalliauer/RepairFlowRoot#delete empty flow-text using (Text-Editor)
  25. ↑ SVG 요소의 viewBox 속성이 width 및 height 속성과 다른 경우 기본 해상도를 정의할 때 viewBox 속성을 우선합니다.
  26. ↑ 폰트 커닝: 그래픽스 빌리지 펌프의 파일 관련 도움말과 File:Fonttest-Kerning.svg도 참조하십시오.
  27. ↑ http://www.w3.org/TR/SVG/fonts.html#FontFaceElementFontFamilyAttribute
  28. ↑ www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#generic-font-families
  29. ↑ a b User:AntiCompositeNumber on phab:T180923#6557063
  30. ↑ W3C: SVG – The ‘tspan’ element
  31. ↑ W3C: SVG – White space handling
  32. ↑ W3C: SVG 2 - The ‘xml:lang’ and ‘xml:space’ attributes
  33. ↑ librsvg는 여전히 이 여분의 공백 문자를 유지하지만 중간 또는 끝 텍스트 정렬 시에는 이 공백 문자가 무시됩니다.
  34. ↑ https://bugs.launchpad.net/inkscape/+bug/168023
  35. ↑ W3C: SVG – ‘textPath’ 요소
  36. ↑ Avoid the ‚style‘ attribute where possible
  37. ↑ Chapter 11: Painting: Filling, Stroking and Marker Symbols. W3C (2012-08-12). Retrieved on 2012-11-28.
  38. ↑ paint-order. Mozilla Developer Network (2013-01-12). Retrieved on 2013-10-21.
  39. ↑ A Simple Trick for Optimizing SVG Files by WebpageFX
  40. ↑ 35-optimizing-svg-tools by CSS-Tricks
  41. ↑ css-tricks : understanding-and-manually-improving-svg-optimization
  42. ↑ 잉크스케이프 튜토리얼: 추적
  43. ↑ 잉크스케이프 위키: 도구: 벡터화/추적
  44. ↑ A feature bug report for this exists since January 2005 on Inkscape launchpad.)
  45. ↑ Image made with C++ code by Claudio Rocchini
  46. ↑ User:JoKalliauer/SVG test suites

외부 링크

Retrieved from "https://commons.wikimedia.org/w/index.php?title=Help:SVG/ko&oldid=949901267"