Image Occlusion by SVG

Image Occlusion by SVG

Postby msk » Tue Nov 27, 2018 6:26 am

Hi Ernie! Thanks for the nice app. I love it!

I have a question about SVG support by FCD.

Anki supports 'Image Occlusion' cards by a add-on, which is a killer feature for me.
See Image Occlusion Enhanced

On the other hand, accoding to the following link, FCD supports SVG.
Requirement: Please support html cards

I thought I could realize it by a SVG that renders vector graphics over JPEG or PNG.
So I tried it as follows:

On my Google Drive
Code: Select all
Flashcards Delux/
+ SVG_test          # as spread sheet
+ SVG_test Media/
   + test.svg
   + test.jpg       # 100x100 image


SVG_test
Code: Select all
  Text 1                   Text 2
  <img src="test.svg" />   OK?


test.svg
Code: Select all
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <image xlink:href="test.jpg" x="0" y="0" height="100" width="100" />
  <rect fill="#FFEBA2" stroke="#2D2D2D" stroke-width="0.5" x="0" y="10" height="5" width="20" />
  </svg>


The result is not good, the rect is displayed but test.jpg is not.
Is there any way I could get it to work properly?

Yes, I can convert this SVG into a single JPEG or PNG.
But it will be a waste of storage because I create a lot of questions per one image in some cases.

Thanks,
msk
 
Posts: 4
Joined: Tue Nov 27, 2018 6:08 am

Re: Image Occlusion by SVG

Postby Ernie » Tue Nov 27, 2018 10:33 pm

Hi.

It makes sense to me that the jpg file is not found. I update your HTML source <img src="test.svg" /> to include the full file path of test.svg so the browser can find it. But this is not being done inside the svg code.

I might be able to set a default location to the media directory. Tell me if you are using Android or iOS and I'll look into it further.

I'm traveling today and tomorrow. I'll need a few days to get back to you.

Ernie
Ernie
Site Admin
 
Posts: 5009
Joined: Fri Oct 01, 2010 6:12 pm
Location: San Francisco / Taiwan

Re: Image Occlusion by SVG

Postby msk » Wed Nov 28, 2018 8:01 am

Thank you for your quick reply!

Though I'm using FCD on both iPad and Android(phone) but iPad is primary for me.
Both results seem to be identical (only the rect is displayed).

Thanks,
msk
 
Posts: 4
Joined: Tue Nov 27, 2018 6:08 am

Re: Image Occlusion by SVG

Postby Ernie » Thu Nov 29, 2018 11:46 am

I tried changing your "test.jpg" to a full URL.

I used:
https://pay.google.com/about/static/ima ... h_logo.png

Neither iOS nor Android would show the image. At this point, I don't really know what to do. Sorry.

You might try using a full URL yourself to see if you get anything to work. This was just my first step to trying to get a local file to work.
Ernie
Site Admin
 
Posts: 5009
Joined: Fri Oct 01, 2010 6:12 pm
Location: San Francisco / Taiwan

Re: Image Occlusion by SVG

Postby msk » Thu Jan 03, 2019 5:08 am

Hi Ernie!

I found the following link which seems to describe the cause of this issue.

Referencing SVG as <img> in html breaks all <image> bitmaps in the SVG in most browsers

So, I tried <object> tag in stead of <img>, but still no luck..

Code: Select all
<object type="image/svg+xml" data="test.svg" />


It seems FCD doesn't support <object> tag, right?
Is it possible to support it?

Thanks!
msk
 
Posts: 4
Joined: Tue Nov 27, 2018 6:08 am

Re: Image Occlusion by SVG

Postby Ernie » Thu Jan 03, 2019 7:45 am

The text you create becomes raw HTML that's shown in mobile Safari. I don't think anything would be an issue of FCD not supporting it. If it doesn't work, it's likely an issue with mobile safari. Do your tests using full URLs, as using just file names won't work with current FCD coding. Javascript is likely disabled within the study screen, but that shouldn't affect this. Otherwise, I cant think of anything that might cause HTML supported by Safari not to work.
Ernie
Site Admin
 
Posts: 5009
Joined: Fri Oct 01, 2010 6:12 pm
Location: San Francisco / Taiwan

Re: Image Occlusion by SVG

Postby msk » Fri Jan 04, 2019 7:42 am

Hi!

Ernie wrote: If it doesn't work, it's likely an issue with mobile safari.

I thought so too, so I tried to make a iOS sample to confirm it.

I generated a project as "Single View App" on Xcode and wrote the following code.
(Yes, by googling. Though I'm able to do programming, I'm not familiar with iOS/Swift at all.)

Code: Select all
import UIKit
import WebKit

class ViewController: UIViewController, WKUIDelegate {

    var webView: WKWebView!

    override func loadView() {
        let webConfiguration = WKWebViewConfiguration()
        webView = WKWebView(frame: .zero, configuration: webConfiguration)
        webView.uiDelegate = self
        view = webView
    }
    override func viewDidLoad() {
        super.viewDidLoad()

        let path = Bundle.main.path(forResource: "test", ofType: "html") // ok
        //let path = Bundle.main.path(forResource: "test2", ofType: "html") //also ok
        let url = URL(fileURLWithPath: path!)
        let dirUrl = url.deletingLastPathComponent()

        webView.loadFileURL(url, allowingReadAccessTo: dirUrl)
    }
}


And then I put html/svg/jpeg files as bundle resources.

test.html
Code: Select all
<html>
<object type="image/svg+xml" data="test.svg">fallback text</object>
</html>


test2.html
Code: Select all
<html>
  <svg xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink">
    <image xlink:href="test.jpg" x="0" y="0" width="700"  height="400"/>
    <rect fill="#22EBA2" stroke="#2D2D2D" stroke-width="0.5" x="30" y="10" width="200" height="70" />
</svg>
</html>


test.svg
Code: Select all
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <image xlink:href="test.jpg" x="0" y="0" width="700"  height="400"/>
  <rect fill="#FFEBA2" stroke="#2D2D2D" stroke-width="0.5" x="30" y="10" width="200" height="70" />
</svg>

I run this on the iPad simulator and this succeeded to render the jpeg and rect! (in both test.html and test2.html)

So I guess the point is how you make a complete html string from "Text 1" that is raw html format.
For example, if I have a data like
Code: Select all
<object type="image/svg+xml" data="test.svg">fallback text</object>

or
Code: Select all
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <image xlink:href="test.jpg" x="0" y="0" width="700"  height="400"/>
  <rect fill="#22EBA2" stroke="#2D2D2D" stroke-width="0.5" x="30" y="10" width="200" height="70" />
</svg>

as "Text 1", what html string do you generate?
Could you show it?

I believe Image Occlusion is very useful to many people.
I do want to see this on FCD!

Thanks,
msk
 
Posts: 4
Joined: Tue Nov 27, 2018 6:08 am

Re: Image Occlusion by SVG

Postby Ernie » Wed Jan 09, 2019 8:20 am

Hi. Sorry for the slow response. I haven't looked in to this yet. I will soon and get back to you. I don't know if there's an easy answer...
Ernie
Site Admin
 
Posts: 5009
Joined: Fri Oct 01, 2010 6:12 pm
Location: San Francisco / Taiwan

Return to Comments, Questions and Feedback