SVG help Scalable vector graphics is a commonly used file format for providing a geometrical description of an image using basic objects such as labels, circles, lines, curves and polygons. An image can be reduced or enlarged to an arbitrary size, and will not suffer image data loss, nor will it become pixelated. SVG makes an excellent format for artwork, diagrams and drawings. SVG images are defined in XML text files. This means that they can be searched, indexed, scripted and, compressed. Since they are XML files, SVG images can be edited with any text editor, but SVG-based drawing programs are also available. However, the rendering engine used by wiki is not perfect, and may cause the image to be shown incorrectly, or differently from how it is displayed in your vector editor of choice. This page enables authors experiencing problems with SVG graphics to obtain some help in getting their images into wiki the way they intend. |
Things we can help with Understanding SVG
Using SVG appropriately
What you see is not what you get
Something new
| ||||||
Common problemsTesting for problemsThe following SVG checkers may help you to detect SVG problems before you upload: flowRoot does not appearIf black box appear, read c:User:JoKalliauer/RepairFlowRoot how to solve this issue, but do not remove those objects since they might contain text. The workarounds that one can employ are either not to use flowed text (by using the text tool without creating a text field), or convert the text to normal text (by Text-editor or sed-comand, or with Inkscape-GUI or with a Inkscape-batch), but to stroke the text using "object to path", since path-text is not recomended and increases file-size. font-family issuesDue to copyright restrictions, MediaWiki cannot use proprietary fonts that are commonly found on several proprietary operating systems. Fonts such as Geneva require licensing fees to distribute. rsvg will not be able to locate such fonts, and the text will fail to appear in the rendered image. There are three solutions to this issue:
For ease of subsequent editing and significantly smaller file sizes, substituting the font with an available font is recommended. Many common fonts have non-proprietary alternatives that are similar in typographical style, resulting in minimal disruption to existing images during substitution. For a list of fonts available in Wikipedia, see available fonts on Meta. Wikimedia has default fonts, and will use Liberation Serif for Times New Roman and Liberation Sans for Arial. For further fallbacks see c:Help:SVG#fallback. Fonts that are available on Wikimedia servers may or may not be available on a visitor's machine. If the placement or appearance of text in the image is important and there is uncertainty about which fonts are installed on a visitor's machine, then converting text into path information may be necessary. bad letter-alignment on small font-sizeLibrsvg calculates the letter-distances inaccurantly for font-sizes of 20px and below. For a text like <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<text x="20" y="30" font-size="5px">exampletext</text>
</svg>
you can replace it with: <svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
<text x="200" y="300" font-size="50px">exampletext</text>
</svg>
or with <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<g transform="scale(0.1)"><text x="200" y="300" font-size="50px">exampletext</text></g>
</svg>
Missing embedded JPEG imagesWhen a raster graphic is embedded in an SVG it is encoded into base64 data. That data is then assigned a MIME type in the <image> element. In the case of an embedded JPEG, the MIME type is "image/jpeg". Older versions of Inkscape (and possibly other editors) assigned the MIME type "image/jpg". While Inkscape and most web browsers will display such an SVG image just fine, the MediaWiki software that rasterizes the SVG file will have trouble with it. Not recognizing the MIME type "image/jpg" there will simply be an empty space where the image is supposed to be. The fix is to open the SVG file in a text editor, find the <image> element, locate "image/jpg", change it to "image/jpeg" and re-save. At right is an example of this problem. The Commons SVG Checker looks for this problem; see Commons:Commons:Commons SVG Checker/KnownBugs#Checks for details. Though Web browsers cope with image tags without width and height specified, librsvg ignores such images. arc flagsIf circle-segmentes are distorted it is often due to reduced spaces between arc-to-flags, see phab:T217990 for details. Further issuesFurther issues can be found at c:Librsvg_bugs or at Commons:Commons:Commons SVG Checker/KnownBugs, and examples can be found at c:Category:Pictures_demonstrating_a_librsvg_bug. However most issues (for files <1MB) can be fixed using https://svgworkaroundbot.toolforge.org/ (enable "run svgcleaner" and enable "run scour" before clicking convert), for a more detailed list check c:User:SVGWorkaroundBot. Rendering filesMediaWiki (the software from which Wikipedia is run) uses the librsvg-library to rasterize all of its svg files. The version of the rsvg program that is installed on wiki does not always correctly raster the Inkscape or OpenOffice.org SVG files, and does not recognize some formats in text-editor SVG files. The file manager GNOME Files or c:Commons:Commons_SVG_Checker relies on librsvg, so it can be used to check the quality before a SVG is uploaded. Rendering Inkscape filesThere is a simple work-around for the scarcities of librsvg. The operation "Stroke to Path", to be found under Menu>Path in Inkscape or via Ctrl+Alt+C, can be applied to all of the objects that are not rendered correctly. To keep the SVGs editable, this should only be done to the files intended for upload, and these files can be deleted afterwards. As of February 2014, the objects that must be modified to render correctly by librsvg include:
Rendering OpenOffice.org SVG filesOpenOffice.org SVG files may require manual modification before being uploaded to Wikipedia. To achieve this:
NB: Vector graphics line widths may also need to be set explicitly in OpenOffice.org Draw. SVG code replacement guide (executing replace all using Nedit regular expressions)
This SVG export procedure has been tested using OO 2.3.0 and OO 3.2.1 with a simple .odg candidate. Rendering text-editor SVG filesSVG files created from scratch in a text editor may make use of any valid SVG syntax, so long as your browser supports the given version of the SVG specification. On Wikipedia however, SVGs are interpreted by the librsvg-library to create PNG previews at different image sizes. That library only recognizes a subset of all valid SVG syntax, and may render your SVG without many features. In order to bypass these deficiencies in the library, there are certain parameters that need to be formatted in specific ways or be assigned a workaround value in order for librsvg to accurately render views of your SVG file. <mask> parameter maskUnits="userSpaceOnUse"The librsvg-library does not interpret the value of parameter stroke-dasharrayThe librsvg-library does not accept a Use xlink:href=, not href= alone, in
|
I've uploaded .xlsx (Microsoft Excel) spreadsheets that automatically generate XML code for charts in SVG format.
You simply paste your X-Y data into the spreadsheet, and specify image dimensions, number of grid lines, font sizes, etc. The spreadsheet instantly and automatically generates a column of XML code that you simply copy and paste into a text editor and save as an ".svg" file. It produces lean SVG code, avoiding the "extra stuff" that Inkscape inserts, and should save you time.
Feedback and suggestions on my talk page are welcome. RCraig09 (talk) 23:41, 19 February 2021 (UTC)
- Warming stripes (download v3.8) produces XML code for applications of Ed Hawkins' warming stripes graphics. User chooses vertical or horizontal stripes; or concentric ellipses, globes (with longitude lines/meridians), hearts, triangles, diamonds, rectangles, pentagrams/stars, hexagons, or octagons; chooses normal or reverse data ordering (updated 3 June 2021). Click here to see examples of warming stripes embedded in different shapes.
- Line charts (download v2.2)— Accepts up to five datasets for LINE charts (example at right) (updated 12 June 2021).
- Vertical bar charts (column charts) (download v1.1)— Accepts up to six datasets for VERTICAL BAR CHARTS (COLUMN CHARTS)—toggle between clustered and stacked charts; user can adjust "Yfloor"—the Y level (usually=0) from which columns rise or fall; user chooses to keep or ignore negative input values (example at right) (updated 30 April 2021).
- Horizontal bar charts (download v1.0)— Accepts up to six datasets for HORIZONTAL BAR CHARTS—toggle between clustered and stacked charts; user can adjust "Yfloor"—the value (usually=0) from which bars extend; user chooses to keep or ignore negative input values (updated 9 June 2021).
- Scatter plots (download v1.0)— Accepts up to five datasets for SCATTER PLOTS (updated 14 June 2021).
- Pie charts (download v1.0)— Accepts a series of up to 36 items for PIE CHARTS (updated 25 March 2021).
See examples in Category:SVG diagrams created with spreadsheet.
Assistance
If you have a tricky SVG file with a problem not described, or can't quite figure out what the previous section was talking about, you can simply ask for assistance by posting a quick note hereafter that outlines the problem, as well as providing links to the files that are exhibiting these problems. Don't forget to sign your name with four tilde symbols (~~~~) and an editor will attempt to reply here to help!
When you are happy that a request has been fulfilled, just leave a note so that the request can be archived later, as needed.
An alternative source of help is Commons:Graphics village pump.
Current requests
Create a new request
Why didn't my upscale work?
Hello!
I tried upscaling File:Fluix logo 2014.svg following the guide at User:Ronhjones/SVGreduce.
- Before:
<svg height="64" viewBox="0 0 64 64" width="64" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd" transform="translate(-736 -64)"><path d="m768 64a32 32 0 1 1 -32 32 32 32 0 0 1 32-32zm-3.094 12.454a52.177 52.177 0 0 0 -19.075 14.546 8 8 0 0 0 .007 9.956 52.158 52.158 0 0 0 19.117 14.563 8.013 8.013 0 0 0 6.225-.026 52.163 52.163 0 0 0 19.046-14.52 8 8 0 0 0 0-9.994 52.158 52.158 0 0 0 -19.006-14.5 8.015 8.015 0 0 0 -6.314-.025z" fill="#319eff"/><path d="m764.386 115.6a51.429 51.429 0 0 1 -18.823-14.473 8.011 8.011 0 0 1 -.528-9.148q-.174.2-.345.4a20 20 0 0 0 2.232 28.012 31.357 31.357 0 0 0 49.083-11c-7.705 13.787-22.277 10.409-31.619 6.209z" fill="#1066b3"/><path d="m770.846 76.291a52.548 52.548 0 0 1 19.292 14.209 7.7 7.7 0 0 1 .439 9.531c.12-.13.494-.611.612-.744a19.263 19.263 0 0 0 -2.477-27.735 33.051 33.051 0 0 0 -21.081-7.521 32.632 32.632 0 0 0 -29.6 18.4c7.957-13.644 23.178-10.32 32.815-6.14z" fill="#add8ff"/></g></svg>
- After:
<svg height="316" viewBox="0 0 316 316" width="316" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd" transform="translate(-736 -64)"><path d="m768 64a32 32 0 1 1 -32 32 32 32 0 0 1 32-32zm-3.094 12.454a52.177 52.177 0 0 0 -19.075 14.546 8 8 0 0 0 .007 9.956 52.158 52.158 0 0 0 19.117 14.563 8.013 8.013 0 0 0 6.225-.026 52.163 52.163 0 0 0 19.046-14.52 8 8 0 0 0 0-9.994 52.158 52.158 0 0 0 -19.006-14.5 8.015 8.015 0 0 0 -6.314-.025z" fill="#319eff"/><path d="m764.386 115.6a51.429 51.429 0 0 1 -18.823-14.473 8.011 8.011 0 0 1 -.528-9.148q-.174.2-.345.4a20 20 0 0 0 2.232 28.012 31.357 31.357 0 0 0 49.083-11c-7.705 13.787-22.277 10.409-31.619 6.209z" fill="#1066b3"/><path d="m770.846 76.291a52.548 52.548 0 0 1 19.292 14.209 7.7 7.7 0 0 1 .439 9.531c.12-.13.494-.611.612-.744a19.263 19.263 0 0 0 -2.477-27.735 33.051 33.051 0 0 0 -21.081-7.521 32.632 32.632 0 0 0 -29.6 18.4c7.957-13.644 23.178-10.32 32.815-6.14z" fill="#add8ff"/></g></svg>
But it didn't work as expected. Only the viewbox was upscaled, not the logo itself. Please help me :) Jonteemil (talk) 22:36, 31 May 2021 (UTC)
- I don't think that it's intended for upscaling - it's probably called SVGreduce for a good reason. --Redrose64 🌹 (talk) 22:51, 31 May 2021 (UTC)
- @Redrose64: So it matters if you scale it down or up? How can you scale it up with a texteditor, do you know?Jonteemil (talk) 23:02, 31 May 2021 (UTC)
- @Jonteemil: No it does not depend it you up- or down-scale, the answer could be found in the source/reference. Why would you like to upscale it? However you should not upscale fair-use images. A logo has a smaller maximal allowed fair-use-size than a complex diagram. It only exist a rule of thumb for raster-images, but there is not rule for vektor-images on Wikipedia, however User:Ronhjones applied the raster-image-settings to the preview (but only on downscale), which is imho senseless. Now the bot also upscales, which is definitely wrong. The correct way to provide fair-use-svgs is to reduce the precision (e.g. significant number of digits in the svg), however that is difficult to implement. Another option would be to only save a rasterized version.
- @Redrose64: Reduce in term of fair-use is more related to content/data (i.e. file-size). However because it is difficult to reduce the actual content, without breaking the file, it is only about reduction of the data in the preview (i.e. smaller png-file-size).
- @Jonteemil:
This non-free media file should be replaced with a smaller version to comply with Wikipedia's non-free content policy and United States copyright law.
There is no firm guideline on allowable resolutions for non-free content; images should be rescaled as small as possible to still be useful as identified by their rationale, and no larger. This metric is very qualitative, and thus difficult to enforce. Some legal proceedings have discussed the issue, but are inconclusive here.
- A screenshot will need a much higher resolution than a logo, otherwise the text is not readable, so don’t scale all to the same value, and definitely don’t do any upscales (except is not recogniceable [e.g. below 10px]). The recommended value is just a rule of thumb, but noone ever said that someone should upscale anything, especially not logos to such huge size.
- Conclusion: Don’t upscale fair-use svg-logos, it (most likely) violates the criteria.
- — Johannes Kalliauer - contrib. 07:46, 1 June 2021 (UTC) (edited 10:04, 1 June 2021 (UTC))
- @Jonteemil: All SVG images are scalable (provided that they don't included embedded binaries), that's what the S stands for and is kinda the point about them. An SVG image should have in its
<svg>
tag either or both of (i)width=
andheight=
attributes or (ii) aviewBox=
attribute. So far as the Wikimedia projects are concerned, theviewBox=
attribute is the most useful, since the only purposes ofwidth=
andheight=
are (i) to set the values shown in text like "Original file (SVG file, nominally 64 × 64 pixels, file size: 951 bytes)", and (ii) to set the dimensions of the primary thumbnail shown on the file description page. But the non-free enforcement people also take those dimensions into account (even though they are so easily overridden), and to keep those people happy the product of width and height should not exceed 100,000 (see WP:IMAGERES) which means for a square image like this, setheight="316" width="316"
as you noted above. However, you should leaveviewBox="0 0 64 64"
alone, unless you are willing to go through all of the coordinates in thed=
attributes of the three<path />
tags and adjust those too. --Redrose64 🌹 (talk) 14:07, 1 June 2021 (UTC)- One way to downscale (I suppose that's the intention for fair use) SVG images is to wrap everything inside the
<svg ...</svg>
in e.g.<g transform="scale(0.1)">...</g>
(0.1 shrinks everything to 10% of its original size) and updateviewBox
accordingly. - Though SVG without embedded bitmaps are indefinitely scalable in theory, the thumbnail renderer shows poor kerning for text below around 20 pixels. It may also affect the effect of SVG filters. Cheers, cmɢʟee⎆τaʟκ 23:34, 1 June 2021 (UTC)
- @Redrose64: Okay, thank you, that makes sense!
- @JoKalliauer: When the nominal size of SVG logos are super small, to the extent that you can barely see it on the
File:
page then I think it is justified to upscale it to the WP:IMAGERES 0.1 megapixels. I have only tagged files with {{SVG upscale}} that have been below 100 pixels AND that have been to small to be seen.Jonteemil (talk) 18:00, 7 June 2021 (UTC)
- One way to downscale (I suppose that's the intention for fair use) SVG images is to wrap everything inside the
- @Jonteemil: All SVG images are scalable (provided that they don't included embedded binaries), that's what the S stands for and is kinda the point about them. An SVG image should have in its
- @Redrose64: So it matters if you scale it down or up? How can you scale it up with a texteditor, do you know?Jonteemil (talk) 23:02, 31 May 2021 (UTC)
Radial gradient lost at small thumbnail sizes
@JoKalliauer: I found another strange behaviour with the rsvg: in Firefox and Chrome on Ubuntu, the radial gradient forming the "bubbles" disappears when the thumbnail width is under 281 pixels.
Can you (or anyone else) please help? Thanks, cmɢʟee⎆τaʟκ 00:19, 6 June 2021 (UTC)
P.S. Both sizes look fine in Chrome on Android.
- @Cmglee:
- Because Smartphones have smaller pixelsizes (more pixels per inch), they often use twice the size of the size of the Desktop.
- You need to compare the direct png-links, otherwise you get a different px-size. (not the specified one)
- 280: https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Comparison_gender_life_expectancy_CIA_factbook.svg/280px-Comparison_gender_life_expectancy_CIA_factbook.svg.png
- 281: https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Comparison_gender_life_expectancy_CIA_factbook.svg/281px-Comparison_gender_life_expectancy_CIA_factbook.svg.png
- The file is correctly rendered by
- rust-librsvg2.50
- resvg
- Inkscape
- Batik
- I wrote a bug-report on phab:T284407.
- If you could try to make a minimal working example as File:T284407.svg that would be very helpful. The conclusion is that a large transform such as
transform="translate(-1e4)" cx="1e4"
should not be used, and in combination withstroke="#f00" stroke-opacity="0"
it seems to break down. - — Johannes Kalliauer - contrib. 19:33, 6 June 2021 (UTC)
- @JoKalliauer: Thank you very much. I wonder if you were looking at a different file. File:Comparison_gender_life_expectancy_CIA_factbook.svg doesn't have abnormal transforms. The circles have radii from around 1 to 97, the viewBox="400 -955 560 490" and the circles don't even have transforms applied. Is there another known bug? Thanks, cmɢʟee⎆τaʟκ 21:41, 6 June 2021 (UTC)
- @Cmglee: You have viewBox of "400 -955 560 490", so that's similar to a transform of 955, that’s pretty close to the 1e4 I have. I simplified the file more and more, and setting the center to the origin removed the issue. — Johannes Kalliauer - contrib. 06:54, 7 June 2021 (UTC)
- @Cmglee: It would be helpful if you provide a minimal working example. — Johannes Kalliauer - contrib. 07:00, 7 June 2021 (UTC)
- Thanks, @JoKalliauer: I'll provide a minimal working example. I've used viewBoxes of much larger offsets (tens of thousands) without problem so think something else is causing it. I'll debug it when I can. Cheers, cmɢʟee⎆τaʟκ 21:50, 7 June 2021 (UTC)
- @JoKalliauer: Thank you very much. I wonder if you were looking at a different file. File:Comparison_gender_life_expectancy_CIA_factbook.svg doesn't have abnormal transforms. The circles have radii from around 1 to 97, the viewBox="400 -955 560 490" and the circles don't even have transforms applied. Is there another known bug? Thanks, cmɢʟee⎆τaʟκ 21:41, 6 June 2021 (UTC)
Signature of Libuše Šafránková
Hi, would someone please render this signature: File:LŠ podpis.jpg? The actress passed away this week. Thanks, --Pakeha (talk) 16:02, 11 June 2021 (UTC)