Installation and usage
[
edit
]
Add
if
(
mw
.
config
.
get
(
'wgNamespaceNumber'
)
===
6
&&
/SVG/i
.
test
(
mw
.
config
.
get
(
'wgTitle'
).
slice
(
-
3
)))
// SVGedit on SVG files only
importScript
(
'User:Rillke/SVGedit.js'
);
to
Special:MyPage/common.js
Global or foreign wiki installation
[
edit
]
Add
if
(
mw
.
config
.
get
(
'wgNamespaceNumber'
)
===
6
&&
/SVG/i
.
test
(
mw
.
config
.
get
(
'wgTitle'
).
slice
(
-
3
)))
// SVGedit on SVG files only
mw
.
loader
.
load
(
'//commons.wikimedia.org/w/index.php?title=User:Rillke/SVGedit.js&action=raw&ctype=text/javascript'
);
to
m:Special:MyPage/global.js
.
Make sure you remove any imports of this script at Wikimedia Commons before enabling global import, i.e. check your
Special:MyPage/common.js
and
Special:MyPage/vector.js
that you do not import the script there.
Click on "edit SVG" in the
Tools
-box (on the left hand side of the SVG file page).
There is a buggy one, which can be enabled through loading
User:Rillke/SVGEdit-WYSIWYG.js
I do not recommend editing an upload which a lot of people rely on using this script. Also it's heavy, hosted on a server which might be compromised or down in the near future. Basically it's a preview of
mw:Extension:SVGEdit
.
- Info
currently broken. --
Rillke
(q?)
22:22, 8 July 2019 (UTC)
[
reply
]
Hallo Rainer,
gibt's eigentlich eine (mit vertretbarem Aufwand realisierbare) Moglichkeit irgendwie den CodeEditor fur das Eingabefeld zu nutzen? Wenn das funktionieren wurde, dann ware es einfach einsame Spitze!
Viele Gruße, --
Patrick87
(
talk
)
20:20, 4 February 2015 (UTC)
[
reply
]
- +1 Gute Idee, allerdings befurchte ich, dass hier etwas anderes her muss. Ich hatte auch schon die Idee den W3C-Validator auf Toollabs zu installieren (dieser ist als server frei downloadbar).
↔
User: Perhelion
(Commons:
= crap
?
)
20:52, 4 February 2015 (UTC)
[
reply
]
- PS: An sich bringt ja jeder moderne Browser eine SVG/XML Syntaxhervorhebung mit. Nun ist die Frage ob und wie man diese einfach aktivieren kann.
↔
User: Perhelion
(Commons:
= crap?
)
22:38, 20 March 2015 (UTC)
[
reply
]
- YEs
it works, thanks for this! Now an browser-preview should be possible? Can I test some scripts for you?? Best regards
↔
User: Perhelion
(Commons:
= crap?
)
09:49, 21 May 2015 (UTC)
[
reply
]
- Super! Klappt einwandfrei in meinem Firefox 38.0.1 unter Windows 7! --
Patrick87
(
talk
)
14:28, 25 May 2015 (UTC)
[
reply
]
Fur Gelangweilte: Code schreiben, der erkennt, welche Art von Einruckung (1 Tab, 1 Space, 2 Spaces, …) eine SVG-Datei benutzt und mir diese zuruckliefern. Dann konnte ich den CodeEditor automatisch konfigurieren lassen, so dass neue Zeilen gleich richtig eingeruckt werden. --
Rillke
(q?)
22:41, 21 May 2015 (UTC)
[
reply
]
- Oha, kann ich mir jetzt gar nicht vorstellen dass du so etwas brauchst, und so richtig vorstellen kann ich mir auch nicht wie das verwendet werden soll.
^^
Ich wurde einfach schatzen, dass es eine Regexp-Abfrage ist (fur 2-3 Zeilen) mit
/^\t/ /^ {2}/ /^ {4}/.test(…
↔
User: Perhelion
(Commons:
= crap?
)
22:49, 24 May 2015 (UTC)
[
reply
]
Sorry I have no intention to keep using it but here's my little thought after my first try: When I activate CodeMirror, it slowed down my old PC but I couldn't find option to revert to the bare (faster) editor. --
Sameboat - 同舟
(
talk
·
contri.
)
04:55, 11 June 2015 (UTC)
[
reply
]
- Yeah, these code editors aren't very suitable for old and slow PCs. --
Rillke
(q?)
22:19, 18 July 2015 (UTC)
[
reply
]
This section is resolved and can be archived. If you disagree, replace this template with your comment.
Rillke
(q?)
22:19, 18 July 2015 (UTC)
Eine Vorschau ware ubrigens auch Klasse... (Hau micht nicht gleich, ich weiß, dass das ein Haufen Arbeit ist.
)
Soll jetzt auch keine Aufforderung sein, lediglich als Idee und Ideen in den Raum werfen kostet ja erstmal nichts. Wenn die dann irgendwann irgendjemand irgendwie umsetzt haben wir alle was davon! --
Patrick87
(
talk
)
21:55, 20 March 2015 (UTC)
[
reply
]
- +1 Gute Idee und wenns erstmal nur der eigene Browser ist, das durfte eigtl. kein großes Problem sein, einen Vorschau-frame zu generieren.
↔
User: Perhelion
(Commons:
= crap?
)
22:36, 20 March 2015 (UTC)
[
reply
]
- Wow,
I'm really impressed about this, you do this so easy. Thank you very much, I enjoy this! I'll give you a barnstar. See you
↔
User: Perhelion
(Commons:
= crap?
)
22:24, 21 May 2015 (UTC)
[
reply
]
- Rendering wird jetzt auf
toollabs
durchgefuhrt. Firefox stuft das Zertifikat allerdings als zu schwach ein, weswegen das "SSL-Schloss" in der Adressleiste zu einem Ausrufezeichen wird. Ein 2. Rendering passiert auf sichere Weise im Browser (sicher, wenn er das HTML5
sandbox
Attribut fur den
<iframe>
unterstutzt). Hier scheint Firefox den Hintergrund/Fills aus einem mir noch nicht bekannten Grund nicht zu rendern. Hinweise diesbezuglich werden gern entgegengenommen. --
Rillke
(q?)
22:37, 21 May 2015 (UTC)
[
reply
]
- Oha, ich habe schon gesehen, dass dort JPEGs gerendert werden. Ich vermute mal hier eine Sicherheits-Restriktion des FF (bekanntlich fahrt da der FF eine strengere Linie als die anderen Browser).
↔
User: Perhelion
(Commons:
= crap?
)
22:49, 24 May 2015 (UTC)
[
reply
]
- Großartig! Damit kann man die meisten Anderungen jetzt direkt im Browser erledigen.
- Zwei Problemchen/Verbesserungsvorschlage:
- Das "Browser rendering" im
<iframe>
unterstutzt derzeit keine
xlink:href
's und ahnliches (z.B. Marker), siehe z.B.
File:5-Elemente 3.svg
. Kann man daran was andern?
- Wahrend die Vorschau von toollabs abgerufen wird, ist auch die Browservorschau ausgegraut. Fur den Fall, dass toollabs mal nicht erreichbar ist, ware das nachteilig.
- --
Patrick87
(
talk
)
14:28, 25 May 2015 (UTC)
[
reply
]
- Browser-Rendering: Opera (neu) und Chrome scheinen es zu unterstutzen. Sieht nach einem Fehler von Firefox im Zusammenhang von iFrame+Blob source aus.
- Sollte Tool-Labs nicht erreichbar sein, sollte ein "Bug" angezeigt werden und das Overlay auch verschwinden. Ich stimme aber zu, dass das verbessert werden konnte und mache das auch gleich.
- --
Rillke
(q?)
18:15, 25 May 2015 (UTC)
[
reply
]
This section is resolved and can be archived. If you disagree, replace this template with your comment.
Rillke
(q?)
22:19, 18 July 2015 (UTC)
- I strongly recommend to place the button direct beside the normal page-edit button, because the left hand side is full with many tool-links and the sequence is
highly randomly
.
- So I made for the first time a hack
(because you not answered on the previous requests?)
:
$
(
function
(){
setTimeout
(
function
(){
$
(
'#ca-history'
).
append
(
$
(
'#e-edit-raw-SVG'
));},
100
);});
// Hack for alternative button
- In my opinion, this button location is also more expectably.
↔
User: Perhelion
(Commons:
= crap?
)
12:10, 16 September 2015 (UTC)
[
reply
]
- It looks indeed hackish?;-) Every code that doesn't shedule time-based events and uses
setTimeout
is. I'll try finding a workaround, once I had a dropdown at the edit button. --
Rillke
(q?)
13:38, 16 September 2015 (UTC)
[
reply
]
This section is resolved and can be archived. If you disagree, replace this template with your comment.
Rillke
(q?)
22:20, 8 July 2019 (UTC)
A button which allows importing a revision from the local file system is coming soon. Stay tuned. --
Rillke
(q?)
13:41, 16 September 2015 (UTC)
[
reply
]
- Yes, thank you!
↔
User: Perhelion
(Commons:
= crap?
)
16:20, 16 September 2015 (UTC)
[
reply
]
This section is resolved and can be archived. If you disagree, replace this template with your comment.
Rillke
(q?)
11:30, 27 July 2019 (UTC)
Hallo Rilke!
Kannst du dir bitte mein common.js in meinem en.wiki anschauen und mir sagen warum es nicht funktioniert:
https://en.wikipedia.org/wiki/User:JoKalliauer/common.js
Hier ein Screenshot:
http://photobucket.com/gallery/user/Jo-Kalliauer/media/bWVkaWFJZDoxMzMxMzQ1Nzc=/?ref=
Ich hab alle Einstellungen im en.wiki auf die Standarteinstellungen gesetzt.
???
Johannes
Kalliauer
-
Talk
|
Contributions
08:05, 24 March 2018 (UTC)
[
reply
]
- Hallo
JoKalliauer
besteht das Problem noch immer? --
Rillke
(q?)
21:51, 8 July 2019 (UTC)
[
reply
]
- Das Problem wurde erst im Februar 2019 gelost: Es war das Problem, dass die Seite Wikitext (anstatt JavaScript) war, das zufolge einer Verschiebung zustande kam, siehe
phab:T216784
und
diesen Beitrag
fur Details.
- ???
Johannes
Kalliauer
-
Talk
|
Contributions
16:10, 9 July 2019 (UTC)
[
reply
]
Today
I
tried to use the script for editing
a file which contained
?unknowingly to me?an <image … sodipodi:absref="C:\Documents and Settings\…" xlink:href="…"/> element. It is a condition throwing a warning on attempted uploading to Commons nowadays. The SVG editor form did not show me any error on [Save] and the reason why the file was not updated remained a mystery to me until
I
resorted to the standard uploading form. Can a smarter handling of warning and error messages from the server be implemented?
Incnis Mrsi
(
talk
)
20:06, 10 April 2018 (UTC)
[
reply
]
- I would recommend to use
Commons:Commons SVG Checker
: for
20180410111436%21Cyprus_regions_map.svg
then you get:
ERROR in <image> with id=image30664: Image has xlink:href with external source. They will not work (and may be blocked) by the Wikimedia software. All required elements need to be included into the SVG directly. See
https://phabricator.wikimedia.org/T5537
for details.
- You can implement a direct link to the commons-Checker using
importScript('
User:Perhelion/simpleSVGcheck.js
');
on your
User:Incnis_Mrsi/common.js
(Maybe copy my
User:JoKalliauer/common.js
and delete those you don't like)
- I'm not sure if I could answer your question correctly.
- JoKalliauer
(
talk
)
20:02, 11 April 2018 (UTC)
[
reply
]
- The suggestion may have its own merits, but would not fix the inherit deficiency of SVGedit.js. For the reason described above or any else, if uploading failed then this Web application doesn’t care to indicate the condition in a due manner. But it should.
Incnis Mrsi
(
talk
)
18:54, 12 April 2018 (UTC)
[
reply
]
- Just noticed
style="display:none"
therefore commenting out was the best choice, because it should not displayed anyway (Ps it is
File:Un-cyprus.png
)
- JoKalliauer
(
talk
)
20:36, 11 April 2018 (UTC)
[
reply
]
- Support
for improved upload error messages
Done
and
Support
running SVG check directly over the editor contents (e.g. adding a button). --
Rillke
(q?)
21:53, 8 July 2019 (UTC)
[
reply
]
Hi
Not important at all, but since I (and I suspect others) use this cross-wiki, loading from
global.js at meta
, you might want to change:
Editing SVG source code using
User:Rillke/SVGedit.js
; upload handled by
User:Rillke/MwJSBot.js
to
Editing SVG source code using
c:User:Rillke/SVGedit.js
; upload handled by
c:User:Rillke/MwJSBot.js
or similar. Cheers. --
Begoon
06:45, 16 June 2019 (UTC)
[
reply
]
- Done
Thank you. Please check if it works as you expect when using the next time. --
Rillke
(q?)
21:47, 8 July 2019 (UTC)
[
reply
]
This section is resolved and can be archived. If you disagree, replace this template with your comment.
Rillke
(q?)
21:47, 8 July 2019 (UTC)
Should SVGEdit provide Diffs between file revisions so you can more easily see/audit the changes? --
Rillke
(q?)
11:36, 27 July 2019 (UTC)
[
reply
]
- Hey
Rillke
, nice to see you again! That would be a feature I also thought about it, it would be nice! Additionally, would a discussion link to here not make sense (when opening the editor gui)!?
--
User: Perhelion
15:53, 6 August 2019 (UTC)
[
reply
]
- This would be very appreciated.
Jonteemil
(
talk
)
17:45, 17 April 2020 (UTC)
[
reply
]
{{Editrequest}}
As I've said on
User_talk:Rillke/MwJSBot.js
. Please replace
mw.user.tokens.get('editToken')
with
mw.user.tokens.get('csrfToken')
. Thanks.
Masum Reza
??
20:39, 13 October 2019 (UTC)
[
reply
]
- Done
Thank you!
Masumrezarock
--
User: Perhelion
06:07, 14 October 2019 (UTC)
[
reply
]
Hello!
Is there a good way to crop SVGs using this tool (or perhaps another tool)? For example
en:File:Logo-riverside.svg
.
Jonteemil
(
talk
)
17:05, 12 February 2020 (UTC)
[
reply
]
- @
Jonteemil
:
A clumsy way is to fiddle with the values in the SVG's
viewBox
if present, or its
width
and
height
otherwise. Cheers,
cm??ee
??
τa?κ
01:24, 6 December 2021 (UTC)
[
reply
]
@
Rillke
:
Hello! The tag
rillke-mw-js-bot
appears in the edit diff, see for example
Special:Diff/412407998
here on Commons. This tag however, does not appear on enwiki (or any other wiki I would presume), see for example
w:Special:Diff/950525997
. Can you make it so it does? This is because I don't think
this tool
can recognize edits done with
User:Rillke/SVGedit.js
otherwise. Best regards,
Jonteemil
(
talk
)
02:32, 20 April 2020 (UTC)
[
reply
]
Whenever I click the Edit SVG button the code window is only two lines high. So I have to resize the window each time. Is that intentional or is it on my end? It's only an annoyance -- the script works great. ?
Fredddie
™
23:03, 24 May 2020 (UTC)
[
reply
]
- @
Fredddie
:
Please see
this workaround
. Cheers,
cm??ee
??
τa?κ
01:13, 6 December 2021 (UTC)
[
reply
]
To generate an RSVG preview, this script makes a request to
https://tools.wmflabs.org/convert/svg2png.php
. However, this endpoint has now moved to
https://convert.toolforge.org/svg2png.php
with a 308 redirect. Because this is a cross-origin redirect, the browser considers the origin to be tainted, and sets the header
Origin: null
the second HTTP request. Not including a proper origin causes svg2png.php to return a 403 Forbidden error. Thus, this script needs to be updated to use the new URL. ?
Iago
Qnsi
(
talk
)
23:00, 11 July 2020 (UTC)
[
reply
]
- @
Bawolff
:
@
Brion VIBBER
:
@
BryanDavis
:
@
Rillke
:
I'm pinging everyone listed as a maintainer for convert.toolforge.org. If there are any other user scripts that rely on this tool, they will also have been broken by this redirect. ?
Iago
Qnsi
(
talk
)
23:10, 11 July 2020 (UTC)
[
reply
]
- BTW, a (very small) correction can be done at line 46: ususally is written "an SVG..." --
sarang
♥
사랑
11:37, 15 July 2020 (UTC)
[
reply
]
- BTW, the same display trouble (preview broken) occurs at the upload function of the
Commons:Commons SVG Checker
. --
sarang
♥
사랑
11:47, 15 July 2020 (UTC)
[
reply
]
- @
Sarang
:
The checker script has been fixed already in early July. Did you perhaps use a cached version? Otherwise you should file an edit request like below. ??
Speravir
??
01:12, 30 July 2020 (UTC)
[
reply
]
- @
Speravir
:
I am using it almost every day, and yesterday I saw that it is working again. Thank you --
sarang
♥
사랑
03:58, 30 July 2020 (UTC)
[
reply
]
{{Editrequest}}
It seems that
User:Rillke
is not very active these days, so could an admin please fix this instead? The fix is very straightforward: on line 659 of this script,
//tools.wmflabs.org/convert/svg2png.php
needs to be changed to
//convert.toolforge.org/svg2png.php
.
(Edit: domain fix by
Speravir
01:49, 29 July 2020 (UTC).)
Thanks,
Iago
Qnsi
(
talk
)
18:50, 16 July 2020 (UTC)
[
reply
]
- There is also another
tools.wmflabs.org
usage, just now in line 530:
//tools.wmflabs.org/validator/w3.php
should be changed to
//validator.toolforge.org/w3.php
. Maybe both could even be spended a leading
https:
, too, because there won’t be a successful http request (oh, seems to be redirected). ??
Speravir
??
01:21, 29 July 2020 (UTC)
[
reply
]
- Done
4nn1l2
(
talk
)
07:22, 29 July 2020 (UTC)
[
reply
]
{{Edit request}}
In the moment this script does not work with SVG files containing an upper case letters extension (example:
File:StopSign.SVG
). Apparently, this line has to be altered (for now line 45)
if
(
conf
.
wgNamespaceNumber
!==
6
||
!
/\.svg$/
.
test
(
conf
.
wgPageName
))
Adding an i for the regex should work, it’s already done this way later in the script (now line 270).
Suggestion
: Change this line to
if
(
conf
.
wgNamespaceNumber
!==
6
||
!
/\.svg$/i
.
test
(
conf
.
wgPageName
))
Alternatively, for both cases the regex could be changed to
/\.(svg|SVG)$/
??
Speravir
??
00:59, 29 July 2020 (UTC)
[
reply
]
- Done
4nn1l2
(
talk
)
07:22, 29 July 2020 (UTC)
[
reply
]
The following gallery of SVG Tools have been gathered by a very popular CSS blogger and his community?:
There are very interesting, light weight, in browser proof of concepts worth checking.
Yug
(talk)
20:04, 18 September 2020 (UTC)
[
reply
]
Tools to Visualize and Edit SVG Paths (Kinda!)
displays few cases of very interesting, light weight, in browser proof of concepts to edit basic svg shapes in browser via nodes dragging.
This one
by Thebabydino is demoing core principles of what we do need. The wish is expressed by CSS-tricks is similar to our need and as follow?:
It was brought up at the
SVG Summit
the other day, wouldn’t it be nice when working with SVG to be able to work with it both ways at once?
- See and edit the code, and see the results visually
- See and edit the visual shapes, and see the code change
There might not be the perfect one true tool, but there are certainly some ideas getting there!
|
Mission statement: Allow editing of Commons SVG's basic shapes via nodes-dragging without having to save them locally (aka "download") them, edit them locally, then upload them back to Commons.
The IRL/Wikimedia
use case
I see is to allow Commons users ...
- user visits a basic svg file on Commons (we have hundred of thousands of them)
- user clicks, send svg in the svg editing tool (easy)
- tool UI allows edition of svg:
- nodes dragging via mouse?: changes node's coordinates
- node double-clicking via mouse?: changes node's type
- select line: add node
- select node + delete: delete node
- select object + page-up/page-down: move object up / move down
- tool outputs svg xml (easy)
- user inputs comment on modification (easy)
- mw:API:Upload
allows upload over existing file. (easy)
@
Rillke
and
Sarang
:
, others: does such project exist already on Commons?? Such project could worth
meta:Grants:Project
. This would have similar ecosystem role as
meta:Community_Tech/SVG_translation
(
app
)?: speed up community's users in their work improving svg contents. The UI and .js library produced would also be appreciated by the overall Opensource community. cc:
user:NKohli (WMF)
Yug
(talk)
20:04, 18 September 2020 (UTC)
[
reply
]
When starting the SVG editor while having the 2017 wikitext editor installed, it loads the latter instead.
panda
kekok
9
12:22, 19 April 2021 (UTC)
[
reply
]
I installed the script, clicked the edit button and didn't get a dropdown. Clicking the edit text just opens the normal editor, hovering on the button doesn't do anything and it isn't appearing in the tools section. I checked and it shows up in both locations on the legacy version of Vector.
Remagoxer
(
talk
)
11:52, 27 July 2021 (UTC)
[
reply
]
As
Fredddie reported above
, the textarea with the SVG code is only about 2 lines high. On a PC browser, I can resize it, but not on Chrome on Android. Is there a way to configure how many lines appear? Thanks,
cm??ee
??
τa?κ
20:25, 27 July 2021 (UTC)
[
reply
]
- I've forked Rillke's code by copying the contents of
User:Rillke/SVGedit.js
into
my own user space
and modifying the line
}).
css
({
width
:
'99%'
}).
appendTo
(
$taWrap
),
- to
}).
css
({
width
:
'99%'
,
height
:
'40em'
}).
appendTo
(
$taWrap
),
- (change
40em
to suit). Would
@
Rillke
:
,
@
4nn1l2
:
or
@
Perhelion
:
be willing to add an appropriate default, please? Thanks,
cm??ee
??
τa?κ
01:11, 6 December 2021 (UTC)
[
reply
]
Hey, I saw that you shaded in Skagit County, Washington differently in the 2020 Washington gubernatorial election to reflect write-ins. I was wondering if you could upload a new version of the 2016 gubernatorial map with Pierce County being plurality Democratic and Wahkiakum County being less than 60% Republican. Source:
https://uselectionatlas.org/RESULTS/state.php?fips=53&year=2016&f=0&elect=0&off=5
Thanks.
Thomascampbell123
(
talk
)
07:52, 21 December 2021 (UTC)
[
reply
]
I have prototyped a small
JS translation tool
. Do you think something like that might be useful to be merged into SVGedit?
I had issues with the existing SVG Translate Tool and really like your helper here, instead of downloading/uploading. Let me know what you think. --
Aeroid
(
talk
)
17:45, 22 December 2021 (UTC)
[
reply
]
I've tried tried it with a few different SVGs. The RSVG rendering is not working when previewing.
File:Bug blank.svg
is showed instead.
Jonteemil
(
talk
)
22:55, 23 August 2022 (UTC)
[
reply
]
- It's been broken since last year, and so is the
Commons SVG Checker
. No idea when or if anyone will fix them. A workaround is to copy the code to a text file and load it on
SVG Check
but fonts are incorrectly rendered.?:-(
cm??ee
??
τa?κ
08:10, 24 August 2022 (UTC)
[
reply
]
- I see, thanks for letting me know.
Jonteemil
(
talk
)
21:22, 24 August 2022 (UTC)
[
reply
]
I've been trying to use this script like I've done several times before. But now, the drop-down list isn't there at all. So, I am unable to use it any further. What went wrong suddenly? ??
CX Zoom
(A/?/?)
(
let's talk
|
contribs
)
08:04, 29 August 2022 (UTC)
[
reply
]
When I try to use it on
File:Sniper red beta.svg
, it gives
API Error fileexists-shared-forbidden: A file with this name exists already in the shared file repository. If you still want to upload your file, please go back and use a new name. [[
File:Sniper_red_beta.svg
|thumb|center|Sniper_red_beta.svg]]
Isn't that the whole point of the tool? To write over eisting files???
Quick
Quokka
[?
talk
?
contribs
]
03:43, 31 August 2023 (UTC)
[
reply
]
- Resolved
Problem is I'm dumb and accidentally did this on the mirror on Wikipedia instead of on Commons.
k
78.174.127.213
06:08, 17 September 2023 (UTC)
[
reply
]