This is an
archive of past discussions for the period February 2020 to the present. Do not edit the contents of this page. If you wish to start a new discussion or revive an old one, please do so on the current talk page. |
Archive 5 | Archive 6 | Archive 7 | Archive 8 | Archive 9 | Archive 10 |
The gradient on File:Amerisleep logo.svg isn't displaying correctly. The source file can be found at https://cdn11.bigcommerce.com/s-36im9ihtig/stencil/ab3a5220-34da-0138-caa0-0242ac11000c/e/90ad9a30-26aa-0138-37b5-0242ac11000d/img/dh-custom/logo.svg. Thank you. Daylen ( talk) 04:42, 19 February 2020 (UTC)
I'm in the home stretch of solving numerous font-related problems, but text still doesn't render consistently, as you can see at right and after clicking. When testing the SVGs:
I saved from Inkscape as "Plain SVG" (not Inkscape SVG).
I still can't see why (for example) the right legends ("0.75" ... "0.00") render further left than they should, and the left side legends (125...0) are shifted up a bit, and the tiny text at bottom renders left of center. Am I missing something basic? Thanks in advance for immediately pointing out my undoubtedly fundamental oversight or misunderstanding! —
RCraig09 (
talk) 05:52, 4 March 2020 (UTC)
<flowRoot>...</flowRoot>
, two <flowRegion>...</flowRegion>
, and two <flowPara />
, none of which are recognised by
librsvg. There are also two <clipPath>...</clipPath>
(those with id="clipPath1022"
and id="clipPath1072"
) which do nothing and may safely be removed. So can all the stuff about cc
, dc
, inkscape
, rdf
and sodipodi
. --
Redrose64 🌹 (
talk) 14:18, 5 March 2020 (UTC)
font-family:'Liberation Sans', sans-serif;-inkscape-font-specification:'Liberation Sans, sans-serif';
. After uploading Version 9, the problem I was worried about—text rendering—hasn't changed. Ideas/explanations, anyone? —
RCraig09 (
talk) 05:04, 6 March 2020 (UTC)
<text>...</text>
and <tspan>...</tspan>
element. Consider just the first such group: <text
id="text422"
y="-136.63911"
x="80.450279"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10.58333302px;line-height:1.25;font-family:'Liberation Sans', sans-serif;-inkscape-font-specification:'Liberation Sans, sans-serif';text-align:center;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
xml:space="preserve"><tspan
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'Liberation Sans', sans-serif;-inkscape-font-specification:'Liberation Sans, sans-serif';stroke-width:0.26458332"
id="tspan420"
y="-136.63911"
x="80.450279"><tspan
id="tspan418"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:25.39999962px;font-family:'Liberation Sans', sans-serif;-inkscape-font-specification:'Liberation Sans, sans-serif';stroke-width:0.26458332"
y="-136.63911"
x="80.450279">125</tspan></tspan></text>
<text
y="-136.63911"
x="80.450279"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:25.39999962px;line-height:1.25;font-family:'Liberation Sans', sans-serif;text-align:center;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
xml:space="preserve">125</text>
<text>...</text>
elements at the same level, so a <g>...</g>
element enclosing most (if not all) the <text>...</text>
elements may be given the styles instead. --
Redrose64 🌹 (
talk) 14:44, 6 March 2020 (UTC)
run scour and convert flowRoot to valid SVG1.1-text
this
removes empty flowRoot and
converts flowRoots to SVG-1.1-valid text. {I just use
scour (also used in
Inkscape, when saving as "Optimized SVG") because my code has limited linebreak-support.}cc
, dc
, rdf
is unproblematic for this file, but generally can be interpreted as copyrightviolation, see
User:Glrx edit in
14:20, 22. Okt. 2017inkscape
, and sodipodi
is unproblematic for this file, but could be important for further editing in inkscape see
c:User:JoKalliauer/Optimization#invalid_elements_that_should_be_kept (e.g.
File:Sodipodi-type="arc".svg)I've been struggling to create svg files that include text and have them look half way decent when rendered as thumbnails on wikipedia (chrome / windows, 1680 x 1050 monitor, for what it's worth). The thumbnail shown on the right is an example- it looks great zoomed in if you click on it, but the text looks like garbage in the thumbnail. The images wikipedia generates look OK to me, and if I take the large version of the image and scale it down it looks good as well, but whatever wikipedia is doing when rendering fonts in thumbnails looks really wrong to me.
If I convert the text in the image to vector images before creating the svg then the file looks good zoomed in, but then localization will be broken and so forth. I figure that's not what we want.
Ideally, the text in the image would closely match the text in wikipedia pages, if not exactly then approximately. Guidance on how to achieve this would be much appreciated. Efbrazil ( talk) 00:23, 25 February 2020 (UTC)
font-family="Arial,Arial_MSFontService,sans-serif"
five times. Of the three font families, the first two are not installed, so it falls back to the third which is a generic sans-serif. I believe that in our case this is
Liberation Sans. If you dislike that font, you should use only
available fonts. Don't convert text to paths, it increases the file size significantly. --
Redrose64 🌹 (
talk) 08:15, 25 February 2020 (UTC)sans-serif
falls back to
DejaVu Sans. So you could use font-family="Liberation Sans,sans-serif"
for an Arial approximation. --
Redrose64 🌹 (
talk) 08:29, 25 February 2020 (UTC)
font-family="Arial,Arial_MSFontService,sans-serif"
and font-family="Liberation Sans,sans-serif"
, should render the same, see also the hints regarding fonts, when checking Arial-SVGs on
Commons SVG Checker. I recommended on
c:Help:SVG#fallback to use font-family="Liberation Sans,Arial,Nimbus Sans L,Helvetica,sans-serif"
, since librsvg only takes first, and on Windows-Computers it should use Arial (if no Liberation Sans) not the default sans-serif. —
Johannes
Kalliauer -
contrib. 19:46, 27 February 2020 (UTC)
I've just discovered (I think) a new application for interactive SVG without JavaScript: a quiz to let students learn the locations of geographic features, components of a system etc (basically any 1-to-1 mapping). My first example concerns the states of the USA.
I wonder if anyone here knows of an elegant way to implement counters without JavaScript. In my example, a student could start with, say, three lives. Every wrong answer (triggered by the "reset" element) deducts one life. When all lives are lost, the game is over. A workaround is to have as many reset elements as lives and delete the elements as lives are used up. That would however lead to much redundant code :-(
A less strict version just counts the number of wrong answers and shows it at the end when all states have been identified.
Alternatively, I could implement a timer that counts the number of seconds (as in
my morphing demo) but pause it when all states have been identified, to show how long the student took. A workaround is to add
onmousemove="document.getElementsByTagName('svg')[0].pauseAnimations();"
on the win screen, but:
on*
attributes(I can make a version where a timer counts down to zero, the game ending if the student fails to identify all states in time, as in my missile game, though a time limit may frustrate students.)
Would anyone be able to help? Thanks, cmɢʟee⎆ τaʟκ 00:07, 10 February 2020 (UTC)
Hi SVG experts! I made File:Ancient_seven_wonders_timeline.svg into a multilingual SVG. However, as the Russian text is longer than the default English text, as on the right, I had to reduce the font size.
I tried adding an extra style sheet in a switch tag:
<switch>
<style type="text/css" systemLanguage="ru">
text { font-size:80px; }
</style>
</switch>
<style type="text/css">
#main { font-family:Helvetica,Arial,sans-serif; font-size:100px; ... }
...
</style>
but that didn't work. Neither did
<switch>
<style type="text/css" systemLanguage="ru">
#main { font-family:Helvetica,Arial,sans-serif; font-size:80px; ... }
...
</style>
<style type="text/css">
#main { font-family:Helvetica,Arial,sans-serif; font-size:100px; ... }
...
</style>
</switch>
I eventually had to add a ru class and specify it in each switched text tag e.g.
<style type="text/css">
#main { font-family:Helvetica,Arial,sans-serif; font-size:100px; ... }
...
.ru { font-size:80px; }
</style>
...
<switch>
<g systemLanguage="ru">
<text class="ru label_name" x="-20" y="-915"><tspan>Колосс</tspan><tspan x="-20" dy="100">Родосский</tspan></text>
<text class="ru label_start" x="0" y="-310">292 до н.э.</text>
<text class="ru label_end" x="0" y="-130">226 до н.э.</text>
<text class="ru label_end" x="0" y="750">654 н.э.</text>
</g>
<g>
<text class="label_name" x="10" y="-915"><tspan>Colossus</tspan><tspan x="20" dy="100">of</tspan><tspan x="20" dy="100">Rhodes</tspan></text>
<text class="label_start" x="0" y="-310">292 BC</text>
<text class="label_end" x="0" y="-130">226 BC</text>
<text class="label_end" x="0" y="750">654 AD</text>
</g>
</switch>
Is there a better (more elegant) way of setting a language-specific global font size?
Thanks,
cmɢʟee⎆
τaʟκ 23:38, 9 March 2020 (UTC)
So I think I understand the root of svg font evil on wikipedia. The problem is that wikimedia renders 270 width thumbnails natively from SVG, instead of just scaling down a higher resolution version of the image. When wikimedia renders svg files at that resolution it uses the itty-bitty font settings, which are garbage.
The "bad letter-alignment on small font-size" in the help text at the top of this page is misleading I think, because it implies you can fix the issue as the svg creator. The problem has nothing to do with the declared font size in the svg file, rather it's the font size wikimedia uses when rendering to a low resolution.
The two images on the right illustrate the problem. The first is just normal png and always looks good. The second has embedded text, and it only looks good if I view it on a high resolution smartphone or zoom my browser and then load the page fresh. If I view the second image on a standard desktop resolution of something like 1680 by 1050, the thumbnail looks like pixelated garbage. As a side note, the image also looks good if use an svg where I've converted the fonts to vectors before uploading.
I'm happy with a work around, like maybe a way to force wikipedia to use the larger version of an image for thumbnails.
Suggestions? This issue is really killing our ability to use native text in svg files on wikipedia. If it can't be fixed, the other editors want me to switch all of our svg files over to use vectors for fonts, instead of native text, even though it will crush things like localization. Efbrazil ( talk) 20:14, 11 March 2020 (UTC)
<filter id="filter_blur"><feGaussianBlur stdDeviation="1"/></filter>
<text ... filter="url(#filter_blur)">...</text>
stroke-width=
attribute won't do much (if anything), because text typically isn't stroked - it's filled. Consider the letter O placed in a SVG file as <text>O</text>
- when this is rendered, you think that you're seeing a black outline with a white centre; but in fact, it's drawn as two rings, with their outlines not stroked but the space between filled, something like stroke="none" fill="black"
. Consider
this SVG example (from
SVG 1.1 (Second Edition) – 16 August 2011), the fourth row of text shows what happens when you apply different stroke colours but a consistent fill="yellow"
. --
Redrose64 🌹 (
talk) 21:05, 12 March 2020 (UTC)
For some reason when you click on this logo (i.e. visit https://upload.wikimedia.org/wikipedia/en/4/40/Syrianska.svg), the red background turns white. Can someone please fix it? Jonteemil ( talk) 15:23, 25 March 2020 (UTC)
<g>...</g>
element that has the clip-path="url(#clipPath4014-6)"
attribute, or the <clipPath>...</clipPath>
element itself. Make sure that you stick to the SVG 1.1 spec. --
Redrose64 🌹 (
talk) 23:39, 25 March 2020 (UTC)
This page is now so long that it takes ages to scroll on a mobile. Would anyone mind my archiving posts begun before 2020 (i.e. before W3C invalid inquiry and layers)? cmɢʟee⎆ τaʟκ 18:17, 12 March 2020 (UTC)
File:Prime Minister text and logo.png should be moved to an SVG. TrailBlzr ( talk) 20:56, 15 March 2020 (UTC)
You are invited to join the discussion at Talk:2019–20_coronavirus_pandemic/Archive_24#Developing_an_SVG_version. Sdkb ( talk) 03:44, 17 March 2020 (UTC)
Why won't File:COVID-19 outbreak France per capita cases map.svg render properly? Ythlev ( talk) 16:21, 20 March 2020 (UTC)
d=
attributes of the <path />
elements seem to have had most of the spaces and some of the zeroes stripped out, causing the same ambiguity problem as at
#File:Alternattiva Demokratika.svg above. --
Redrose64 🌹 (
talk) 08:40, 21 March 2020 (UTC)
Hi! Could someone explain for me what the technical advantage with fixed W and H in SVG are. I'm discussing it here. – GeMet [ gemet| ʇǝɯǝƃ] 00:44, 6 April 2020 (UTC)
Hi all,
I've attempted to update the Doomsday Clock graph to reflect the 2020 time change, but the background is black instead of white/gradient.
Ironically I was the last person to update the graph, and I managed to fix this issue the last time. I have obviously forgotten what I did to resolve the problem, but it looks like the code formatting is quite different; I feel like I updated it using Illustrator and changed something using Inkspace.
Thanks for any help! — Preceding unsigned comment added by Ryanicus Girraficus ( talk • contribs) 20:57, 23 January 2020 (UTC)
Hi experts,
My file:Covariance_trends.svg renders correctly on File:Covariance_trends.svg but not on the article and Wikipedia's file page.
Any ideas why?
Thanks,
cmɢʟee⎆
τaʟκ 15:12, 20 May 2020 (UTC)
I have been adding chemistry diagrams, for example
I know that it would be better to use such diagrams in .svg format and I've worked out how to create them with software I have access to. I converted this one today and uploaded it on Commons as "Protoporphyrin_magnesium_insertion.svg". This looks fine when viewed natively but when inserted into a page the bottom part gets truncated, as here on the right.
Can you advise how to fix this? Thanks. Michael D. Turnbull ( talk) 14:17, 9 June 2020 (UTC)
<svg>
tag has the attributes height="105.03958mm" width="247.38542mm"
but it has no
viewBox=
attribute which would specify exactly how many pixels should stretch across 247.38542mm (or along 105.03958mm). You either need to alter all of the coordinates to use millimetre dimensions, or add a viewBox=
attribute. --
Redrose64 🌹 (
talk) 15:01, 9 June 2020 (UTC)OK. I think I understand that. I used a text editor to add the attribute viewBox="0 0 2470 1050" preserveAspectRatio="none" which I assumed would give me the ~247 by 105mm translated into something useful. After uploading this as a new version of the file, I can see that the image rendered here to the right is no longer truncated BUT it seems very small, as it's squeezed into the top left of the viewing box. Is there a value for the viewBox attribute that would work well in general on Wikipedia? Note that I'm clueless about the detials of .svg files: I converted a .wmf file that my chemical drawing software can produce into the .svg one by using a free utility at convertio.co. Michael D. Turnbull ( talk) 15:41, 9 June 2020 (UTC)
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns:dc=" http://purl.org/dc/elements/1.1/" xmlns:cc=" http://creativecommons.org/ns#" xmlns:rdf=" http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg=" http://www.w3.org/2000/svg" xmlns=" http://www.w3.org/2000/svg" id="svg411" height="1050px" width="2470px" viewBox="0 0 2470 1050" preserveAspectRatio="xMaxYMax meet" version="1.0"> <metadata id="metadata415">
I created an .svg file to ACS standards (including atom colouring) for azoxystrobin and loaded it in Commons as a new version of the existing (first and only) one. As expected, my new version now replaces the old one on most Wikis where it is used (for example "French wikipedia".). However, it doesn't replace the diagram in the chembox at azoxystrobin, nor does it appear correctly in the file history section of "Commons for this file"., although it DOES look correct in the PNG preview on Commons. Similarly, the image included on the right here is still the old one! What is going wrong? I've replaced other image files on Commons without any such issues.
Incidentally, I note with this file and many other svgs in Commons that clicking on the PNG preview gives a poor image at full scale with a black background obscuring the picture. Is there a way to upload .svg to avoid this or is it a "feature" of the system? Michael D. Turnbull ( talk) 14:19, 13 June 2020 (UTC)
Okay, I am trying to develop an SVG file template for creating images of tartan patterns. I figured out that I can use a <pattern> element for the tartan weave - I use a stroke-dasharray="2 2" to run the threads for either warp or weft. And then I want to use that pattern on a line with width=page size across the image, and its own stroke-dasharray with the tartan pattern for that color. The problem I am running into is that the <line> element requires the stroke property to specify the color of the line, but I also need to specify <line stroke="url(#pattern)"/> to apply the weave pattern onto the tartan color pattern. Is there a trick for specifying two parameters for the stroke property? I tried using a semicolon because my reference suggested it has some relation to CSS properties, but it didn't work. Van Isaac WS cont 02:51, 22 June 2020 (UTC)
<svg ... viewBox="0 0 512 512" ...>
<defs>
<pattern id="warp_red" patternUnits="userSpaceOnUse" width="8" height="8" patternTransform="rotate(-45)">
<rect x="0" y="0" width="8" height="4" fill="red" stroke="none" />
</pattern>
<pattern id="warp_green" patternUnits="userSpaceOnUse" width="8" height="8" patternTransform="rotate(-45)">
<rect x="0" y="0" width="8" height="4" fill="green" stroke="none" />
</pattern>
<pattern id="warp_blue" patternUnits="userSpaceOnUse" width="8" height="8" patternTransform="rotate(-45)">
<rect x="0" y="0" width="8" height="4" fill="blue" stroke="none" />
</pattern>
<pattern id="warp_yellow" patternUnits="userSpaceOnUse" width="8" height="8" patternTransform="rotate(-45)">
<rect x="0" y="0" width="8" height="4" fill="yellow" stroke="none" />
</pattern>
<pattern id="weft_red" patternUnits="userSpaceOnUse" width="8" height="8" patternTransform="rotate(-45)">
<rect x="0" y="4" width="8" height="4" fill="red" stroke="none" />
</pattern>
<pattern id="weft_green" patternUnits="userSpaceOnUse" width="8" height="8" patternTransform="rotate(-45)">
<rect x="0" y="4" width="8" height="4" fill="green" stroke="none" />
</pattern>
<pattern id="weft_blue" patternUnits="userSpaceOnUse" width="8" height="8" patternTransform="rotate(-45)">
<rect x="0" y="4" width="8" height="4" fill="blue" stroke="none" />
</pattern>
<pattern id="weft_yellow" patternUnits="userSpaceOnUse" width="8" height="8" patternTransform="rotate(-45)">
<rect x="0" y="4" width="8" height="4" fill="yellow" stroke="none" />
</pattern>
</defs>
<g stroke="none">
<rect x="0" y="0" width="512" height="256" fill="url(#weft_red)" />
<rect x="0" y="0" width="256" height="512" fill="url(#warp_red)" />
<rect x="0" y="112" width="512" height="32" fill="url(#weft_green)" />
<rect x="112" y="0" width="32" height="512" fill="url(#warp_green)" />
<rect x="0" y="256" width="512" height="256" fill="url(#weft_blue)" />
<rect x="256" y="0" width="256" height="512" fill="url(#warp_blue)" />
<rect x="0" y="368" width="512" height="32" fill="url(#weft_yellow)" />
<rect x="368" y="0" width="32" height="512" fill="url(#warp_yellow)" />
</g>
</svg>
stroke="none"
throughout - all the colouring is via fill=
. --
Redrose64 🌹 (
talk) 09:48, 22 June 2020 (UTC)
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<pattern id="HR" viewBox="0 0 4 4" height="4" width="4">
<rect x="0" y="0" width="1" height="2" fill="#000" stroke="none"/>
<rect x="1" y="1" width="1" height="2" fill="#000" stroke="none"/>
<rect x="2" y="2" width="1" height="2" fill="#000" stroke="none"/>
<rect x="3" y="0" width="1" height="1" fill="#000" stroke="none"/>
<rect x="3" y="3" width="1" height="1" fill="#000" stroke="none"/>
</pattern>
<rect x="0" y="0" width="100" height="100" fill="url(#HR)" stroke="none"/>
</svg>
<path d="M 0,0 v4 h1 v-4 h1 v4 h1 v-4" fill-opacity="0" stroke="#000" stroke-dasharray="2 2"/>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<pattern id="HR" viewBox="0 0 4 4" height="4" width="4" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="1" height="2" fill="#FFF" stroke="none"/>
<rect x="1" y="1" width="1" height="2" fill="#FFF" stroke="none"/>
<rect x="2" y="2" width="1" height="2" fill="#FFF" stroke="none"/>
<rect x="3" y="0" width="1" height="1" fill="#FFF" stroke="none"/>
<rect x="3" y="3" width="1" height="1" fill="#FFF" stroke="none"/>
</pattern>
<mask id="weft" maskUnits="userSpaceOnUse">
<rect x="0" y="0" width="100%" height="100%" fill="url(#HR)" stroke="none"/>
</mask>
<g> Tartan pattern: K10 G5 R10 K4 R4 Y1
<line stroke="#000" stroke-dasharray="10 15 4 9 4 15" x1="50" y1="0" x2="50" y2="100" stroke-width="100"/>
<line stroke="#080" stroke-dasharray="0 10 5 37 5 0" x1="50" y1="0" x2="50" y2="100" stroke-width="100"/>
<line stroke="#F00" stroke-dasharray="0 15 10 4 4 1 4 4 10 5" x1="50" y1="0" x2="50" y2="100" stroke-width="100"/>
<line stroke="#FF0" stroke-dasharray="0 33 1 23" x1="50" y1="0" x2="50" y2="100" stroke-width="100"/>
</g>
<g mask="url(#weft)">
<line stroke="#000" stroke-dasharray="10 15 4 9 4 15" x1="0" y1="50" x2="100" y2="50" stroke-width="100"/>
<line stroke="#080" stroke-dasharray="0 10 5 37 5 0" x1="0" y1="50" x2="100" y2="50" stroke-width="100"/>
<line stroke="#F00" stroke-dasharray="0 15 10 4 4 1 4 4 10 5" x1="0" y1="50" x2="100" y2="50" stroke-width="100"/>
<line stroke="#FF0" stroke-dasharray="0 33 1 23" x1="0" y1="50" x2="100" y2="50" stroke-width="100"/>
</g>
</svg>
Hello. I've tried to upload this file to Wikimedia Commons. But it says Found unsafe CSS in the style element of uploaded SVG file. Also the SVG checker says the font is unsupported, but it's listed here. What should I do? Mike like0708 ( talk) 17:19, 13 July 2020 (UTC)
<style id="droidsans700normal">
@font-face {
font-family: "Droid Sans";
font-weight: 700;
src: url("data:font/ttf;base64,");
}
</style>
base64,
and the next quote there is 56,640 bytes of binary data.@font-face { ... }
at-rule, which was introduced in CSS Fonts Module Level 3 (proposed 2013, not formalised until September 2018), but
librsvg can't handle anything that doesn't conform to
CSS level 1 (with the exception of certain
CSS level 2 features). The src:
property here seems to be describing the Droid Sans font, but you shouldn't need to do that - the two <text>...</text>
elements both have the font-family="Droid Sans"
attribute, which should be quite sufficient. I suggest that you remove everything between <style>...</style>
inclusive of those tags. --
Redrose64 🌹 (
talk) 20:57, 13 July 2020 (UTC)
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
style="..."
attributes, which are CSS. I won't comment on every element. The two <text>...</text>
elements both have the attribute font-family="DejaVu Sans"
- try altering that to font-family="'DejaVu Sans',sans-serif"
- note the nested quotes of differing types. These elements also have the attribute style="line-height:100%"
which contain the only CSS in the file, and it's valid CSS 1 so no problem there. The two <tspan>...</tspan>
elements both have the attribute dy="0em"
but the em
unit isn't used elsewhere, so alter those to dy="0"
. The tspan also enclose literal text - the Greek letters Γ and Μ, it's possible that these are being misinterpreted, so alter them to numeric character references Γ
and Μ
respectively. There are eight <g>
tags with no attributes, those may safely be removed together with with their balancing </g>
tags. --
Redrose64 🌹 (
talk) 08:57, 31 July 2020 (UTC)Could an SVG/librsvg expert confirm whether rsvg supports feConvolveMatrix, please? I noted on commons:Librsvg_bugs#Filters
before realising that I should get a second opinion. Thanks, cmɢʟee⎆ τaʟκ 06:26, 30 August 2020 (UTC)
I've created several maps that share the similar features, all of their thumbnails have poorly rendered parts of image and I wondering how to deal with this issue.
Files: Map of the London Assembly election
2016,
2012,
2008,
2004 and
2000
specifically, the images see a blurred image for the map of London within the at-large seat area and the rectangles with the graph for seats.
JDuggan101
talk. |
Cont. 12:48, 2 August 2020 (UTC)
I uploaded this file to Commons earlier this year. It was obtained from a US government website and is tagged as {{
PD-USGov-USGS}}
.
I note that there is now a "|other versions={{
Convert to SVG|biogeographical map}}
" tag on the file. I'd love to convert it to .svg but have no idea of how to do so easily, and doubt I can obtain such a format from the
"US govt website".. Any ideas, please?
Michael D. Turnbull (
talk) 16:39, 1 September 2020 (UTC)
{{
Convert to SVG|biogeographical map}}
tag as the map has very fine-grained data that would be lost on conversion to SVG, unless a bitmap of it is embedded in the SVG. A better solution is to redraw it as two separate images: the map and the graph. I'd leave it for now, until there's greater demand for the image (it's used only on
2,4-Dichlorophenoxyacetic acid). Cheers,
cmɢʟee⎆
τaʟκ 21:04, 4 September 2020 (UTC)
Could somebody explain to me, why the blue dots in this file do not show up after uploading on Commons? (while in this they do). Thanks! TheGlobetrotter ( talk) 12:58, 7 September 2020 (UTC)
<animate>...</animate>
element, and animation is not possible for SVG images on Wikipedia - only the initial state is shown. --
Redrose64 🌹 (
talk) 15:43, 7 September 2020 (UTC)The thumbnail of File:Cambridge_Kings_Ditch_map.svg is completely blank. The only issue flagged by the Commons SVG checker is missing fonts, which I've encountered before but isn't normally a problem. I think the image-embedding syntax is correct. The SVG renders fine on Firefox and Chrome. Can someone please check why doesn't render at all? Thanks, cmɢʟee⎆ τaʟκ 01:37, 14 September 2020 (UTC)
Text is rendering very badly -- even after I installing and choosing 'FreeSans', it isn't being used in the PNG previews. Not sure if this needs to be fixed, but I wasn't able to fix this.
Hi, hope this is the right place to ask. If this isn't, feel free to move my question. I am trying to translate the following illustration to Hebrew but the file seems to be wrong. I have manually pasted the corresponding translate into the textbox but it doesn`t work. Could someone help me fixing the file? רונאלדיניו המלך ( talk) 21:53, 8 October 2020 (UTC)
Just uploaded an SVG of the Biden-Harris Transition logo (PNG is currently used for wiki pages). SVG was downloaded directly from the transition site (www.buildbackbetter.com) and renders properly when viewed on computer, but does not on the file page. Have looked at the SVG help page but not seeing anything which seems relevant.
-- Crgmu ( talk) 18:33, 8 November 2020 (UTC)
hello! i would consider myself quite familiar with svg, and i've fixed quite a few rendering bugs with my own uploads, but this time i'm stuck. it's supposed to render like in fig. 1,
and it does so in my browser, but in librsvg it renders like in fig. 2,
which is completely unacceptable. Any help is appreciated! here is the code:
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 2964 2106">
<title>Flag of Trondheim</title>
<rect width="2964" height="2106" fill="#e63d34"/>
<path fill="#fc0" d="M2070 1085a224 224 0 00-90-17h-261a15 15 0 010-30h261a225 225 0 10-158-382l-185 185a15 15 0 01-21-21l185-185a225 225 0 10-382-158v261a15 15 0 01-30 0V477a225 225 0 10-382 158l185 185a15 15 0 01-21 21L986 656a225 225 0 10-158 382h261a15 15 0 010 30H828a225 225 0 10158 381l185-184a15 15 0 0121 21l-184 185a225 225 0 10381 158v-261a15 15 0 0130 0v261a225 225 0 10382-158l-185-185a15 15 0 0121-21l185 184a225 225 0 10248-364zm-666 248a280 280 0 11280-280 280 280 0 01-280 280zm260-280a260 260 0 11-260-260 260 260 0 01260 260zm-195-755l-50 50-15-80-15 80-50-50 65-180zM916 473v71l-67-46 46 67h-71l-81-173zM649 988l50 50-80 15 80 15-50 50-180-65zm175 553h71l-46 67 67-46v71l-173 81zm515 267l50-50 15 80 15-80 50 50-65 180zm553-175v-71l67 46-46-67h71l81 173zm267-515l-50-50 80-15-80-15 50-50 180 65zm-175-553h-71l46-67-67 46v-71l173-81z"/>
</svg>
Gutten på Hemsen ( talk) 22:19, 1 November 2020 (UTC)
d=
attribute of the <path />
element you have a number of relative movements which don't seem to be recognised as such, and I think that it's because values have been crushed together creating an ambiguity. For instance, the second command is a224 224 0 00-90-17
which is a relative arcto, and there should be seven values after the a
but the last four have all been run together. Try spacing them out, and if that doesn't work, use commas between each pair of x/y values as shown in the examples
here. --
Redrose64 🌹 (
talk) 23:54, 3 November 2020 (UTC)I created this CSS3 animation to show the rotation speeds and axial tilts of the planets and moon. It runs fine on Firefox and Chrome but the thumbnail is completely black.
The previous version at least showed the text. I understand that filters are not fully supported, so added a masked texture to show poor man's versions of the spherised textures but that totally broke the thumbnail.
Any idea what went wrong?
Thanks,
cmɢʟee⎆
τaʟκ 08:27, 27 November 2020 (UTC)
<image
, the SVGs renders correctlywidth="400" height="480" viewBox="-710 -2700 4000 4800"
for Commons SVG Checker (I did not try) width="100%" height="100%"
, it is uncommon and there is imho no change.File File:Infinite Discs logo BW.svg looks fine in the browser, but it always renders as a transparent rectangle on Mediawiki. What am I missing? - Iketsi ( talk) 19:54, 6 January 2021 (UTC)
Hi. Does anyone know why librsvg is cutting off the very bottom of Wikipedia's PNG version of File:CCEA (Council for the Curriculum, Examinations & Assessment) logo.svg (as seen in the infobox of the Council for the Curriculum, Examinations & Assessment page)? The PNGs at other sizes do not have the problem. Is there a workaround for this? – Green Tentacle ( talk) 20:14, 9 January 2021 (UTC)
<path />
elements, where the d=
attributes specify the centre-line for the component lines and arcs that make up each letter. These centre-lines are then stroked (thickened up) to become visible. Part of the problem is that the thickness of the lines is unspecified - that is, there are no explicit stroke-width=
attributes, so a default value is used.<path />
elements - that is, the ones where the d=
attribute begins with the commands M171.35,91.61
and M93.29,91.61
. A little after half-way through each d=
attribute are the commands a5.08,5.08,0,0,1-1.72,3,5,5,0,0,1-3.24,1,7.43,7.43,0,0,1-1.51-.17,4.75,4.75,0,0,1-1.34-.49
and a5.08,5.08,0,0,1-1.72,3,5,5,0,0,1-3.24,1,7.51,7.51,0,0,1-1.51-.17,4.87,4.87,0,0,1-1.34-.49
- these specify the descenders using four elliptical arcs each. The second and third arc in each one dip right down almost to the bottom edge of the viewport, so that when the line is stroked part of the line's thickness may be outside the viewport. You either need to extend the viewport downwards, or redraw the descenders. --
Redrose64 🌹 (
talk) 00:36, 10 January 2021 (UTC)
Hi experts!
I wonder if anyone here knows why the labels in the bottom figure are misaligned. The font size is a reasonable 28px and it inherits text-anchor:end from the main class. It is because the transform="... scale(20)" is too large a scale?
Thanks,
cmɢʟee⎆
τaʟκ 14:44, 24 January 2021 (UTC)
width="100%" height="100%"
to width="1065.6" height="1894.4"
seems to help. I think it is related to
phab:T35245 —
Johannes
Kalliauer -
contrib. 15:53, 24 January 2021 (UTC)Hi experts,
Before I file this as a bug on commons:Librsvg_bugs#Marker, I'd like to check if anyone is aware of Librsvg not recognising the attribute orient set to auto-start-reverse for the marker tag, or did I just make a careless mistake? The arrowheads for the dimensions and axes all point to the right, instead of in the direction of the line ending. They work fine on Firefox and Chrome. It's my first time using auto-start-reverse but I've used auto before and they work.
Thanks,
cmɢʟee⎆
τaʟκ 02:10, 8 February 2021 (UTC)
auto
or an angle for
the orient
attribute. The value auto-start-reverse
is
defined in SVG 2, which is still at the candidate recommendation stage, so not yet a formal W3C Recommendation. --
Redrose64 🌹 (
talk) 17:56, 8 February 2021 (UTC)
Hi experts, I uploaded the file Super Bowl XLV Logo.svg to Wikipedia, but the logo seems to be misplaced and very small, and the rendering is incorrect, as I extracted it from a PDF file. Is it possible for someone to move to logo where it should be, in the upper left hand corner, similarly to File:Super Bowl XLVI Logo.svg, so that it will render correctly? -- Politicsfan4 ( talk) 21:19, 14 February 2021 (UTC)
I uploaded File:Tim Mahoney Signature.svg to Wikipedia, but there seems to be some sort of transparent border on its right side, and it therefore renders very small. Since I want to use this in the article Tim Mahoney, could someone possibly crop this "border"? Thanks. -- Politicsfan4 ( talk) 17:51, 24 February 2021 (UTC)
The file File:Mitosis Stages.svg has a typo in its second image - it should be "mitotic" rather than "miotic", as en:File talk:Mitosis Stages.svg noted. Jo-Jo Eumerus ( talk) 14:03, 28 February 2021 (UTC)
Hi again,
Dots appear in the spots in the figure, presumably because I tried to apply a stroke-width of 3, greater than the circle's radius r of 1:
<circle id="spot" cx="0" cy="0" r="1" stroke-width="3"/>
As this behaviour isn't listed on commons:librsvg_bugs, but Firefox, Chrome and Edge all fully fill the circle, I don't know if this can be considered a librsvg bug.
Cheers,
cmɢʟee⎆
τaʟκ 01:00, 12 March 2021 (UTC)
I recently uploaded a file with a messed-up gradient. When you see it, it looks dark when it is not supposed to be. IF you open the origin file, you can see how I intended it to look.
I noticed that this was placed in the Commons category Category:Maint:Attr-user not existing. I assume this is the problem, but I have no idea what it means. W3C validator says this image is valid. This is really confusing.
Can anyone here help? -- Diriector_Doc├─────┤ Talk Contribs 19:36, 2 April 2021 (UTC)
{{
Attrib|Wikipedia-logo-v2-wordmark.svg|Wikimedia Foundation}}
- but
Wikimedia Foundation (
talk ·
contribs) is not a registered user. --
Redrose64 🌹 (
talk) 13:04, 4 April 2021 (UTC)stop-opacity="<opacity-value>"
or style="stop-opacity:<opacity-value>;"
, they are interchangeable. But as you noticed, if you have both forms in the same element and they have different values, as here: <stop
style="stop-color:#fee476;stop-opacity:1"
id="stop3858"
stop-opacity="0"
offset="0" />
I uploaded File:UE_logo.svg after extracting it from this PDF with Inkscape, however the images rendered by librsvg (such as in the revision thumbnails and the article page) have letter misalignment.
I'm sure this is
bad letter-alignment on small font-size, but is there an easy way to fix the font size for each of these text elements with (or without) Inkscape? I have tried editing the SVG text using simple find and replace, but I run into problems adding scale(0.1)
where there are already rotation transforms, and assume I can't increase the viewbox size for a non-free image.
Soapwort (
talk) 05:33, 31 March 2021 (UTC)
<g font-family="Arial" font-weight="bold" font-size="7.6394px" text-anchor="middle" fill="#dc2225" transform="translate(-140.3,-528.1)">
<text transform="rotate(269.7) translate(0,-35.4)" x="0" y="0.7ex"><tspan>•</tspan></text>
<text transform="rotate(278.5) translate(0,-35.4)" x="0" y="0.7ex"><tspan>T</tspan></text>
<text transform="rotate(286.5) translate(0,-35.4)" x="0" y="0.7ex"><tspan>H</tspan></text>
<text transform="rotate(295.3) translate(0,-35.4)" x="0" y="0.7ex"><tspan>E</tspan></text>
<text transform="rotate(307.5) translate(0,-35.4)" x="0" y="0.7ex"><tspan>U</tspan></text>
<text transform="rotate(316.3) translate(0,-35.4)" x="0" y="0.7ex"><tspan>N</tspan></text>
<text transform="rotate(322.6) translate(0,-35.4)" x="0" y="0.7ex"><tspan>I</tspan></text>
<text transform="rotate(329.1) translate(0,-35.4)" x="0" y="0.7ex"><tspan>O</tspan></text>
<text transform="rotate(338.4) translate(0,-35.4)" x="0" y="0.7ex"><tspan>N</tspan></text>
<text transform="rotate(350.2) translate(0,-35.4)" x="0" y="0.7ex"><tspan>F</tspan></text>
<text transform="rotate(358.4) translate(0,-35.4)" x="0" y="0.7ex"><tspan>O</tspan></text>
<text transform="rotate( 7.7) translate(0,-35.4)" x="0" y="0.7ex"><tspan>R</tspan></text>
<text transform="rotate( 20.1) translate(0,-35.4)" x="0" y="0.7ex"><tspan>E</tspan></text>
<text transform="rotate( 28.1) translate(0,-35.4)" x="0" y="0.7ex"><tspan>V</tspan></text>
<text transform="rotate( 36.2) translate(0,-35.4)" x="0" y="0.7ex"><tspan>E</tspan></text>
<text transform="rotate( 45.2) translate(0,-35.4)" x="0" y="0.7ex"><tspan>R</tspan></text>
<text transform="rotate( 53.4) translate(0,-35.4)" x="0" y="0.7ex"><tspan>Y</tspan></text>
<text transform="rotate( 61.6) translate(0,-35.4)" x="0" y="0.7ex"><tspan>O</tspan></text>
<text transform="rotate( 71.1) translate(0,-35.4)" x="0" y="0.7ex"><tspan>N</tspan></text>
<text transform="rotate( 80.0) translate(0,-35.4)" x="0" y="0.7ex"><tspan>E</tspan></text>
<text transform="rotate( 89.9) translate(0,-35.4)" x="0" y="0.7ex"><tspan>•</tspan></text>
<text transform="rotate( 78.7) translate(0, 35.4)" x="0" y="0.7ex"><tspan>M</tspan></text>
<text transform="rotate( 69.3) translate(0, 35.4)" x="0" y="0.7ex"><tspan>E</tspan></text>
<text transform="rotate( 60.0) translate(0, 35.4)" x="0" y="0.7ex"><tspan>M</tspan></text>
<text transform="rotate( 50.3) translate(0, 35.4)" x="0" y="0.7ex"><tspan>B</tspan></text>
<text transform="rotate( 42.0) translate(0, 35.4)" x="0" y="0.7ex"><tspan>E</tspan></text>
<text transform="rotate( 33.3) translate(0, 35.4)" x="0" y="0.7ex"><tspan>R</tspan></text>
<text transform="rotate( 24.7) translate(0, 35.4)" x="0" y="0.7ex"><tspan>S</tspan></text>
<text transform="rotate( 12.7) translate(0, 35.4)" x="0" y="0.7ex"><tspan>R</tspan></text>
<text transform="rotate( 3.8) translate(0, 35.4)" x="0" y="0.7ex"><tspan>U</tspan></text>
<text transform="rotate(354.8) translate(0, 35.4)" x="0" y="0.7ex"><tspan>N</tspan></text>
<text transform="rotate(343.0) translate(0, 35.4)" x="0" y="0.7ex"><tspan>T</tspan></text>
<text transform="rotate(334.5) translate(0, 35.4)" x="0" y="0.7ex"><tspan>H</tspan></text>
<text transform="rotate(328.5) translate(0, 35.4)" x="0" y="0.7ex"><tspan>I</tspan></text>
<text transform="rotate(322.9) translate(0, 35.4)" x="0" y="0.7ex"><tspan>S</tspan></text>
<text transform="rotate(310.7) translate(0, 35.4)" x="0" y="0.7ex"><tspan>U</tspan></text>
<text transform="rotate(301.9) translate(0, 35.4)" x="0" y="0.7ex"><tspan>N</tspan></text>
<text transform="rotate(295.6) translate(0, 35.4)" x="0" y="0.7ex"><tspan>I</tspan></text>
<text transform="rotate(289.0) translate(0, 35.4)" x="0" y="0.7ex"><tspan>O</tspan></text>
<text transform="rotate(279.8) translate(0, 35.4)" x="0" y="0.7ex"><tspan>N</tspan></text>
</g>
While helping @ Dirac66: with a request, I noted that the thumbnail renderer misses out pixels, the most severe being the minus sign before 1/3 on the fifth row. Some equal signs also appear as minus signs.
It seems most widths are susceptible. This issue is especially bad on mobile phone browsers: 216px works on a PC but not on Android.
I suppose I can repeat every row by thickening the text but it will unnecessarily bold the text.
Does anyone have a good solution?
Thanks,
cmɢʟee⎆
τaʟκ 09:30, 13 April 2021 (UTC)
The first version of the SVG image at right had 35 separately recited path elements for the blue structures (Inkscape version, not very efficient).
For Version 2, I used <defs>
and 35 more efficient <use ...>
instances, but the blue paths do not appear on Wikimedia projects or in the following two SVG testers—even though they appear perfectly fine on Chrome, Firefox and Safari directly!
I just reverted to Version 1, but... what's wrong with Version 2? Thanks in advance for your wisdom. — RCraig09 ( talk) 18:18, 21 April 2021 (UTC)
Would anyone know if CSS 3D transformations, specifically rotateX, are supported by librsvg?
I made this SVG using
style="transform:translate(60px,70px) scale(0.1) perspective(800px) rotateX(45deg);"
It looks fine on Firefox but squashed in Chrome. The transformation is not rendered in Commons thumbnails. The standard way e.g.
transform="rotateX(45deg)"
which I use for affine transforms doesn't work for 3D transforms.
Is there a recommended standard way to do such transformations?
Thanks,
cmɢʟee⎆
τaʟκ 19:35, 20 May 2021 (UTC)
text-transform:
property), so you need to stick to those techniques described
here. --
Redrose64 🌹 (
talk) 14:20, 22 May 2021 (UTC)
The librsvg-developer asked to request for comments what CSS-support Wikimedia needs. Be aware Wikimedia uses librsvg 2.40, and in librsvg 2.50 more than 50% of the librsvg-bugs reported a phab: are resolved upstream, including all reported CSS-bugs, see my comment for details.
@ Cmglee and Glrx: Maybe you want to comment on librsvg#736 RFC: meta-issue for CSS needs for Wikimedia, since you know more about important css-features than me.
— Johannes Kalliauer - contrib. 08:15, 18 May 2021 (UTC)
To me, fixing the existing bugs, especially the nested use bug, is more important.
<!-- Define "button" -->
<g id="button">
<rect ...>
<text ...>$label</text>
</g>
<!-- (Non-functional) buttons can be placed around the page with custom labels -->
<use xlink:href="#button" label="OK" x="0" y="0"/>
<use xlink:href="#button" label="Cancel" x="100" y="0"/>
currentColor
is a feature-request
phab:T106240 that is resolved upstreamxlink:href="
see
File:MediaWiki_SVG_font_list_sans.svg<g transform="translate(...)"><use xlink:href="#common"/><text>LABEL</text></g>
for each instance. What would be great is something like <use xlink:href="#label" text-content="LABEL"/>
and the label
template sets a designated text
tag to the text-content
value.My concern is another renderer will likely have other bugs
text-decoration="overline"
?Hello!
I tried upscaling File:Fluix logo 2014.svg following the guide at User:Ronhjones/SVGreduce.
<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>
<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)
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.
<svg>
tag either or both of (i)
width=
and height=
attributes or (ii) a
viewBox=
attribute. So far as the Wikimedia projects are concerned, the viewBox=
attribute is the most useful, since the only purposes of width=
and height=
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, set height="316" width="316"
as you noted above. However, you should leave viewBox="0 0 64 64"
alone, unless you are willing to go through all of the coordinates in the d=
attributes of the three <path />
tags and adjust those too. --
Redrose64 🌹 (
talk) 14:07, 1 June 2021 (UTC)
<svg ...</svg>
in e.g. <g transform="scale(0.1)">...</g>
(0.1 shrinks everything to 10% of its original size) and update viewBox
accordingly.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)@ 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.
transform="translate(-1e4)" cx="1e4"
should not be used, and in combination with stroke="#f00" stroke-opacity="0"
it seems to break down.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)
Trying to upload a vector on the commons and it keeps showing up as transparent. When I put onto Inkscape and the file preview before uploading, the logo shows. Any reason for this?
Link: c:File:State_farm_arena.svg Troutfarm27 (Talk) 07:09, 16 July 2021 (UTC)
mask="url(#mask-2)"
attributes that occur six times on <path />
tags - I can't find where mask-2
is defined. Have you tried putting the image through
c:COM:Commons SVG Checker? --
Redrose64 🌹 (
talk) 07:58, 16 July 2021 (UTC)
Update: I was able to resolve the issue. I reuploaded the logo at c:File:State_farm_arena_logo.svg. Thank you for pointing that out, Redrose64! Troutfarm27 (Talk) 09:46, 21 July 2021 (UTC)
I'm experiencing the error message "Error: 429, Too Many Requests at Thu, 12 Aug 2021 21:04:17 GMT" again with this SVG. The image on File:fewest_weights_balance_puzzle.svg is fine. Is it due to the SVG filters? Thanks, cmɢʟee⎆ τaʟκ 21:06, 12 August 2021 (UTC)
please create an svg file for it to be uploaded in the article: India–Yugoslavia relations. Utkarsh555 ( talk) 18:53, 8 September 2021 (UTC)
Hi experts,
While making File:Euler_characteristic_hypercube_simplex.svg, I wondered if this was a known bug of Rsvg. It's different from commons:Librsvg_bugs#Marker.
In the test image here, the upper-left dot is missing in the Rsvg rendering but not on Chrome and Firefox. The bottom image has an extra v 0 to work around the issue, but it's clumsy.
Thanks,
cmɢʟee⎆
τaʟκ 10:30, 9 September 2021 (UTC)
“ | ‘marker-mid’ is used to specify the marker that will be drawn at all other vertices (i.e., every vertex except the first and last). | ” |
Hi. See commons:Commons:Graphics village pump#WTF is wrong with File:Selenium logo.svg (just trying to get visibility, as that page is not very active) -- something is totally wrong with the rendering of this SVG and I would like to know if anyone can fix it. DemonDays64 ( talk) 01:10, 27 September 2021 (UTC)
Could someone point me in the right direction? I'd like to create SVGs of symbols on a transparent background, converting the font I have to graphics so they display properly. Thanks. — kwami ( talk) 11:35, 27 September 2021 (UTC)
Hi Rsvg experts,
I used two bow-tie shapes filled with a linear gradient (the second rotated 90 degrees) in a mask to fade out the edges of the right-hand figure. Some pixels are not painted where the shapes meet each other at the diagonals, giving a large faint white "X". It's much less apparent when opening the SVG in a browser. Can this be considered a bug in the thumbnail renderer?
Can someone suggest a workaround to get this fade-out effect, perhaps using SVG filters?
Thanks,
cmɢʟee⎆
τaʟκ 11:48, 29 September 2021 (UTC)
<filter id="filter_fade">
<feMorphology operator="erode" radius="2"/>
<feGaussianBlur stdDeviation="1"/>
<feComposite operator="in" in="SourceGraphic"/>
</filter>
Hello!
Can someone perhaps take a look at de:File:BaumNeu3.svg. I you remove the title tag and replace the first SVG tag with the width, height and viewbox with just <svg> it works for some reason but doesn't display the entire file I think. Jonteemil ( talk) 14:39, 8 October 2021 (UTC)
xmlns="
http://www.w3.org/2000/svg"
was missing —
Johannes
Kalliauer -
contrib. 16:25, 8 October 2021 (UTC)This is an
archive of past discussions for the period February 2020 to the present. Do not edit the contents of this page. If you wish to start a new discussion or revive an old one, please do so on the current talk page. |
Archive 5 | Archive 6 | Archive 7 | Archive 8 | Archive 9 | Archive 10 |
The gradient on File:Amerisleep logo.svg isn't displaying correctly. The source file can be found at https://cdn11.bigcommerce.com/s-36im9ihtig/stencil/ab3a5220-34da-0138-caa0-0242ac11000c/e/90ad9a30-26aa-0138-37b5-0242ac11000d/img/dh-custom/logo.svg. Thank you. Daylen ( talk) 04:42, 19 February 2020 (UTC)
I'm in the home stretch of solving numerous font-related problems, but text still doesn't render consistently, as you can see at right and after clicking. When testing the SVGs:
I saved from Inkscape as "Plain SVG" (not Inkscape SVG).
I still can't see why (for example) the right legends ("0.75" ... "0.00") render further left than they should, and the left side legends (125...0) are shifted up a bit, and the tiny text at bottom renders left of center. Am I missing something basic? Thanks in advance for immediately pointing out my undoubtedly fundamental oversight or misunderstanding! —
RCraig09 (
talk) 05:52, 4 March 2020 (UTC)
<flowRoot>...</flowRoot>
, two <flowRegion>...</flowRegion>
, and two <flowPara />
, none of which are recognised by
librsvg. There are also two <clipPath>...</clipPath>
(those with id="clipPath1022"
and id="clipPath1072"
) which do nothing and may safely be removed. So can all the stuff about cc
, dc
, inkscape
, rdf
and sodipodi
. --
Redrose64 🌹 (
talk) 14:18, 5 March 2020 (UTC)
font-family:'Liberation Sans', sans-serif;-inkscape-font-specification:'Liberation Sans, sans-serif';
. After uploading Version 9, the problem I was worried about—text rendering—hasn't changed. Ideas/explanations, anyone? —
RCraig09 (
talk) 05:04, 6 March 2020 (UTC)
<text>...</text>
and <tspan>...</tspan>
element. Consider just the first such group: <text
id="text422"
y="-136.63911"
x="80.450279"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10.58333302px;line-height:1.25;font-family:'Liberation Sans', sans-serif;-inkscape-font-specification:'Liberation Sans, sans-serif';text-align:center;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
xml:space="preserve"><tspan
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'Liberation Sans', sans-serif;-inkscape-font-specification:'Liberation Sans, sans-serif';stroke-width:0.26458332"
id="tspan420"
y="-136.63911"
x="80.450279"><tspan
id="tspan418"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:25.39999962px;font-family:'Liberation Sans', sans-serif;-inkscape-font-specification:'Liberation Sans, sans-serif';stroke-width:0.26458332"
y="-136.63911"
x="80.450279">125</tspan></tspan></text>
<text
y="-136.63911"
x="80.450279"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:25.39999962px;line-height:1.25;font-family:'Liberation Sans', sans-serif;text-align:center;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
xml:space="preserve">125</text>
<text>...</text>
elements at the same level, so a <g>...</g>
element enclosing most (if not all) the <text>...</text>
elements may be given the styles instead. --
Redrose64 🌹 (
talk) 14:44, 6 March 2020 (UTC)
run scour and convert flowRoot to valid SVG1.1-text
this
removes empty flowRoot and
converts flowRoots to SVG-1.1-valid text. {I just use
scour (also used in
Inkscape, when saving as "Optimized SVG") because my code has limited linebreak-support.}cc
, dc
, rdf
is unproblematic for this file, but generally can be interpreted as copyrightviolation, see
User:Glrx edit in
14:20, 22. Okt. 2017inkscape
, and sodipodi
is unproblematic for this file, but could be important for further editing in inkscape see
c:User:JoKalliauer/Optimization#invalid_elements_that_should_be_kept (e.g.
File:Sodipodi-type="arc".svg)I've been struggling to create svg files that include text and have them look half way decent when rendered as thumbnails on wikipedia (chrome / windows, 1680 x 1050 monitor, for what it's worth). The thumbnail shown on the right is an example- it looks great zoomed in if you click on it, but the text looks like garbage in the thumbnail. The images wikipedia generates look OK to me, and if I take the large version of the image and scale it down it looks good as well, but whatever wikipedia is doing when rendering fonts in thumbnails looks really wrong to me.
If I convert the text in the image to vector images before creating the svg then the file looks good zoomed in, but then localization will be broken and so forth. I figure that's not what we want.
Ideally, the text in the image would closely match the text in wikipedia pages, if not exactly then approximately. Guidance on how to achieve this would be much appreciated. Efbrazil ( talk) 00:23, 25 February 2020 (UTC)
font-family="Arial,Arial_MSFontService,sans-serif"
five times. Of the three font families, the first two are not installed, so it falls back to the third which is a generic sans-serif. I believe that in our case this is
Liberation Sans. If you dislike that font, you should use only
available fonts. Don't convert text to paths, it increases the file size significantly. --
Redrose64 🌹 (
talk) 08:15, 25 February 2020 (UTC)sans-serif
falls back to
DejaVu Sans. So you could use font-family="Liberation Sans,sans-serif"
for an Arial approximation. --
Redrose64 🌹 (
talk) 08:29, 25 February 2020 (UTC)
font-family="Arial,Arial_MSFontService,sans-serif"
and font-family="Liberation Sans,sans-serif"
, should render the same, see also the hints regarding fonts, when checking Arial-SVGs on
Commons SVG Checker. I recommended on
c:Help:SVG#fallback to use font-family="Liberation Sans,Arial,Nimbus Sans L,Helvetica,sans-serif"
, since librsvg only takes first, and on Windows-Computers it should use Arial (if no Liberation Sans) not the default sans-serif. —
Johannes
Kalliauer -
contrib. 19:46, 27 February 2020 (UTC)
I've just discovered (I think) a new application for interactive SVG without JavaScript: a quiz to let students learn the locations of geographic features, components of a system etc (basically any 1-to-1 mapping). My first example concerns the states of the USA.
I wonder if anyone here knows of an elegant way to implement counters without JavaScript. In my example, a student could start with, say, three lives. Every wrong answer (triggered by the "reset" element) deducts one life. When all lives are lost, the game is over. A workaround is to have as many reset elements as lives and delete the elements as lives are used up. That would however lead to much redundant code :-(
A less strict version just counts the number of wrong answers and shows it at the end when all states have been identified.
Alternatively, I could implement a timer that counts the number of seconds (as in
my morphing demo) but pause it when all states have been identified, to show how long the student took. A workaround is to add
onmousemove="document.getElementsByTagName('svg')[0].pauseAnimations();"
on the win screen, but:
on*
attributes(I can make a version where a timer counts down to zero, the game ending if the student fails to identify all states in time, as in my missile game, though a time limit may frustrate students.)
Would anyone be able to help? Thanks, cmɢʟee⎆ τaʟκ 00:07, 10 February 2020 (UTC)
Hi SVG experts! I made File:Ancient_seven_wonders_timeline.svg into a multilingual SVG. However, as the Russian text is longer than the default English text, as on the right, I had to reduce the font size.
I tried adding an extra style sheet in a switch tag:
<switch>
<style type="text/css" systemLanguage="ru">
text { font-size:80px; }
</style>
</switch>
<style type="text/css">
#main { font-family:Helvetica,Arial,sans-serif; font-size:100px; ... }
...
</style>
but that didn't work. Neither did
<switch>
<style type="text/css" systemLanguage="ru">
#main { font-family:Helvetica,Arial,sans-serif; font-size:80px; ... }
...
</style>
<style type="text/css">
#main { font-family:Helvetica,Arial,sans-serif; font-size:100px; ... }
...
</style>
</switch>
I eventually had to add a ru class and specify it in each switched text tag e.g.
<style type="text/css">
#main { font-family:Helvetica,Arial,sans-serif; font-size:100px; ... }
...
.ru { font-size:80px; }
</style>
...
<switch>
<g systemLanguage="ru">
<text class="ru label_name" x="-20" y="-915"><tspan>Колосс</tspan><tspan x="-20" dy="100">Родосский</tspan></text>
<text class="ru label_start" x="0" y="-310">292 до н.э.</text>
<text class="ru label_end" x="0" y="-130">226 до н.э.</text>
<text class="ru label_end" x="0" y="750">654 н.э.</text>
</g>
<g>
<text class="label_name" x="10" y="-915"><tspan>Colossus</tspan><tspan x="20" dy="100">of</tspan><tspan x="20" dy="100">Rhodes</tspan></text>
<text class="label_start" x="0" y="-310">292 BC</text>
<text class="label_end" x="0" y="-130">226 BC</text>
<text class="label_end" x="0" y="750">654 AD</text>
</g>
</switch>
Is there a better (more elegant) way of setting a language-specific global font size?
Thanks,
cmɢʟee⎆
τaʟκ 23:38, 9 March 2020 (UTC)
So I think I understand the root of svg font evil on wikipedia. The problem is that wikimedia renders 270 width thumbnails natively from SVG, instead of just scaling down a higher resolution version of the image. When wikimedia renders svg files at that resolution it uses the itty-bitty font settings, which are garbage.
The "bad letter-alignment on small font-size" in the help text at the top of this page is misleading I think, because it implies you can fix the issue as the svg creator. The problem has nothing to do with the declared font size in the svg file, rather it's the font size wikimedia uses when rendering to a low resolution.
The two images on the right illustrate the problem. The first is just normal png and always looks good. The second has embedded text, and it only looks good if I view it on a high resolution smartphone or zoom my browser and then load the page fresh. If I view the second image on a standard desktop resolution of something like 1680 by 1050, the thumbnail looks like pixelated garbage. As a side note, the image also looks good if use an svg where I've converted the fonts to vectors before uploading.
I'm happy with a work around, like maybe a way to force wikipedia to use the larger version of an image for thumbnails.
Suggestions? This issue is really killing our ability to use native text in svg files on wikipedia. If it can't be fixed, the other editors want me to switch all of our svg files over to use vectors for fonts, instead of native text, even though it will crush things like localization. Efbrazil ( talk) 20:14, 11 March 2020 (UTC)
<filter id="filter_blur"><feGaussianBlur stdDeviation="1"/></filter>
<text ... filter="url(#filter_blur)">...</text>
stroke-width=
attribute won't do much (if anything), because text typically isn't stroked - it's filled. Consider the letter O placed in a SVG file as <text>O</text>
- when this is rendered, you think that you're seeing a black outline with a white centre; but in fact, it's drawn as two rings, with their outlines not stroked but the space between filled, something like stroke="none" fill="black"
. Consider
this SVG example (from
SVG 1.1 (Second Edition) – 16 August 2011), the fourth row of text shows what happens when you apply different stroke colours but a consistent fill="yellow"
. --
Redrose64 🌹 (
talk) 21:05, 12 March 2020 (UTC)
For some reason when you click on this logo (i.e. visit https://upload.wikimedia.org/wikipedia/en/4/40/Syrianska.svg), the red background turns white. Can someone please fix it? Jonteemil ( talk) 15:23, 25 March 2020 (UTC)
<g>...</g>
element that has the clip-path="url(#clipPath4014-6)"
attribute, or the <clipPath>...</clipPath>
element itself. Make sure that you stick to the SVG 1.1 spec. --
Redrose64 🌹 (
talk) 23:39, 25 March 2020 (UTC)
This page is now so long that it takes ages to scroll on a mobile. Would anyone mind my archiving posts begun before 2020 (i.e. before W3C invalid inquiry and layers)? cmɢʟee⎆ τaʟκ 18:17, 12 March 2020 (UTC)
File:Prime Minister text and logo.png should be moved to an SVG. TrailBlzr ( talk) 20:56, 15 March 2020 (UTC)
You are invited to join the discussion at Talk:2019–20_coronavirus_pandemic/Archive_24#Developing_an_SVG_version. Sdkb ( talk) 03:44, 17 March 2020 (UTC)
Why won't File:COVID-19 outbreak France per capita cases map.svg render properly? Ythlev ( talk) 16:21, 20 March 2020 (UTC)
d=
attributes of the <path />
elements seem to have had most of the spaces and some of the zeroes stripped out, causing the same ambiguity problem as at
#File:Alternattiva Demokratika.svg above. --
Redrose64 🌹 (
talk) 08:40, 21 March 2020 (UTC)
Hi! Could someone explain for me what the technical advantage with fixed W and H in SVG are. I'm discussing it here. – GeMet [ gemet| ʇǝɯǝƃ] 00:44, 6 April 2020 (UTC)
Hi all,
I've attempted to update the Doomsday Clock graph to reflect the 2020 time change, but the background is black instead of white/gradient.
Ironically I was the last person to update the graph, and I managed to fix this issue the last time. I have obviously forgotten what I did to resolve the problem, but it looks like the code formatting is quite different; I feel like I updated it using Illustrator and changed something using Inkspace.
Thanks for any help! — Preceding unsigned comment added by Ryanicus Girraficus ( talk • contribs) 20:57, 23 January 2020 (UTC)
Hi experts,
My file:Covariance_trends.svg renders correctly on File:Covariance_trends.svg but not on the article and Wikipedia's file page.
Any ideas why?
Thanks,
cmɢʟee⎆
τaʟκ 15:12, 20 May 2020 (UTC)
I have been adding chemistry diagrams, for example
I know that it would be better to use such diagrams in .svg format and I've worked out how to create them with software I have access to. I converted this one today and uploaded it on Commons as "Protoporphyrin_magnesium_insertion.svg". This looks fine when viewed natively but when inserted into a page the bottom part gets truncated, as here on the right.
Can you advise how to fix this? Thanks. Michael D. Turnbull ( talk) 14:17, 9 June 2020 (UTC)
<svg>
tag has the attributes height="105.03958mm" width="247.38542mm"
but it has no
viewBox=
attribute which would specify exactly how many pixels should stretch across 247.38542mm (or along 105.03958mm). You either need to alter all of the coordinates to use millimetre dimensions, or add a viewBox=
attribute. --
Redrose64 🌹 (
talk) 15:01, 9 June 2020 (UTC)OK. I think I understand that. I used a text editor to add the attribute viewBox="0 0 2470 1050" preserveAspectRatio="none" which I assumed would give me the ~247 by 105mm translated into something useful. After uploading this as a new version of the file, I can see that the image rendered here to the right is no longer truncated BUT it seems very small, as it's squeezed into the top left of the viewing box. Is there a value for the viewBox attribute that would work well in general on Wikipedia? Note that I'm clueless about the detials of .svg files: I converted a .wmf file that my chemical drawing software can produce into the .svg one by using a free utility at convertio.co. Michael D. Turnbull ( talk) 15:41, 9 June 2020 (UTC)
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns:dc=" http://purl.org/dc/elements/1.1/" xmlns:cc=" http://creativecommons.org/ns#" xmlns:rdf=" http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg=" http://www.w3.org/2000/svg" xmlns=" http://www.w3.org/2000/svg" id="svg411" height="1050px" width="2470px" viewBox="0 0 2470 1050" preserveAspectRatio="xMaxYMax meet" version="1.0"> <metadata id="metadata415">
I created an .svg file to ACS standards (including atom colouring) for azoxystrobin and loaded it in Commons as a new version of the existing (first and only) one. As expected, my new version now replaces the old one on most Wikis where it is used (for example "French wikipedia".). However, it doesn't replace the diagram in the chembox at azoxystrobin, nor does it appear correctly in the file history section of "Commons for this file"., although it DOES look correct in the PNG preview on Commons. Similarly, the image included on the right here is still the old one! What is going wrong? I've replaced other image files on Commons without any such issues.
Incidentally, I note with this file and many other svgs in Commons that clicking on the PNG preview gives a poor image at full scale with a black background obscuring the picture. Is there a way to upload .svg to avoid this or is it a "feature" of the system? Michael D. Turnbull ( talk) 14:19, 13 June 2020 (UTC)
Okay, I am trying to develop an SVG file template for creating images of tartan patterns. I figured out that I can use a <pattern> element for the tartan weave - I use a stroke-dasharray="2 2" to run the threads for either warp or weft. And then I want to use that pattern on a line with width=page size across the image, and its own stroke-dasharray with the tartan pattern for that color. The problem I am running into is that the <line> element requires the stroke property to specify the color of the line, but I also need to specify <line stroke="url(#pattern)"/> to apply the weave pattern onto the tartan color pattern. Is there a trick for specifying two parameters for the stroke property? I tried using a semicolon because my reference suggested it has some relation to CSS properties, but it didn't work. Van Isaac WS cont 02:51, 22 June 2020 (UTC)
<svg ... viewBox="0 0 512 512" ...>
<defs>
<pattern id="warp_red" patternUnits="userSpaceOnUse" width="8" height="8" patternTransform="rotate(-45)">
<rect x="0" y="0" width="8" height="4" fill="red" stroke="none" />
</pattern>
<pattern id="warp_green" patternUnits="userSpaceOnUse" width="8" height="8" patternTransform="rotate(-45)">
<rect x="0" y="0" width="8" height="4" fill="green" stroke="none" />
</pattern>
<pattern id="warp_blue" patternUnits="userSpaceOnUse" width="8" height="8" patternTransform="rotate(-45)">
<rect x="0" y="0" width="8" height="4" fill="blue" stroke="none" />
</pattern>
<pattern id="warp_yellow" patternUnits="userSpaceOnUse" width="8" height="8" patternTransform="rotate(-45)">
<rect x="0" y="0" width="8" height="4" fill="yellow" stroke="none" />
</pattern>
<pattern id="weft_red" patternUnits="userSpaceOnUse" width="8" height="8" patternTransform="rotate(-45)">
<rect x="0" y="4" width="8" height="4" fill="red" stroke="none" />
</pattern>
<pattern id="weft_green" patternUnits="userSpaceOnUse" width="8" height="8" patternTransform="rotate(-45)">
<rect x="0" y="4" width="8" height="4" fill="green" stroke="none" />
</pattern>
<pattern id="weft_blue" patternUnits="userSpaceOnUse" width="8" height="8" patternTransform="rotate(-45)">
<rect x="0" y="4" width="8" height="4" fill="blue" stroke="none" />
</pattern>
<pattern id="weft_yellow" patternUnits="userSpaceOnUse" width="8" height="8" patternTransform="rotate(-45)">
<rect x="0" y="4" width="8" height="4" fill="yellow" stroke="none" />
</pattern>
</defs>
<g stroke="none">
<rect x="0" y="0" width="512" height="256" fill="url(#weft_red)" />
<rect x="0" y="0" width="256" height="512" fill="url(#warp_red)" />
<rect x="0" y="112" width="512" height="32" fill="url(#weft_green)" />
<rect x="112" y="0" width="32" height="512" fill="url(#warp_green)" />
<rect x="0" y="256" width="512" height="256" fill="url(#weft_blue)" />
<rect x="256" y="0" width="256" height="512" fill="url(#warp_blue)" />
<rect x="0" y="368" width="512" height="32" fill="url(#weft_yellow)" />
<rect x="368" y="0" width="32" height="512" fill="url(#warp_yellow)" />
</g>
</svg>
stroke="none"
throughout - all the colouring is via fill=
. --
Redrose64 🌹 (
talk) 09:48, 22 June 2020 (UTC)
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<pattern id="HR" viewBox="0 0 4 4" height="4" width="4">
<rect x="0" y="0" width="1" height="2" fill="#000" stroke="none"/>
<rect x="1" y="1" width="1" height="2" fill="#000" stroke="none"/>
<rect x="2" y="2" width="1" height="2" fill="#000" stroke="none"/>
<rect x="3" y="0" width="1" height="1" fill="#000" stroke="none"/>
<rect x="3" y="3" width="1" height="1" fill="#000" stroke="none"/>
</pattern>
<rect x="0" y="0" width="100" height="100" fill="url(#HR)" stroke="none"/>
</svg>
<path d="M 0,0 v4 h1 v-4 h1 v4 h1 v-4" fill-opacity="0" stroke="#000" stroke-dasharray="2 2"/>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<pattern id="HR" viewBox="0 0 4 4" height="4" width="4" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="1" height="2" fill="#FFF" stroke="none"/>
<rect x="1" y="1" width="1" height="2" fill="#FFF" stroke="none"/>
<rect x="2" y="2" width="1" height="2" fill="#FFF" stroke="none"/>
<rect x="3" y="0" width="1" height="1" fill="#FFF" stroke="none"/>
<rect x="3" y="3" width="1" height="1" fill="#FFF" stroke="none"/>
</pattern>
<mask id="weft" maskUnits="userSpaceOnUse">
<rect x="0" y="0" width="100%" height="100%" fill="url(#HR)" stroke="none"/>
</mask>
<g> Tartan pattern: K10 G5 R10 K4 R4 Y1
<line stroke="#000" stroke-dasharray="10 15 4 9 4 15" x1="50" y1="0" x2="50" y2="100" stroke-width="100"/>
<line stroke="#080" stroke-dasharray="0 10 5 37 5 0" x1="50" y1="0" x2="50" y2="100" stroke-width="100"/>
<line stroke="#F00" stroke-dasharray="0 15 10 4 4 1 4 4 10 5" x1="50" y1="0" x2="50" y2="100" stroke-width="100"/>
<line stroke="#FF0" stroke-dasharray="0 33 1 23" x1="50" y1="0" x2="50" y2="100" stroke-width="100"/>
</g>
<g mask="url(#weft)">
<line stroke="#000" stroke-dasharray="10 15 4 9 4 15" x1="0" y1="50" x2="100" y2="50" stroke-width="100"/>
<line stroke="#080" stroke-dasharray="0 10 5 37 5 0" x1="0" y1="50" x2="100" y2="50" stroke-width="100"/>
<line stroke="#F00" stroke-dasharray="0 15 10 4 4 1 4 4 10 5" x1="0" y1="50" x2="100" y2="50" stroke-width="100"/>
<line stroke="#FF0" stroke-dasharray="0 33 1 23" x1="0" y1="50" x2="100" y2="50" stroke-width="100"/>
</g>
</svg>
Hello. I've tried to upload this file to Wikimedia Commons. But it says Found unsafe CSS in the style element of uploaded SVG file. Also the SVG checker says the font is unsupported, but it's listed here. What should I do? Mike like0708 ( talk) 17:19, 13 July 2020 (UTC)
<style id="droidsans700normal">
@font-face {
font-family: "Droid Sans";
font-weight: 700;
src: url("data:font/ttf;base64,");
}
</style>
base64,
and the next quote there is 56,640 bytes of binary data.@font-face { ... }
at-rule, which was introduced in CSS Fonts Module Level 3 (proposed 2013, not formalised until September 2018), but
librsvg can't handle anything that doesn't conform to
CSS level 1 (with the exception of certain
CSS level 2 features). The src:
property here seems to be describing the Droid Sans font, but you shouldn't need to do that - the two <text>...</text>
elements both have the font-family="Droid Sans"
attribute, which should be quite sufficient. I suggest that you remove everything between <style>...</style>
inclusive of those tags. --
Redrose64 🌹 (
talk) 20:57, 13 July 2020 (UTC)
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
style="..."
attributes, which are CSS. I won't comment on every element. The two <text>...</text>
elements both have the attribute font-family="DejaVu Sans"
- try altering that to font-family="'DejaVu Sans',sans-serif"
- note the nested quotes of differing types. These elements also have the attribute style="line-height:100%"
which contain the only CSS in the file, and it's valid CSS 1 so no problem there. The two <tspan>...</tspan>
elements both have the attribute dy="0em"
but the em
unit isn't used elsewhere, so alter those to dy="0"
. The tspan also enclose literal text - the Greek letters Γ and Μ, it's possible that these are being misinterpreted, so alter them to numeric character references Γ
and Μ
respectively. There are eight <g>
tags with no attributes, those may safely be removed together with with their balancing </g>
tags. --
Redrose64 🌹 (
talk) 08:57, 31 July 2020 (UTC)Could an SVG/librsvg expert confirm whether rsvg supports feConvolveMatrix, please? I noted on commons:Librsvg_bugs#Filters
before realising that I should get a second opinion. Thanks, cmɢʟee⎆ τaʟκ 06:26, 30 August 2020 (UTC)
I've created several maps that share the similar features, all of their thumbnails have poorly rendered parts of image and I wondering how to deal with this issue.
Files: Map of the London Assembly election
2016,
2012,
2008,
2004 and
2000
specifically, the images see a blurred image for the map of London within the at-large seat area and the rectangles with the graph for seats.
JDuggan101
talk. |
Cont. 12:48, 2 August 2020 (UTC)
I uploaded this file to Commons earlier this year. It was obtained from a US government website and is tagged as {{
PD-USGov-USGS}}
.
I note that there is now a "|other versions={{
Convert to SVG|biogeographical map}}
" tag on the file. I'd love to convert it to .svg but have no idea of how to do so easily, and doubt I can obtain such a format from the
"US govt website".. Any ideas, please?
Michael D. Turnbull (
talk) 16:39, 1 September 2020 (UTC)
{{
Convert to SVG|biogeographical map}}
tag as the map has very fine-grained data that would be lost on conversion to SVG, unless a bitmap of it is embedded in the SVG. A better solution is to redraw it as two separate images: the map and the graph. I'd leave it for now, until there's greater demand for the image (it's used only on
2,4-Dichlorophenoxyacetic acid). Cheers,
cmɢʟee⎆
τaʟκ 21:04, 4 September 2020 (UTC)
Could somebody explain to me, why the blue dots in this file do not show up after uploading on Commons? (while in this they do). Thanks! TheGlobetrotter ( talk) 12:58, 7 September 2020 (UTC)
<animate>...</animate>
element, and animation is not possible for SVG images on Wikipedia - only the initial state is shown. --
Redrose64 🌹 (
talk) 15:43, 7 September 2020 (UTC)The thumbnail of File:Cambridge_Kings_Ditch_map.svg is completely blank. The only issue flagged by the Commons SVG checker is missing fonts, which I've encountered before but isn't normally a problem. I think the image-embedding syntax is correct. The SVG renders fine on Firefox and Chrome. Can someone please check why doesn't render at all? Thanks, cmɢʟee⎆ τaʟκ 01:37, 14 September 2020 (UTC)
Text is rendering very badly -- even after I installing and choosing 'FreeSans', it isn't being used in the PNG previews. Not sure if this needs to be fixed, but I wasn't able to fix this.
Hi, hope this is the right place to ask. If this isn't, feel free to move my question. I am trying to translate the following illustration to Hebrew but the file seems to be wrong. I have manually pasted the corresponding translate into the textbox but it doesn`t work. Could someone help me fixing the file? רונאלדיניו המלך ( talk) 21:53, 8 October 2020 (UTC)
Just uploaded an SVG of the Biden-Harris Transition logo (PNG is currently used for wiki pages). SVG was downloaded directly from the transition site (www.buildbackbetter.com) and renders properly when viewed on computer, but does not on the file page. Have looked at the SVG help page but not seeing anything which seems relevant.
-- Crgmu ( talk) 18:33, 8 November 2020 (UTC)
hello! i would consider myself quite familiar with svg, and i've fixed quite a few rendering bugs with my own uploads, but this time i'm stuck. it's supposed to render like in fig. 1,
and it does so in my browser, but in librsvg it renders like in fig. 2,
which is completely unacceptable. Any help is appreciated! here is the code:
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 2964 2106">
<title>Flag of Trondheim</title>
<rect width="2964" height="2106" fill="#e63d34"/>
<path fill="#fc0" d="M2070 1085a224 224 0 00-90-17h-261a15 15 0 010-30h261a225 225 0 10-158-382l-185 185a15 15 0 01-21-21l185-185a225 225 0 10-382-158v261a15 15 0 01-30 0V477a225 225 0 10-382 158l185 185a15 15 0 01-21 21L986 656a225 225 0 10-158 382h261a15 15 0 010 30H828a225 225 0 10158 381l185-184a15 15 0 0121 21l-184 185a225 225 0 10381 158v-261a15 15 0 0130 0v261a225 225 0 10382-158l-185-185a15 15 0 0121-21l185 184a225 225 0 10248-364zm-666 248a280 280 0 11280-280 280 280 0 01-280 280zm260-280a260 260 0 11-260-260 260 260 0 01260 260zm-195-755l-50 50-15-80-15 80-50-50 65-180zM916 473v71l-67-46 46 67h-71l-81-173zM649 988l50 50-80 15 80 15-50 50-180-65zm175 553h71l-46 67 67-46v71l-173 81zm515 267l50-50 15 80 15-80 50 50-65 180zm553-175v-71l67 46-46-67h71l81 173zm267-515l-50-50 80-15-80-15 50-50 180 65zm-175-553h-71l46-67-67 46v-71l173-81z"/>
</svg>
Gutten på Hemsen ( talk) 22:19, 1 November 2020 (UTC)
d=
attribute of the <path />
element you have a number of relative movements which don't seem to be recognised as such, and I think that it's because values have been crushed together creating an ambiguity. For instance, the second command is a224 224 0 00-90-17
which is a relative arcto, and there should be seven values after the a
but the last four have all been run together. Try spacing them out, and if that doesn't work, use commas between each pair of x/y values as shown in the examples
here. --
Redrose64 🌹 (
talk) 23:54, 3 November 2020 (UTC)I created this CSS3 animation to show the rotation speeds and axial tilts of the planets and moon. It runs fine on Firefox and Chrome but the thumbnail is completely black.
The previous version at least showed the text. I understand that filters are not fully supported, so added a masked texture to show poor man's versions of the spherised textures but that totally broke the thumbnail.
Any idea what went wrong?
Thanks,
cmɢʟee⎆
τaʟκ 08:27, 27 November 2020 (UTC)
<image
, the SVGs renders correctlywidth="400" height="480" viewBox="-710 -2700 4000 4800"
for Commons SVG Checker (I did not try) width="100%" height="100%"
, it is uncommon and there is imho no change.File File:Infinite Discs logo BW.svg looks fine in the browser, but it always renders as a transparent rectangle on Mediawiki. What am I missing? - Iketsi ( talk) 19:54, 6 January 2021 (UTC)
Hi. Does anyone know why librsvg is cutting off the very bottom of Wikipedia's PNG version of File:CCEA (Council for the Curriculum, Examinations & Assessment) logo.svg (as seen in the infobox of the Council for the Curriculum, Examinations & Assessment page)? The PNGs at other sizes do not have the problem. Is there a workaround for this? – Green Tentacle ( talk) 20:14, 9 January 2021 (UTC)
<path />
elements, where the d=
attributes specify the centre-line for the component lines and arcs that make up each letter. These centre-lines are then stroked (thickened up) to become visible. Part of the problem is that the thickness of the lines is unspecified - that is, there are no explicit stroke-width=
attributes, so a default value is used.<path />
elements - that is, the ones where the d=
attribute begins with the commands M171.35,91.61
and M93.29,91.61
. A little after half-way through each d=
attribute are the commands a5.08,5.08,0,0,1-1.72,3,5,5,0,0,1-3.24,1,7.43,7.43,0,0,1-1.51-.17,4.75,4.75,0,0,1-1.34-.49
and a5.08,5.08,0,0,1-1.72,3,5,5,0,0,1-3.24,1,7.51,7.51,0,0,1-1.51-.17,4.87,4.87,0,0,1-1.34-.49
- these specify the descenders using four elliptical arcs each. The second and third arc in each one dip right down almost to the bottom edge of the viewport, so that when the line is stroked part of the line's thickness may be outside the viewport. You either need to extend the viewport downwards, or redraw the descenders. --
Redrose64 🌹 (
talk) 00:36, 10 January 2021 (UTC)
Hi experts!
I wonder if anyone here knows why the labels in the bottom figure are misaligned. The font size is a reasonable 28px and it inherits text-anchor:end from the main class. It is because the transform="... scale(20)" is too large a scale?
Thanks,
cmɢʟee⎆
τaʟκ 14:44, 24 January 2021 (UTC)
width="100%" height="100%"
to width="1065.6" height="1894.4"
seems to help. I think it is related to
phab:T35245 —
Johannes
Kalliauer -
contrib. 15:53, 24 January 2021 (UTC)Hi experts,
Before I file this as a bug on commons:Librsvg_bugs#Marker, I'd like to check if anyone is aware of Librsvg not recognising the attribute orient set to auto-start-reverse for the marker tag, or did I just make a careless mistake? The arrowheads for the dimensions and axes all point to the right, instead of in the direction of the line ending. They work fine on Firefox and Chrome. It's my first time using auto-start-reverse but I've used auto before and they work.
Thanks,
cmɢʟee⎆
τaʟκ 02:10, 8 February 2021 (UTC)
auto
or an angle for
the orient
attribute. The value auto-start-reverse
is
defined in SVG 2, which is still at the candidate recommendation stage, so not yet a formal W3C Recommendation. --
Redrose64 🌹 (
talk) 17:56, 8 February 2021 (UTC)
Hi experts, I uploaded the file Super Bowl XLV Logo.svg to Wikipedia, but the logo seems to be misplaced and very small, and the rendering is incorrect, as I extracted it from a PDF file. Is it possible for someone to move to logo where it should be, in the upper left hand corner, similarly to File:Super Bowl XLVI Logo.svg, so that it will render correctly? -- Politicsfan4 ( talk) 21:19, 14 February 2021 (UTC)
I uploaded File:Tim Mahoney Signature.svg to Wikipedia, but there seems to be some sort of transparent border on its right side, and it therefore renders very small. Since I want to use this in the article Tim Mahoney, could someone possibly crop this "border"? Thanks. -- Politicsfan4 ( talk) 17:51, 24 February 2021 (UTC)
The file File:Mitosis Stages.svg has a typo in its second image - it should be "mitotic" rather than "miotic", as en:File talk:Mitosis Stages.svg noted. Jo-Jo Eumerus ( talk) 14:03, 28 February 2021 (UTC)
Hi again,
Dots appear in the spots in the figure, presumably because I tried to apply a stroke-width of 3, greater than the circle's radius r of 1:
<circle id="spot" cx="0" cy="0" r="1" stroke-width="3"/>
As this behaviour isn't listed on commons:librsvg_bugs, but Firefox, Chrome and Edge all fully fill the circle, I don't know if this can be considered a librsvg bug.
Cheers,
cmɢʟee⎆
τaʟκ 01:00, 12 March 2021 (UTC)
I recently uploaded a file with a messed-up gradient. When you see it, it looks dark when it is not supposed to be. IF you open the origin file, you can see how I intended it to look.
I noticed that this was placed in the Commons category Category:Maint:Attr-user not existing. I assume this is the problem, but I have no idea what it means. W3C validator says this image is valid. This is really confusing.
Can anyone here help? -- Diriector_Doc├─────┤ Talk Contribs 19:36, 2 April 2021 (UTC)
{{
Attrib|Wikipedia-logo-v2-wordmark.svg|Wikimedia Foundation}}
- but
Wikimedia Foundation (
talk ·
contribs) is not a registered user. --
Redrose64 🌹 (
talk) 13:04, 4 April 2021 (UTC)stop-opacity="<opacity-value>"
or style="stop-opacity:<opacity-value>;"
, they are interchangeable. But as you noticed, if you have both forms in the same element and they have different values, as here: <stop
style="stop-color:#fee476;stop-opacity:1"
id="stop3858"
stop-opacity="0"
offset="0" />
I uploaded File:UE_logo.svg after extracting it from this PDF with Inkscape, however the images rendered by librsvg (such as in the revision thumbnails and the article page) have letter misalignment.
I'm sure this is
bad letter-alignment on small font-size, but is there an easy way to fix the font size for each of these text elements with (or without) Inkscape? I have tried editing the SVG text using simple find and replace, but I run into problems adding scale(0.1)
where there are already rotation transforms, and assume I can't increase the viewbox size for a non-free image.
Soapwort (
talk) 05:33, 31 March 2021 (UTC)
<g font-family="Arial" font-weight="bold" font-size="7.6394px" text-anchor="middle" fill="#dc2225" transform="translate(-140.3,-528.1)">
<text transform="rotate(269.7) translate(0,-35.4)" x="0" y="0.7ex"><tspan>•</tspan></text>
<text transform="rotate(278.5) translate(0,-35.4)" x="0" y="0.7ex"><tspan>T</tspan></text>
<text transform="rotate(286.5) translate(0,-35.4)" x="0" y="0.7ex"><tspan>H</tspan></text>
<text transform="rotate(295.3) translate(0,-35.4)" x="0" y="0.7ex"><tspan>E</tspan></text>
<text transform="rotate(307.5) translate(0,-35.4)" x="0" y="0.7ex"><tspan>U</tspan></text>
<text transform="rotate(316.3) translate(0,-35.4)" x="0" y="0.7ex"><tspan>N</tspan></text>
<text transform="rotate(322.6) translate(0,-35.4)" x="0" y="0.7ex"><tspan>I</tspan></text>
<text transform="rotate(329.1) translate(0,-35.4)" x="0" y="0.7ex"><tspan>O</tspan></text>
<text transform="rotate(338.4) translate(0,-35.4)" x="0" y="0.7ex"><tspan>N</tspan></text>
<text transform="rotate(350.2) translate(0,-35.4)" x="0" y="0.7ex"><tspan>F</tspan></text>
<text transform="rotate(358.4) translate(0,-35.4)" x="0" y="0.7ex"><tspan>O</tspan></text>
<text transform="rotate( 7.7) translate(0,-35.4)" x="0" y="0.7ex"><tspan>R</tspan></text>
<text transform="rotate( 20.1) translate(0,-35.4)" x="0" y="0.7ex"><tspan>E</tspan></text>
<text transform="rotate( 28.1) translate(0,-35.4)" x="0" y="0.7ex"><tspan>V</tspan></text>
<text transform="rotate( 36.2) translate(0,-35.4)" x="0" y="0.7ex"><tspan>E</tspan></text>
<text transform="rotate( 45.2) translate(0,-35.4)" x="0" y="0.7ex"><tspan>R</tspan></text>
<text transform="rotate( 53.4) translate(0,-35.4)" x="0" y="0.7ex"><tspan>Y</tspan></text>
<text transform="rotate( 61.6) translate(0,-35.4)" x="0" y="0.7ex"><tspan>O</tspan></text>
<text transform="rotate( 71.1) translate(0,-35.4)" x="0" y="0.7ex"><tspan>N</tspan></text>
<text transform="rotate( 80.0) translate(0,-35.4)" x="0" y="0.7ex"><tspan>E</tspan></text>
<text transform="rotate( 89.9) translate(0,-35.4)" x="0" y="0.7ex"><tspan>•</tspan></text>
<text transform="rotate( 78.7) translate(0, 35.4)" x="0" y="0.7ex"><tspan>M</tspan></text>
<text transform="rotate( 69.3) translate(0, 35.4)" x="0" y="0.7ex"><tspan>E</tspan></text>
<text transform="rotate( 60.0) translate(0, 35.4)" x="0" y="0.7ex"><tspan>M</tspan></text>
<text transform="rotate( 50.3) translate(0, 35.4)" x="0" y="0.7ex"><tspan>B</tspan></text>
<text transform="rotate( 42.0) translate(0, 35.4)" x="0" y="0.7ex"><tspan>E</tspan></text>
<text transform="rotate( 33.3) translate(0, 35.4)" x="0" y="0.7ex"><tspan>R</tspan></text>
<text transform="rotate( 24.7) translate(0, 35.4)" x="0" y="0.7ex"><tspan>S</tspan></text>
<text transform="rotate( 12.7) translate(0, 35.4)" x="0" y="0.7ex"><tspan>R</tspan></text>
<text transform="rotate( 3.8) translate(0, 35.4)" x="0" y="0.7ex"><tspan>U</tspan></text>
<text transform="rotate(354.8) translate(0, 35.4)" x="0" y="0.7ex"><tspan>N</tspan></text>
<text transform="rotate(343.0) translate(0, 35.4)" x="0" y="0.7ex"><tspan>T</tspan></text>
<text transform="rotate(334.5) translate(0, 35.4)" x="0" y="0.7ex"><tspan>H</tspan></text>
<text transform="rotate(328.5) translate(0, 35.4)" x="0" y="0.7ex"><tspan>I</tspan></text>
<text transform="rotate(322.9) translate(0, 35.4)" x="0" y="0.7ex"><tspan>S</tspan></text>
<text transform="rotate(310.7) translate(0, 35.4)" x="0" y="0.7ex"><tspan>U</tspan></text>
<text transform="rotate(301.9) translate(0, 35.4)" x="0" y="0.7ex"><tspan>N</tspan></text>
<text transform="rotate(295.6) translate(0, 35.4)" x="0" y="0.7ex"><tspan>I</tspan></text>
<text transform="rotate(289.0) translate(0, 35.4)" x="0" y="0.7ex"><tspan>O</tspan></text>
<text transform="rotate(279.8) translate(0, 35.4)" x="0" y="0.7ex"><tspan>N</tspan></text>
</g>
While helping @ Dirac66: with a request, I noted that the thumbnail renderer misses out pixels, the most severe being the minus sign before 1/3 on the fifth row. Some equal signs also appear as minus signs.
It seems most widths are susceptible. This issue is especially bad on mobile phone browsers: 216px works on a PC but not on Android.
I suppose I can repeat every row by thickening the text but it will unnecessarily bold the text.
Does anyone have a good solution?
Thanks,
cmɢʟee⎆
τaʟκ 09:30, 13 April 2021 (UTC)
The first version of the SVG image at right had 35 separately recited path elements for the blue structures (Inkscape version, not very efficient).
For Version 2, I used <defs>
and 35 more efficient <use ...>
instances, but the blue paths do not appear on Wikimedia projects or in the following two SVG testers—even though they appear perfectly fine on Chrome, Firefox and Safari directly!
I just reverted to Version 1, but... what's wrong with Version 2? Thanks in advance for your wisdom. — RCraig09 ( talk) 18:18, 21 April 2021 (UTC)
Would anyone know if CSS 3D transformations, specifically rotateX, are supported by librsvg?
I made this SVG using
style="transform:translate(60px,70px) scale(0.1) perspective(800px) rotateX(45deg);"
It looks fine on Firefox but squashed in Chrome. The transformation is not rendered in Commons thumbnails. The standard way e.g.
transform="rotateX(45deg)"
which I use for affine transforms doesn't work for 3D transforms.
Is there a recommended standard way to do such transformations?
Thanks,
cmɢʟee⎆
τaʟκ 19:35, 20 May 2021 (UTC)
text-transform:
property), so you need to stick to those techniques described
here. --
Redrose64 🌹 (
talk) 14:20, 22 May 2021 (UTC)
The librsvg-developer asked to request for comments what CSS-support Wikimedia needs. Be aware Wikimedia uses librsvg 2.40, and in librsvg 2.50 more than 50% of the librsvg-bugs reported a phab: are resolved upstream, including all reported CSS-bugs, see my comment for details.
@ Cmglee and Glrx: Maybe you want to comment on librsvg#736 RFC: meta-issue for CSS needs for Wikimedia, since you know more about important css-features than me.
— Johannes Kalliauer - contrib. 08:15, 18 May 2021 (UTC)
To me, fixing the existing bugs, especially the nested use bug, is more important.
<!-- Define "button" -->
<g id="button">
<rect ...>
<text ...>$label</text>
</g>
<!-- (Non-functional) buttons can be placed around the page with custom labels -->
<use xlink:href="#button" label="OK" x="0" y="0"/>
<use xlink:href="#button" label="Cancel" x="100" y="0"/>
currentColor
is a feature-request
phab:T106240 that is resolved upstreamxlink:href="
see
File:MediaWiki_SVG_font_list_sans.svg<g transform="translate(...)"><use xlink:href="#common"/><text>LABEL</text></g>
for each instance. What would be great is something like <use xlink:href="#label" text-content="LABEL"/>
and the label
template sets a designated text
tag to the text-content
value.My concern is another renderer will likely have other bugs
text-decoration="overline"
?Hello!
I tried upscaling File:Fluix logo 2014.svg following the guide at User:Ronhjones/SVGreduce.
<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>
<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)
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.
<svg>
tag either or both of (i)
width=
and height=
attributes or (ii) a
viewBox=
attribute. So far as the Wikimedia projects are concerned, the viewBox=
attribute is the most useful, since the only purposes of width=
and height=
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, set height="316" width="316"
as you noted above. However, you should leave viewBox="0 0 64 64"
alone, unless you are willing to go through all of the coordinates in the d=
attributes of the three <path />
tags and adjust those too. --
Redrose64 🌹 (
talk) 14:07, 1 June 2021 (UTC)
<svg ...</svg>
in e.g. <g transform="scale(0.1)">...</g>
(0.1 shrinks everything to 10% of its original size) and update viewBox
accordingly.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)@ 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.
transform="translate(-1e4)" cx="1e4"
should not be used, and in combination with stroke="#f00" stroke-opacity="0"
it seems to break down.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)
Trying to upload a vector on the commons and it keeps showing up as transparent. When I put onto Inkscape and the file preview before uploading, the logo shows. Any reason for this?
Link: c:File:State_farm_arena.svg Troutfarm27 (Talk) 07:09, 16 July 2021 (UTC)
mask="url(#mask-2)"
attributes that occur six times on <path />
tags - I can't find where mask-2
is defined. Have you tried putting the image through
c:COM:Commons SVG Checker? --
Redrose64 🌹 (
talk) 07:58, 16 July 2021 (UTC)
Update: I was able to resolve the issue. I reuploaded the logo at c:File:State_farm_arena_logo.svg. Thank you for pointing that out, Redrose64! Troutfarm27 (Talk) 09:46, 21 July 2021 (UTC)
I'm experiencing the error message "Error: 429, Too Many Requests at Thu, 12 Aug 2021 21:04:17 GMT" again with this SVG. The image on File:fewest_weights_balance_puzzle.svg is fine. Is it due to the SVG filters? Thanks, cmɢʟee⎆ τaʟκ 21:06, 12 August 2021 (UTC)
please create an svg file for it to be uploaded in the article: India–Yugoslavia relations. Utkarsh555 ( talk) 18:53, 8 September 2021 (UTC)
Hi experts,
While making File:Euler_characteristic_hypercube_simplex.svg, I wondered if this was a known bug of Rsvg. It's different from commons:Librsvg_bugs#Marker.
In the test image here, the upper-left dot is missing in the Rsvg rendering but not on Chrome and Firefox. The bottom image has an extra v 0 to work around the issue, but it's clumsy.
Thanks,
cmɢʟee⎆
τaʟκ 10:30, 9 September 2021 (UTC)
“ | ‘marker-mid’ is used to specify the marker that will be drawn at all other vertices (i.e., every vertex except the first and last). | ” |
Hi. See commons:Commons:Graphics village pump#WTF is wrong with File:Selenium logo.svg (just trying to get visibility, as that page is not very active) -- something is totally wrong with the rendering of this SVG and I would like to know if anyone can fix it. DemonDays64 ( talk) 01:10, 27 September 2021 (UTC)
Could someone point me in the right direction? I'd like to create SVGs of symbols on a transparent background, converting the font I have to graphics so they display properly. Thanks. — kwami ( talk) 11:35, 27 September 2021 (UTC)
Hi Rsvg experts,
I used two bow-tie shapes filled with a linear gradient (the second rotated 90 degrees) in a mask to fade out the edges of the right-hand figure. Some pixels are not painted where the shapes meet each other at the diagonals, giving a large faint white "X". It's much less apparent when opening the SVG in a browser. Can this be considered a bug in the thumbnail renderer?
Can someone suggest a workaround to get this fade-out effect, perhaps using SVG filters?
Thanks,
cmɢʟee⎆
τaʟκ 11:48, 29 September 2021 (UTC)
<filter id="filter_fade">
<feMorphology operator="erode" radius="2"/>
<feGaussianBlur stdDeviation="1"/>
<feComposite operator="in" in="SourceGraphic"/>
</filter>
Hello!
Can someone perhaps take a look at de:File:BaumNeu3.svg. I you remove the title tag and replace the first SVG tag with the width, height and viewbox with just <svg> it works for some reason but doesn't display the entire file I think. Jonteemil ( talk) 14:39, 8 October 2021 (UTC)
xmlns="
http://www.w3.org/2000/svg"
was missing —
Johannes
Kalliauer -
contrib. 16:25, 8 October 2021 (UTC)