도움말: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 85% 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.
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"

더 복잡한 문제가 있는데, 2018년 5월부터 구글 크롬과 마이크로소프트 에지 브라우저에서도 systemLanguage 속성을 올바르게 처리하지 못합니다. 첫 번째 언어 태그는 공용 언어 태그 뒤에 공백이 있어야 합니다. 이 규칙을 사용하면 크롬과 에지 모두 첫 번째 언어 태그를 올바르게 인식합니다. (크롬은 두 번째 언어 태그를 잘못 인식하고 에지는 첫 번째 언어 태그만 인식하고 다른 모든 언어 태그는 무시합니다.) 2018년 10월 현재 크롬과 파이어폭스는 모두 systemLanguage 일치를 수정했지만 에지는 여전히 첫 번째 언어 태그만 인식하고 나머지 언어 태그는 무시합니다.

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|...]] 사용.

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

위키미디어 공용을 위한 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]

글꼴, 텍스트

위키미디어 서버에 설치된 여러 무료 글꼴은 <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>

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

<text transform="translate(50,50)" font-size="15px" text-anchor="middle">東<tspan x="0" dy="16">涌<tspan x="0" dy="16">綫</tspan></tspan></text>

The above code lays out a horizontal text string (writing-mode is unchanged from the default left-to-right) one character at a time; each character is reset to the same horizontal position (x=0) and escaped 16 units (dy=16) further down the page. The text-anchor="middle" simulates dominant-baseline="central", which is the auto default when writing-mode="tb".

글꼴 대체 및 폴백 글꼴

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

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)로 매핑됨

On Commons, librsvg has the fonts listed in m:SVG fonts#Latin (basic) fonts comparison. Using just those fonts will get good results in Wikipedia articles that display their images using librsvg, but graphic artists should also be aware that SVG files may be displayed by other user agents. Consequently, it is best to use common font families (such as Arial) or a list of font families that ends with a generic font family (such as Trebuchet, sans-serif).

The font metrics for generic font families such as sans-serif will likely vary widely on different user agents. In graphic illustrations metric exact text elements are often important and Arial can be seen as de-facto standard for such a feature. Adding both Arial and sans-serif as fallback fonts will help the SVG to be displayed with best effort on machines that do not have or substitute Arial. To make the SVG file independent of Arial, change all occurrences of font-family: Arial to font-family: 'Liberation Sans', Arial, sans-serif.

If you are using non-Western characters, you should define those typefaces preceding Liberation Sans. For example, if your text contains Chinese characters, font-family definition should be: ‘ Liberation Sans, Arial, WenQuanYi Zen Hei, SimHei, sans-serif’. In this case, western fonts are put in the front because the quality of Western characters in Chinese fonts is often low, and we want to use the higher-quality ones first.

  • 잉크스케이프는 0.91 버전부터 폴백 글꼴을 지원합니다.
  • 어도비 일러스트레이터는 버전 18.1.1 이하(이후 버전에서도 마찬가지)에서 폴백 글꼴을 지원하지 않으므로 SVG 파일을 저장한 후 텍스트 편집기에서 수동으로 업데이트해야 합니다.
정의된 글꼴 위키 폴백 유사하게 보이는 가능한 대체 정의 (위키미디어/윈도/리눅스/맥에서 작동)
[-정의 없음-] Liberation Serif
serif DejaVu Serif[29]
Times New Roman Liberation Serif font-family="Liberation Serif,Times New Roman,Times,Times-Roman,serif"
sans-serif DejaVu Sans[29]
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"
Courier New Liberation Mono font-family="Liberation Mono,Courier New,Courier,monospace"
monospace DejaVu Sans Mono
[-그 외 모두-] 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 문자 끝 바로 옆에 가로로 정렬됩니다.

However, tspan should be used sparingly even if you define the absolute x coordinate for every single tspan element in the text element. This is because under the default xml:space definition, any line break (within text or tspan) with an extra trailing white-space is converted to a blank space character automatically.[31] If there happens to be multiple consecutive line breaks, they are treated as one space still. This would not be a problem if the line break is followed by a tspan element with absolute x coordinate and is align to left (text-anchor=start, the default value). If xml:space is given the 'preserve' value, librsvg will translate the indent to a long white tab character equal to 8 space characters. Because the auto-formatting or re-indentation (indent style) of most XML editors creates indent for every new descendant XML tag automatically, use re-indentation carefully if your SVG file contains such usage of tspan.

The behaviors in different SVG renderers to this issue varies much and is usually inconsistent to the W3C specification (also the 'preserve' value of xml:space will be deprecated in SVG 2.[32]). The only problem with librsvg is that it never converts the line break alone into space no matter which value of xml:space is given if there is no trailing space or indent before the tspan tag. Except for librsvg, nearly all modern browsers always add the converted space character right after the preceding text, this is the reason why the end or middle values of text-anchor property always align the text 1 space leftward because the new line and/or the trailing tab or space after the closing tspan tag is converted to an unexpected space character.[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

Inkscape is buggy to render tspan, for example, inheriting text-anchor property from the first tspan element incorrectly for the subsequent tspan elements even if the property is specifically given a value in all tspan elements.[34] In such case, simply revert the "text nestling tspan" structure to just "g nestling text". Inkscape also defaults to xml:space="preserve" to deal with space between tspan. If you are completely concern with how your SVG appears in Inkscape but prefer the default xml:space handling, use &#160; to replace each general space so it will not be hidden in Inkscape.

If you are generating an SVG using Adobe Illustrator, you will be given options to "Output fewer <tspan> elements" and "Use <textPath> element for Text on Path" during the save dialog. To maximize the consistency of the appearance of your font across browser platforms, you should place a check mark next to the former and make sure there is no check mark next to the latter. If you do not do this, the kerning of some of your letters may cause them to overlap (depending on your browser).

줄 바꿈

SVG 1.1 does not provide any form of line wrap (either hard or soft). Any line wrap should be done manually by repositioning new text or tspan elements with the same absolute x coordinate and a new y coordinate. For tspan elements, the next line's y coordinate can be set with the dy attribute. Although textPath can handle a similar situation,[35] this element is not supported by librsvg/Wikimedia (phab:T11420).

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

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

글꼴 스타일링 클래스

Usually it is simply gratuitous use of the ‘style attribute’. To ease the process of updating font-family for every text or tspan elements, you can define the font CSS class(es) within ‘style element’ and apply the class property in elements like this: 

<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>

CSS class defined in ‘style element’ can also be used for other SVG elements (e.g. g and path) despite the misleading type="text/css" attribute. Even if one particular style is defined once in the SVG, it is still advised to replace the style with class for a tidier layout of XML codes.

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.

Note
  • phab:T68672 – CSS style element get ignored if the default value type="text/css" is omitted.
  • phab:T43423 – CSS child selectors are not supported by librsvg.
  • phab:T68551 – CSS classes on text elements get not inherited on child tspan elements. If you want this, you need to add a separate class for tspan as well, or use simply groups (but not in the text element as it Scour unfortunately does).

배경 경계가 있는 텍스트

Sometimes the text might be unreadable because the background color has low contrast with the font color or the pattern is too complicated that confuses the reader. This can be solved by duplicating the text in exactly the same position, but the back text rendered with stroke and the fore text without it like this: 

<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’를 정의합니다.

The problem with applying stroke and fill to the same text element is that the stroke will be rendered over the main body of text, making it otherwise unreadable if the font is too small but requires a larger stroke to be distinguishable from the background.

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]

그레이디언트

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

Users of Inkscape version 0.46 may notice that images with "Fill gradients" display perfectly on Inkscape, but display "messed up" in Opera or Firefox browsers. One possible cause is that the last "stop" on a gradient has opacity set to 0. Inkscape appears to ignore this last stop, but both Firefox 3.0.6 and Opera 9.36 will render it as a white border in the filled object. Solutions are either remove the last stop (because it was probably created in error) or change the opacity (and colour) so that the image renders correctly in browsers.

Note that Inkscape adds a JavaScript polyfill to SVG images containing mesh gradients. Scripted SVG images cannot be uploaded to Wikimedia Commons, but removing the JavaScript code will break the gradients.

Users of Adobe Illustrator CS5, CS6, or CC and who also use Firefox may notice that an Illustrator "symbol" containing a gradient will render normally as a Commons PNG file but if the SVG file itself is opened in Firefox these symbols will appear vacant. Other browsers will have no difficulty— Google Chrome, even Internet Explorer will render Illustrator’s SVG symbol gradients correctly, but because of a known bug that the designers of Firefox have been aware of since 2005 (Mozilla’s Bugzilla bug 376027 and other reports that lead to it such as bug 353575) but have so far failed to adequately fix, Firefox will display such symbols as empty shapes (symbol strokes and symbol paths without gradients are unaffected).

Adobe Illustrator users should also note that any Illustrator "symbols" containing paths with both a gradient and a filter will be rendered as a PNG in Commons only within the first instance of the use of that symbol. Subsequent use of a symbol containing these paths will render the paths (though not the entire symbol) as blank (neither gradient nor filter nor fill nor stroke will be applied).

흐림 효과

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

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

크기

파일 크기 줄이기

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

  • 특별한 프로그램 사용
  • 수동으로 파일 편집
  • 파일을 만들기 위한 프로그램 (스크립트) 편집
    • 커브에 더 적은 고정점 사용
    • 더 적은 수의 커브 그리기

번역

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에서 래스터 구성 요소를 제거하려면 먼저 아티스트가 일러스트레이터에서 해당 구성 요소를 어디에 배치했는지 식별할 수 있어야 합니다. 이 작업은 다음과 같은 방법으로 수행할 수 있습니다.

First finish editing an image file and save in Illustrator’s AI format (*.AI), then save it again in SVG format. During the second Save dialogue, choose to "embed" the links (for now). Then close out the image (File=>Close or Ctrl+w). Next, open the SVG version back up again, click on "Window" from the right side of the top menu bar, and scroll down to "Links". This will open up a small window containing information about each of the links (if any) which currently exist in the SVG image (whether or not Illustrator produced them). You can click any of the entries in the top half of the window and then select the "Go to link" button located in about the middle of it-- this will take you to that particular raster so that you can identify it and either remove it or replace it with a non-raster based alternative.

Note that this SVG version of your image, when viewed in Illustrator, may look very different from the same SVG file you thought you had saved just a few minutes prior: this is because Illustrator has made a set of codes during the creation of that file which it then has difficulty reading (SVG is not an Illustrator-proprietary format, AI is, and so while Illustrator will never have difficulty correctly viewing an AI (Adobe Illustrator) file, it will sometimes struggle to correctly render an SVG, even one that it itself produced). Fortunately, even an SVG that looks confusing in Illustrator will usually at least appear to render correctly in most browsers (with the occasional and already noted exception of Firefox) and in Inkscape.

새로 만들기

이미지를 다시 생성하거나 변환할 수 없는 경우 남은 옵션은 기존 이미지를 모델로 사용하여 새 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 color gradient
SVG diagrams
SVG example images
SVG frames
SVG icons
SVG line art
SVG pixel art
SVG posters
SVG printing art
SuperTinyIcons
SVG coat of arms elements
SVG files generated by ChatGPT
SVG files with errors
SVG human hands
SVG image placeholders
SVG military map symbols by contents
SVG OpenData RATP Indices
SVG passport covers
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.
 
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 a 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 Kuipuru at 07:35, 21 9월 2023 (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, just a fake (wrapper). It is a raster graphic 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 ∙ русский ∙ 日本語 ∙ 한국어 ∙ 中文 ∙ 中文（简体） ∙ 中文（繁體） ∙ +/−
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를 렌더링합니다.

변환기

대부분의 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 변환기를 포함하는 도구


편집기


Specialized app

  • Ipe, a free and open-source editor with an SVG converter, with good LaTeX integration for mathematical and technical diagrams
  • Scour. For tidying up/create a smaller file size (in Python, also included in Inkscape).
  • Graphviz. An open source application for automatic diagram layout.
  • BKchem. A free software to draw chemical structures in SVG. Runs on Windows, Mac OS X, and Unix systems.
  • Freemind is a free and open source mind mapping application written in Java. FreeMind.
  • 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 - reduces file sizes
  • SVGO - reduces file sizes
  • SVGOMG - a web-based front-end for SVGO


저작권

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:

같이 보기

Maintenance:

각주

  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 still preserves this extra space character but during the middle or end text alignments, this space character is ignored.
  34. ↑ https://bugs.launchpad.net/inkscape/+bug/168023
  35. ↑ W3C: SVG – The ‘textPath’ element
  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=803305284"