User talk:Rillke/SVGedit.js

Screenshot of SVGedit's activation link

Screenshot of SVGedit.js in action

Installation and usage

Install

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

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.

Usage

Click on "edit SVG" in the Tools-box (on the left hand side of the SVG file page).

Is there a WYSIWYG editor

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)

Discussion

CodeEditor

Hallo Rainer,
gibt's eigentlich eine (mit vertretbarem Aufwand realisierbare) Möglichkeit irgendwie den CodeEditor für das Eingabefeld zu nutzen? Wenn das funktionieren würde, dann wäre es einfach einsame Spitze!
Viele Grüße, --Patrick87 (talk) 20:20, 4 February 2015 (UTC)

+1 Gute Idee, allerdings befürchte 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)

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)

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)

Super! Klappt einwandfrei in meinem Firefox 38.0.1 unter Windows 7! --Patrick87 (talk) 14:28, 25 May 2015 (UTC)

Für Gelangweilte: Code schreiben, der erkennt, welche Art von Einrückung (1 Tab, 1 Space, 2 Spaces, …) eine SVG-Datei benutzt und mir diese zurückliefern. Dann könnte ich den CodeEditor automatisch konfigurieren lassen, so dass neue Zeilen gleich richtig eingerückt werden. -- Rillke^(q?) 22:41, 21 May 2015 (UTC)

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 würde einfach schätzen, dass es eine Regexp-Abfrage ist (für 2-3 Zeilen) mit /^\t/ /^ {2}/ /^ {4}/.test(… ↔ User: Perhelion (Commons: = crap?)  22:49, 24 May 2015 (UTC)

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)

Yeah, these code editors aren't very suitable for old and slow PCs. -- Rillke^(q?) 22:19, 18 July 2015 (UTC)

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)

Vorschau

Eine Vorschau wäre übrigens 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)

+1 Gute Idee und wenns erstmal nur der eigene Browser ist, das dürfte eigtl. kein großes Problem sein, einen Vorschau-frame zu generieren. ↔ User: Perhelion (Commons: = crap?)  22:36, 20 March 2015 (UTC)

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)

Rendering wird jetzt auf toollabs durchgeführt. 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 für den <iframe> unterstützt). Hier scheint Firefox den Hintergrund/Fills aus einem mir noch nicht bekannten Grund nicht zu rendern. Hinweise diesbezüglich werden gern entgegengenommen. -- Rillke^(q?) 22:37, 21 May 2015 (UTC)

Oha, ich habe schon gesehen, dass dort JPEGs gerendert werden. Ich vermute mal hier eine Sicherheits-Restriktion des FF (bekanntlich fährt da der FF eine strengere Linie als die anderen Browser). ↔ User: Perhelion (Commons: = crap?)  22:49, 24 May 2015 (UTC)

Großartig! Damit kann man die meisten Änderungen jetzt direkt im Browser erledigen.

Zwei Problemchen/Verbesserungsvorschläge:

• Das "Browser rendering" im <iframe> unterstützt derzeit keine xlink:href's und ähnliches (z.B. Marker), siehe z.B. File:5-Elemente 3.svg. Kann man daran was ändern?
• Während die Vorschau von toollabs abgerufen wird, ist auch die Browservorschau ausgegraut. Für den Fall, dass toollabs mal nicht erreichbar ist, wäre das nachteilig.

--Patrick87 (talk) 14:28, 25 May 2015 (UTC)

• Browser-Rendering: Opera (neu) und Chrome scheinen es zu unterstützen. 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 könnte und mache das auch gleich.

-- Rillke^(q?) 18:15, 25 May 2015 (UTC)

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)

Button location

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)

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)

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)

upload button coming soon

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)

Yes, thank you! ↔ User: Perhelion (Commons: = crap?)  16:20, 16 September 2015 (UTC)

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)

Funktioniert bei mir nicht :-(

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)

Hallo JoKalliauer besteht das Problem noch immer? -- Rillke^(q?) 21:51, 8 July 2019 (UTC)

Tracked in Phabricator
Task T216784

Das Problem wurde erst im Februar 2019 gelöst: Es war das Problem, dass die Seite Wikitext (anstatt JavaScript) war, das zufolge einer Verschiebung zustande kam, siehe phab:T216784 und diesen Beitrag für Details.

 — Johannes Kalliauer - Talk | Contributions 16:10, 9 July 2019 (UTC)

This section is resolved and can be archived. If you disagree, replace this template with your comment.  — Johannes Kalliauer - Talk | Contributions

Handling upload errors

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)

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)

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)

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)

 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)

Cosmetic only

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)

 Done Thank you. Please check if it works as you expect when using the next time. -- Rillke^(q?) 21:47, 8 July 2019 (UTC)

• Thank you. I must be getting senile - I'd clean forgotten I asked for this so recently. It works fine, see w:File:ESLint logo.svg - the new summary style is good. Thanks again. -- Begoon 16:29, 9 July 2019 (UTC)

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)

Diff between file revisions

Should SVGEdit provide Diffs between file revisions so you can more easily see/audit the changes? -- Rillke^(q?) 11:36, 27 July 2019 (UTC)

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)

This would be very appreciated.Jonteemil (talk) 17:45, 17 April 2020 (UTC)

Edit request

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

 Done Thank you! Masumrezarock -- User: Perhelion 06:07, 14 October 2019 (UTC)

Cropping

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)

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

Tag

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

Question

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)

@Fredddie: Please see this workaround. Cheers, cmɢʟee ⋅τaʟκ 01:13, 6 December 2021 (UTC)

Previews broken by server redirect

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. –IagoQnsi (talk) 23:00, 11 July 2020 (UTC)

@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. –IagoQnsi (talk) 23:10, 11 July 2020 (UTC)

BTW, a (very small) correction can be done at line 46: ususally is written "an SVG..." -- sarang♥사랑 11:37, 15 July 2020 (UTC)

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)

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

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

Edit request

{{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, IagoQnsi (talk) 18:50, 16 July 2020 (UTC)

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)

 Done 4nn1l2 (talk) 07:22, 29 July 2020 (UTC)

Edit request: Should work with file extension in upper case letters

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

 Done 4nn1l2 (talk) 07:22, 29 July 2020 (UTC)

Collection of SVG tools

The following gallery of SVG Tools have been gathered by a very popular CSS blogger and his community :

• Tools to Visualize and Edit SVG Paths (Kinda!) https://css-tricks.com/tools-visualize-edit-svg-paths-kinda/

There are very interesting, light weight, in browser proof of concepts worth checking. Yug (talk) 20:04, 18 September 2020 (UTC)

Simple shapes editor in browser ?

This one and 2000 of its siblings needs editing !

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

1. user visits a basic svg file on Commons (we have hundred of thousands of them)
2. user clicks, send svg in the svg editing tool (easy)
3. 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
4. tool outputs svg xml (easy)
5. user inputs comment on modification (easy)
6. 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)

Conflicts with 2017 wikitext editor

When starting the SVG editor while having the 2017 wikitext editor installed, it loads the latter instead. pandakekok9 12:22, 19 April 2021 (UTC)

Broken on non-legacy Vector

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)

How to make textarea bigger?

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)

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)

2016 Washington gubernatorial election

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)

SVG Translation Prototype

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)

RSVG preview isn't working

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)

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)

I see, thanks for letting me know.Jonteemil (talk) 21:22, 24 August 2022 (UTC)

Drop down beside edit button not shown

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)

Error

ResolvedQuickQuokka ^{[⁠talk • contribs]} 03:44, 31 August 2023 (UTC)

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??? QuickQuokka ^{[⁠talk • contribs]} 03:43, 31 August 2023 (UTC)

 Resolved Problem is I'm dumb and accidentally did this on the mirror on Wikipedia instead of on Commons.

Where is the Tools-box

I do not undestand the sentence: Click on "edit SVG" in the Tools-box (on the left hand side of the SVG file page). I cannot find the "Tools-box". How does it look? should I clik on somthing? Thanks a lot, Rami (Aizenr, talk) 04:16, 3 October 2024 (UTC)