I’m currently trying to create a deck for the prefectures in Japan, and I would like to use a SVG map.
Using the image on a card gives a broken link picture when using either the upload function or an off-site link, but pasting the <svg> itself works.
Am I missing something?
Hey, cool idea!
I’m not sure what might be causing it. You only set the ‘src’ attribute for the img tag right?
I’ll do some testing myself as well and let you know 
I was just using what was coming out of the upload dialogue. But I think I missed out that apparently you can’t style an SVG from an <img>, it has to be injected as well (?). I don’t know if it is currently possible, the upload dialogue filtered everything I tried
Another thing I was thinking of: you can add click handlers to the SVG (like clicking the region asked for), is it possible to flip a card with correct/incorrect by calling a javascript function, or define your own answer type?
Yup, exactly.
That sounds both awesome and crazy dangerous from a security point of view.
But having some kind of customizable input schemes would be nice
I like the idea of asking the user to click somewhere.
I hope the server could take care of that One image instead of 200 seems a good idea to me …
I’m sure there is a way, like a predefined click listener and you have to give the id s of the acceptable things. There should be a way to get this secure 
The point is that in order to apply styles to an SVG image, the SVG itself has to be in the html - not just referenced in an img tag, but included in full. That doesn’t make any different on the server side of things - the server has to transfer the full SVG file anyway.
I suppose that would be possible with image maps of some kind - as in defining different clickable areas in the card editor itself and wiring them to answers.
I just mean the way it is currently supported in the layouts is to use the img tag. Or can you get an embedded SVG with the current options already?
It needs to be injected anyway, but since the html that ends up in the browser is generated on the server, the embedding could of course happen there. @Neicudi would need to handle image tags with SVGs specifically, but it’s definitely possible.
(Technical stuff following)
There are ready-to-use scripts that take care of the injection if the img tag’s onload is wired to a function of said scripts. One thing to keep in mind is that injecting an SVG like that is dependent on correct CORS headers, while simply using it in an img tag works even without CORS headers.
Thats correct (iirc), its not possible to style an svg itself when you use it inside an img tag, unless you use an injector (which basically puts it into an svg tag on runtime).
Javascript is disabled due to security concerns (it would be extremely easy to hijack someone’s session or do other malicious stuff with it).
Theres currently two solutions to this problem:
let Kitsun handle the logic by creating a specific field type to use in your layouts (something like {{click:idtoclick}} although im not sure whether this would work well in practice. (As you would also like some logic triggered after the click…)
create a userscript and ask others to instal it. At least this way they can scan the code and see if there is anything suspicious.
Are svg html tags currently being filtered? I can at least put it on the whitelist if that’s the case.
That’s mostly along the lines of what I wrote.
I’m not sure how it would be best to implement, but it would definitely be a possibility. Having a visual editor where one could draw rects or polygons would be the most user friendly way of course.
From how I understood it, it would be enough to link a clickable region to an answer - so just like any other multiple choice format, just styled differently.
I think using them as images is more user friendly ^^
Why not handle the embedding on the server side?
Well, that’s the problem I guess. and SVG is basically one element, so defining ‘inside’ the element which part is correct and which isn’t, is quite difficult.
I’m not very familiar with image maps, but a posibility would be to add a div which has 100% height/width of the image, and in there define clickable areas with positioned divs? This already sounds like it’s going to be horrible inaccurate on different resolution sizes 
Server side it just stores the html/css, the actual parsing is done on runtime on the client side. I’d prefer not to add injections if possible.
But regardless, that still wouldn’t fix the problem stated above.
Edit: Actually, don’t svg elements have subelements per line or something similar? perhaps you could add the ‘kitsun click’ on one of those?
Maybe some more info on what I’m trying to do:
So I have a map like this, every region has an id, there is also a layer with circles for the capital cities.
What I would like to do is have two layouts:
I think this would also require to do some inline styling on the card? At least it has to be based on the fields in the card.
[My idea is to use the ids in the image, you should be able to define what parts in the svg are correct on click?]
Use percentages instead of pixels for coordinates 
A possible compromise could be being able to place buttons anywhere on the card - like having one button in each prefecture on the map.
Sure, if scripting is allowed within SVGs 
So your current svg already has ids for every prefecture? Could you perhaps post the svg element here (or in PM) so I have a better idea of what it looks like? ^^
If it already has ids (and therefor specific elements per region), then having something like {{click:correct}} and {{click:wrong}} could work?
Well that’s what I meant by making some kind of {{click}} field 
Judging by the shapes of the regions, I’d think that’s still going to be super inaccurate (you’d have to shape the button to match the region somehow )
Not necessarily
But of course using the region elements would be much better anyway.
It’s on github:
https://raw.githubusercontent.com/mwil/deck-prefectures/master/svg/Map_of_Japan_rot.svg
I took an image from Wikipedia and edited it a bit by hand in Inkscape. Everything has readable (known) ids [hmm at least inkscape:label, but I can also edit the ids], I grouped the prefectures in regions, added the cities in a different layer …
Not sure what you mean exactly by {{click:correct}}
Being able to list several ids would be ideal to also ask for regions like Kansai with several prefectures.
Okay that’s seriously cool, all the regions have their own html tags and ids. That makes it a lot easier. Nevermind what I said earlier.
I think a solution for this is the following:
Kitsun will automatically bind a click event to html elements with the following class: kitsun-click. That same element also has an attribute that you define: kitsunclick="correct" or kitsunclick="wrong". Depending on your attribute, clicking a region will either mark the card correct, or wrong.
So in practice, it would become something like:
<div class='kitsun-click' kitsunclick='correct'></div>
In your case it would have to be added on the html tags corresponding to the actual regions.
This could also be used for creating multiple choice buttons.
Edit: This functionality is not in Kitsun yet btw, not sure if that was clear enough haha
Also tagging @hinekidori in this as it might be interesting for the new layout/deck you were working on?