Shortcut : COM:SVG

SVG ( 스케일러블 벡터 그래픽스 )는 위키미디어 共用 에서 許容되는 파일 形式 입니다. 圖表, 地圖 等 寫眞이 아닌 이미지에 적합합니다. SVG는 그래픽 客體를 소스 코드 와 함께 表現하므로 現在 콘텐츠를 修正하고 改善하는 가장 좋은 方法이기 때문에 위키미디어 共用에서 選好받고 있습니다.

SVG 파일은 위키미디어 共用에서 廣範圍하게 使用됩니다. 다음은 始作하는 데 도움이 되는 몇 가지 팁입니다. (이러한 파일을 生成하는 데 使用할 프로그램을 이미 알고 있는 境遇 도움말:일러스트레이터 또는 도움말:잉크스케이프 를 追加로 參照하십시오.)

스케일러블 벡터 그래픽스 (SVG)는 2次元 벡터 그래픽스 (비트맵 또는 래스터 그래픽스 의 反對)를 靜寂 및 애니메이션 形態로 表現하기 위한 XML 仕樣이자 파일 形式입니다. 플레인 텍스트 또는 壓縮(바이너里) 形式으로 貯藏되며, JPEG 나 GIF 와 같은 大部分의 다른 이미지 形式보다 크기 效率이 훨씬 높습니다. 또한 SVG를 使用하면 래스터 그래픽스와 編輯 可能한 텍스트를 揷入할 수 있습니다.

librsvg (또는 ‘RSVG’)는 미디어위키에서 SVG 파일을 위키미디어 페이지에 提供되는 PNG 비트맵 形式으로 래스터化하기 위해 使用하는 렌더링 라이브러리입니다. 標示되는 이미지는 SVG가 아니므로 애니메이션이나 相互作用은 使用할 수 없습니다. 이러한 選擇의 한 가지 理由는 SVG를 實時間으로 렌더링하면 舊型 컴퓨터나 運營 體制의 速度가 느려지기 때문입니다. SVG를 소스에서 效率的으로 變換한 래스터 버전은 이러한 技術的 問題를 克服하는 데 도움이 됩니다. 또 다른 理由는 一部 SVG 파일은 容量이 크지만(예: 1 MB) 모니터에 標示되는 이미지는 壓縮되지 않은 51200픽셀(24비트 컬러의 境遇 153600바이트)인 160×320픽셀日 수 있기 때문입니다.

SVG 仕樣에서 스타일 要素는 類型 屬性을 반드시 "text/css" 로 基本 設定해야 합니다. ^[1] style 要素를 使用하는 SVG 이미지는 ?< style > 태그에 明示的으로 type="text/css" 를 設定해야 합니다. (卽, ?< style type="text/css" > 가 ?< style > 보다 選好되어야 합니다.) ( phab:T68672 )

§?텍스트가 標示되지 않음 (플로 텍스트 誤謬) 를 參照하십시오.

RSVG는 SVG가 IETF 言語 태그(langtag)의 쉼標로 區分된 目錄으로 指定하는 systemLanguage 屬性을 ??올바르게 比較하지 않습니다. RSVG는 言語 태그의 첫 番째 下位 태그(첫 番째 하이픈 앞의 文字 그룹)만 一致시키므로 그 뒤에 오는 國家 코드나 文字 下位 태그는 無視합니다. 例를 들어, RSVG는 zh-Hans (簡體字 中國語)과 zh-Hant (繁體子 中國語)를 區分하지 못합니다. 이 問題를 解決하기 위해 個人用 言語 태그(qaa~qtz 範圍에 屬하는 言語 태그)를 使用하여 言語를 指定할 수 있습니다.

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 이미지를 만드는 데 使用할 수 있는 프로그램은 아래 §?編輯機 에 나와 있습니다. 또는 텍스트 編輯機나 IDE 를 使用하여 SVG 코드를 直接 編輯할 수도 있습니다.

다음 섹션에서는 SVG의 具體的인 機能에 對해 說明합니다.

SVG 파일에 DOCTYPE 宣言 이 있는 境遇 有效性 檢絲器는 該當 DTD를 使用하여 毬門을 檢事합니다. DOCTYPE이 없는 境遇(必須 事項도 아니며 勸奬 事項도 아님) ^{[4] [5]} 有效性 檢絲器는 파일이 올바른 形式의 XML인지 確認할 수 있지만 파일이 SVG임을 認識하고 該當 파일을 nu 有效性 檢絲器로 傳達하여 비 DTD 有效性 檢査를 遂行할 수 있습니다. W3C 有效性 檢絲器 웹 페이지에서 파일을 SVG 1.1로 有效性 檢査하도록 選擇할 수 있습니다. (곧 出市될 SVG 2 草案에서는 SVG DTD에 對한 參照가 除去될 豫定입니다.)

SVG 文書에 追加 이름空間이 있는 境遇 有效性 檢絲器는 이에 對해 警告를 標示합니다. 어도비 일러스트레이터 및 잉크스케이프와 같은 많은 道具는 追加 이름空間에 노드를 揷入합니다.

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]

• cdml 이름空間을 숨기는 SVG 檢事

또한 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]

잉크스케이프 및 其他 프로그램을 使用하면 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" > 태그에)

(有效 變換 매트릭스에 따라) 가로 및 세로 倍率이 같지 않은 境遇 글꼴 倍率이 現在 豫想대로 作動하지 않습니다. (가로 늘임은 無視되고 現在 매트릭스에서 計算된 글꼴 높이만 適用됨) 이로 인해 다른 글꼴에서 좁게/축소되거나 幅이 擴張된 스타일로 렌더링할 때 텍스트가 豫想치 못한 幅을 醉하고 豫想 箱子 밖으로 흘러나오는 等 올바른 렌더링이 되지 않을 수 있습니다. (代案은 이미 좁혀진/축소된 代替 無料 글꼴 패밀리를 選擇하는 것입니다.)

스케일링 倍率(예: 0.5, 2, 4)李 얼마나 ‘規則的인지’에 關係없이 PNG 렌더링의 解像度가 SVG 파일 自體에 定義된 基本 치數와 同一하지 않으면 텍스트가 잘못 配置될 수 있습니다. ^[25] (境遇에 따라 커닝 이 語塞해질 수 있음) ( phab:T36947 ) 어떤 境遇에도 글꼴 크기가 너무 작거나 (>10px) 큰 글꼴을 使用한 다음 텍스트 또는 全體 이미지의 크기를 願하는 크기로 調整하지 마십시오. 恒常 適當한 글꼴 크기로 始作하십시오. ^[26] (안타깝게도 80px 內外의 크기가 가장 좋습니다.)

글꼴 메트릭 差異도 注意하십시오. SVG 파일은 윈도나 맥 OS(쿠리어나 쿠리어 뉴와 같은 無料 글꼴이 아닌 一般 글꼴을 使用할 수 있는)의 SVG 支援 (모든 最新) 브라우저에서 直接 렌더링할 때는 보기 좋지만, 미디어위키의 SVG-PNG 렌더러가 現在 支援하는 無料 글꼴 目錄으로 制限하면 (또는 리눅스의 無料 配布版 같은 OS에서 볼 때) 다른 모습으로 보일 수 있습니다. (‘ 글꼴 代替 및 폴백 글꼴 ’ 部分 參照)

textLength 屬性이 完全히 支援되지 않아 올바르게 렌더링할 수 없습니다. phab:T15387 을 參照하십시오.

<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 파일을 貯藏한 後 텍스트 編輯機에서 手動으로 업데이트해야 합니다.

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]

<text>
? <tspan>O</tspan><tspan>n</tspan><tspan>e</tspan>
</text>

<text>
? <tspan>O</tspan>
? <tspan>n</tspan>
? <tspan>e</tspan>
</text>

例를 들어, 모든 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 코드의 깔끔한 레이아웃을 위해 스타일을 클래스로 代替하는 것이 좋습니다.

參考

• 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番 렌더링하여 필터 없이 텍스트 輪廓線을 設定할 수 있습니다. 첫 番째는 텍스트가 흰色 劃으로 렌더링되어 輪廓線을 設定합니다. 흰色 輪廓線이 텍스트를 侵犯합니다. 텍스트가 두 番째로 렌더링되지만 이番에는 텍스트에 劃이 그려지지 않습니다. 結果的으로 文字가 全體 크기로 렌더링됩니다. (侵犯 없이)

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

모질라 파이어폭스도 이 屬性을 實驗的으로 包含하고 있지만 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 렌더러는 現在 다양한 필터 效果를 支援하지만, 佳友시안 블러 (feGaussianBlur)와 같은 一部 效果는 흐리게 處理된 客體가 實際 이미지의 가장자리를 超過할 때 다르게 作動합니다. 現在 버전의 RSVG는 잘린 가장자리를 效果를 適用할 客體의 實際 가장자리로 取扱하여 (마치 필터 效果를 適用하기 前에 客體에 clipPath 를 適用한 것처럼) 이미지 가장자리에 바람직하지 않은 필터 效果를 生成합니다.

• 업로드 魔法師 및 청크 업로드를 支援하는 其他 道具 使用者의 境遇 위키미디어 共用의 最大 파일 크기 는 4GiB(4,294,967,296바이트)입니다. 大容量 파일은 업로드할 수 있지만 使用者가 파일을 열 때 問題가 發生할 수 있습니다 .
• SVG 파일의 미리보기 最大 크기 는 10MB입니다.
• 勸奬 이미지 높이 는 約 400~600픽셀입니다.

파일이 너무 크다면 크기를 줄이거나 最適化해야 합니다.

• 특별한 프로그램 使用
  • Scour - SVG 스크러버
  • 잉크스케이프, 最適化된 SVG 파일로 貯藏
• 手動으로 파일 編輯
  • 手動으로 코드 整理하기 ^[39]
  • 編輯機 및 正規表現式, 例示
  • 그룹 만들기
  • 數字 精密度 줄이기 ^{[40] [41]}
  • 다음과 같은 不必要한 코드 除去하기
    • 不必要하게 파일 크기를 부풀릴 수 있으므로 使用하지 않는 正義(defs) 除去
    • 主席, 코드 棲息, 空白을 使用할 수 있지만 코드가 難讀化되고 可讀性이 떨어지며 一般的으로 파일 크기와 렌더링 時間에 微微한 影響을 미칩니다.
• 파일을 만들기 위한 프로그램 (스크립트) 編輯
  • 커브에 더 적은 固定點 使用
  • 더 적은 數의 커브 그리기

SVG 파일은 飜譯이 可能하며 多國語(飜譯이 內臟됨)로 만들 수 있습니다. 仔細한 內容은 Commons:Translation possible/Learn more 를 參照하십시오.

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 그래픽은 適切한 下位 分類 또는 Category:SVG files 의 下位 分類로 分類해야 합니다. 上位 分類에 이미지를 直接 配置하면 過負荷가 걸려 쓸모가 없어지므로 上位 分類에 直接 配置하지 마십시오. (SVG 파일이 10萬 個가 넘습니다)

一般的인 情報는 共用:分類 를 參照하십시오.

分類 이름은 ‘SVG’로 始作하고 그 뒤에 小文字로 主題를 붙입니다. (固有名詞가 아닌 境遇) 例를 들어 化學 關聯 SVG 파일이 包含된 카테고리는 分類:SVG 化學 입니다. 오랫동안 命名 規則이 없었기 때문에 이 形式과 一致하지 않는 題目이 보일 수 있으나, 이는 時間이 지남에 따라 變할 것입니다.

使用 可能한 모든 SVG 마커는 Category:SVG marker templates 을 參照하십시오.

Transcluded from Commons:SVG marker templates

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

• {{ Adobe |v}}, sorts into Valid SVG created with Adobe Illustrator

 

This vector image was created with Adobe Illustrator .

• {{ Bin2svg |v}}, sorts into Valid SVG created with bin2svg

 

This table was created with bin2svg .

• {{ Chemdraw |v}}, sorts into Valid SVG created with ChemDraw

 

This structural formula was created with ChemDraw .

• {{ CorelDraw |v}}, sorts into Valid SVG created with CorelDRAW

 

This vector image was created with CorelDRAW .

• {{ created with Dia |v}}, sorts into Valid SVG created with Dia

 

This diagram was created with Dia .

• {{ ElCompLib |v}}, sorts into Valid SVG created with electrical symbols library

 

This circuit diagram was created with the Electrical Symbols Library .

• {{ Fig2SVG |v}}, sorts into Valid SVG created with Fig2SVG

 

This vector image was created with Xfig and a Fig -to- SVG conversion tool.

• {{ Gnuplot |v}}, sorts into Valid SVG created with Gnuplot

 

This plot was created with Gnuplot .

• {{ HandSVG |v}}, sorts into Valid SVG created with Text Editor

 

The SVG code is valid .

 

This vector image was created with a text editor .

• {{ Inkscape |v}}, sorts into Valid SVG created with Inkscape

 

This vector image was created with Inkscape .

• {{ Inkscape-hand |v}}, sorts into Created with Inkscape-hand

 

The SVG code is valid .

 

This vector image was created with Inkscape , and?then? manually ?edited

.

• {{ Metapost |v}}, sorts into Valid SVG created with MetaPost

 

This vector image was created with MetaPost .

• {{ Sodipodi |v}}, sorts into Valid SVG created with Sodipodi

 

This vector image was created with Sodipodi .

• {{ Scribus |v}}, sorts into Valid SVG created with Scribus , also for typesetting

 

This vector image was created with Scribus .

• {{ Created with Text Editor |3=v}}, sorts into Valid SVG created with Text Editor

 

The SVG code is valid .

 

This vector image was created with a text editor .

• {{ Image generation |O|v}} or {{ Image generation |U|v}}, sorts into Valid SVG created with Other tools

 

This vector image was created with another SVG tool.

 

This vector image was created with an unknown SVG tool.

• {{ Created with Vim |2=v}}, sorts into Valid SVG created with Vim

 

This vector image was created with Vim .

• {{ Extracted with Inkscape |2=v}}, sorts into Valid SVG extracted with Inkscape

 

This vector image was extracted with Inkscape .

• For other software, by now categorize as usual, see SVG created with ... templates and Created with ... templates for an summary of software-related templates

See #Software section for a list of programs.

• For making use of elements from other SVG images available on Commons, please use {{Attrib}} ? see Category:Vector images using elements from other vector images .

 

This image includes elements that have been taken or adapted from this file:

 Example.svg .

• {{ Translate }}

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 .

• {{ Translate |switch=yes}}

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.

• For animations you can use {{ Animated SVG |B|C}}

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 ?| ????? ?| catala ?| ?e?tina ?| Deutsch ?| Deutsch (Sie-Form)? ?| English ?| espanol ?| ????? ?| suomi ?| francais ?| galego ?| ????? ?| ?????? ?| magyar ?| ??????? ?| islenska ?| italiano ?| 日本語 ?| 韓國語 ?| lietuvi? ?| македонски ?| ?????? ?| Plattduutsch ?| Nederlands ?| occitan ?| portugues ?| portugues do Brasil ?| русский ?| sicilianu ?| sloven??ina ?| svenska ?| ??? ?| укра?нська ?| 中文 ?| 中文（??）? ?| 中文（繁體）? ?| +/?

.

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

This is a scripted SVG file (it contains JavaScript). The preview above may be incomplete or incorrect. To use the interactive possibilities, open it in your browser. ??????? ?| Deutsch ?| Deutsch (Sie-Form)? ?| English ?| espanol ?| ????? ?| magyar ?| italiano ?| македонски ?| ?????? ?| Nederlands ?| polski ?| portugues ?| русский ?| sicilianu ?| sloven??ina ?| 中文? ?| 中文（??）? ?| 中文（台灣）? ?| +/?

• If you find raster images that should be vector graphics ? especially diagrams , charts , graphs and some drawings ??, tag them {{ convert to SVG |A|B}}. Special: For Nuvola {{N2+SVG}} .

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

• If you find raster animations (usually GIFs ) that should be animated vector graphics, tag them {{ convert to SVG animation }}.

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 09:16, 3 6月 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}} .

• {{TracedSVG}}

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  ? espanol  ? francais  ? italiano  ? sicilianu  ? sloven??ina  ? svenska  ? македонски  ? portugues do Brasil  ? русский  ? 日本語  ? 韓國語  ? 中文  ? 中文（??）  ? 中文（繁體）  ? +/?

• {{ Path text SVG }}

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 . italiano  ? Deutsch  ? magyar  ? English  ? espanol  ? svenska  ? Ti?ng Vi?t  ? беларуская (тарашкев?ца)?  ? македонски  ? русский  ? sloven??ina  ? ???  ? 日本語  ? 中文（中?大?）?  ? 中文  ? 中文（台灣）?  ? 中文（新加坡）?  ? 中文（??）?  ? 中文（繁體）?  ? 中文（香港）?  ? +/?

• {{ Superseded |Example.svg}}

This file has been superseded by Example.svg . It is recommended to use the other file. Please?note?that deleting superseded images requires consent .

• {{ Technically replaced |SMW Logo.SVG}}

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  ? espanol  ? italiano  ? 日本語  ? 韓國語  ? македонски  ? portugues do Brasil  ? русский  ? sicilianu  ? sloven??ina  ? ??中文  ? 繁體中文  ? +/?

 

• {{ Template image }}

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: Download this SVG. Open the SVG in an SVG editor and change the wording and numbering. Convert all text to a path and save as a basic or plain SVG. Upload the new SVG to Wikimedia Commons.

위키미디어 共用(또는 다른 미디어위키 위키)에 SVG를 업로드하면 소프트웨어가 自動으로 PNG 미리보기를 生成하여 文書와 說明 페이지에 揷入합니다. 이미지를 다운로드하면 (普通 이미지를 마우스 오른쪽 버튼으로 클릭) PNG 이미지를 얻을 수 있습니다. SVG 파일을 願하면 이미지 自體 代身 이미지에 對한 링크를 貯藏해야 합니다. 이 方法은 分類 페이지의 미리보기가 아닌 이미지의 說明 페이지에서만 作動하며 이미지 아래의 링크를 마우스 오른쪽 버튼으로 클릭하면 됩니다.

미디어위키 는 librsvg 를 使用하여 SVG 파일을 PNG 파일 로 變換하여 標示(SVG 렌더링)하는데, 이 프로그램에는 오래되고 잘 알려진 버그 가 몇 가지 있으므로 업로드하기 前에 該當 프로그램으로 파일을 檢査하는 것이 좋습니다. 正確한 PNG 렌더링 미리보기를 위해 SVG Check 로 SVG를 檢査하고 코드 誤謬나 SVG 要素 또는 屬性의 非互換性을 위해 W3 XML 有效性 檢絲器를 使用할 수 있습니다.

追加 情報: 미디어위키 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 : 미디어위키와 다음 뷰어에서 使用하는 렌더링 라이브러리
  • RSVG-view for UNIX : 미디어위키에서 렌더링할 때 SVG 파일이 어떻게 보이는지 미리 볼 수 있는 작고 簡單한 뷰어
  • RSVG-view for Windows : (위와 同一)
  • Commons:Commons SVG Checker : SVG 파일에서 問題를 찾아보고 報告하기 위한 또 다른 librsvg 基盤 렌더링
• Svg-explorer-extension : SVG 파일의 미리보기를 生成하는 윈도 파일 探索機 龍 無料 LGPL 擴張 프로그램
• iShell , a free MIT licensed extension for Windows Explorer that generates thumnails for SVG files
• 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年 마틴 웨버가 開發하였으며 다음 道具에서 使用하는 라이브러리
  • 이미지매직
  • autotracer.org : JPEG, GIF 및 PNG 파일을 入力하고 SVG, PDF, EPS, AI 및 DXF를 出力하는 온라인 追跡機
  • Delineate : Autotrace 및 포트레이스 ( 웹 사이트 링크 )用 無料 자바 基盤 인터페이스. 포트레이스는 잉크스케이프 의 ‘經路 → 비트맵 따라 그리기…’ 메뉴에도 統合되어 있습니다.
• 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 變換器를 包含하는 道具

• 잉크스케이프 : 윈도, 맥OS 및 리눅스用 無料 오픈 소스 SVG 編輯機. 仔細한 內容은 Help:Inkscape 參照.
• Sodipodi : 支援 終了된 윈도 및 리눅스用 無料 오픈 소스 SVG 編輯機
• 오픈오피스 드로 : SVG로 내보낼 수 있는 無料 오픈 소스 드로잉 프로그램. SVG 플러그인 을 使用하여 SVG를 읽을 수 있습니다.
• LibreOffice Draw : 오픈오피스 드로의 派生 프로그램으로, SVG를 가져오고 내보낼 수 있습니다. 順序圖와 같은 특수한 境遇 잉크스케이프보다 더 적합할 수 있습니다.
• 디아 : 윈도, 맥OS 및 유닉스 系列을 위한 無料 오픈 소스 다이어그램 프로그램 (現在 SVG 내보내기에 몇 가지 버그가 있음)
• 어도비 일러스트레이터 : 豐富한 그래픽 機能을 提供하지만 SVG 專用 機能은 制限的인 商業用 (그리고 매우 비싼) 벡터 그래픽 編輯機. 仔細한 內容은 Help:Illustrator 參照.
• 魚皮니티 디자이너
• 코렐드로
• SVG-edit ( GitHub ): 無料 오픈 소스 웹 앱
  • toolforge:svgedit : 위키미디어 툴包紙의 移轉 SVG 編輯機 寫本. 仔細한 內容은 User talk:Rillke/SVGedit.js §?Is there a WYSIWYG editor 參照.
• SVGedit.js : 위키미디어 共用 固有의 實驗的 가젯
• Vector Paint : 자르기에 有用한 簡單한 온라인 編輯機. 參考: 特定 파일에서는 자르기가 제대로 作動하지 않을 수 있습니다.

• 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用 웹 基盤 프런트엔드

• Commons:파일 類型#SVG
• Commons:Graphics village pump
• Commons:Graphic Lab
• Commons:Commons SVG Checker
• Commons:Translation possible/Learn more ? SVG 파일을 飜譯하는 方法
• Commons:Transition to SVG
• meta:SVG image support
• meta:SVG fonts - 支援되는 글꼴 目錄.
• Wikipedia:Comparison of raster-to-vector conversion software
• Wikipedia:SVG help
• Wikipedia:Graphics Lab/Resources/SVG
• Wikipedia:Graphics Lab/Resources/PDF conversion to SVG
• b:XML ? Managing Data Exchange/SVG
• mw:Extension:TranslateSvg 및 toolforge:svgtranslate
• User:Rillke/SVGedit.js

維持 管理:

• Category:SVG
• Category:SVG maps - 指導 프로젝트의 SVG 分期.
• Category:Images that should use vector graphics
• Category:Pictures showing a librsvg bug
• Commons:Transition to SVG

• SVG 프라이머
• openclipart.org 10000個 以上의 SVG 이미지 提供 (퍼블릭 도메인)
• CanIUse.com
• 파이어폭스 브라우저의 SVG 2.0 支援
• 마이크로스프트 에지 플랫폼 狀態 (一部 SVG 關聯 主題)