I am trying to load a local (not served from a server) HTML file that has an embedded SVG in it. The HTML looks like this:
<!DOCTYPE html>
<html style="overflow: hidden">
<head>
<meta charset="UTF-8">
<title>icon_people_search</title>
</head>
<body style="overflow: hidden; ">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 72 72" xml:space="preserve">
<path class="st0" d="M46.1,51c-4.9,0-9.5-1.9-12.9-5.4c-3.5-3.5-5.4-8-5.4-12.9s1.9-9.5,5.4-12.9c0.7-0.7,1.5-1.3,2.3-1.9
c-2.5-3.4-6.6-5.6-11.2-5.6c-7.6,0-13.7,6-13.7,13.4c0,5,2.8,9.5,7,11.8C7.5,40.5,0.2,50,0.2,60h48.1c0-3-0.7-6.1-1.9-8.8
C46.3,51.2,46.2,51,46.1,51z"/>
<path class="st0" d="M71.8,52.3L59.5,40c3.2-5.8,2.4-13.3-2.6-18.3c-6-6-15.7-6-21.7,0s-6,15.7,0,21.7c4.9,4.9,12.4,5.8,18.3,2.6
l12.3,12.3L71.8,52.3z M40.3,38.4c-3.2-3.2-3.2-8.4,0-11.7c3.2-3.2,8.4-3.2,11.7,0c3.2,3.2,3.2,8.4,0,11.7
C48.8,41.7,43.5,41.7,40.3,38.4z"/>
</svg>
</body>
</html>
The HTML displays correctly in Firefox, Chrome, and Safari on Mac OS X. It also displays correctly on Android 4 and above's WebView.
However, it does not display on iOS 8 using a WKWebView and Swift. There don't seem to be any errors. The WKWebView just displays as a blank, white box.
Any idea why it's not working, and how I can make it work? I've seen some examples for iOS where the SVG as embedded using an <embed> or <object> tag, but I need the SVG to be inline as shown above so that it can be manipulated with JavaScript/jQuery to change fill colors of elements in the SVG.
Any thoughts, ideas, or examples?
Working fine for my in a WKWebView targeting the iOS 9 SDK. Maybe something is wrong with your string HTML formatting? Make sure you escape all double quote characters and set your baseUrl.
let webview = WKWebView(frame: self.view.frame)
self.view.addSubview(webview)
self.view.bringSubviewToFront(webview)
let html = "<!DOCTYPE html><html style=\"overflow: hidden\"><head><meta charset=\"UTF-8\"><title>icon_people_search</title></head><body style=\"overflow: hidden; \"><svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 72 72\" xml:space=\"preserve\"><path class=\"st0\" d=\"M46.1,51c-4.9,0-9.5-1.9-12.9-5.4c-3.5-3.5-5.4-8-5.4-12.9s1.9-9.5,5.4-12.9c0.7-0.7,1.5-1.3,2.3-1.9c-2.5-3.4-6.6-5.6-11.2-5.6c-7.6,0-13.7,6-13.7,13.4c0,5,2.8,9.5,7,11.8C7.5,40.5,0.2,50,0.2,60h48.1c0-3-0.7-6.1-1.9-8.8C46.3,51.2,46.2,51,46.1,51z\"/><path class=\"st0\" d=\"M71.8,52.3L59.5,40c3.2-5.8,2.4-13.3-2.6-18.3c-6-6-15.7-6-21.7,0s-6,15.7,0,21.7c4.9,4.9,12.4,5.8,18.3,2.6l12.3,12.3L71.8,52.3z M40.3,38.4c-3.2-3.2-3.2-8.4,0-11.7c3.2-3.2,8.4-3.2,11.7,0c3.2,3.2,3.2,8.4,0,11.7C48.8,41.7,43.5,41.7,40.3,38.4z\"/></svg></body></html>"
webview.loadHTMLString(html, baseURL: NSBundle.mainBundle().bundleURL)
Related
For reference, this is a working HTML code that correctly shows a live video sent in base64 byte stream over http within local network.
<html style="height: 100%;">
<head>
<meta name="viewport" content="width=device-width, minimum-scale=0.1">
</head>
<body style="margin: 0px; background: #0e0e0e; height: 100%">
<img style="display: block;-webkit-user-select: none;margin: auto;background-color: hsl(0, 0%, 25%);" src="http://192.168.10.61:5001/video" width="1280" height="720">
</body>
</html>
However if I embed the same code in flutter using flutter_html it only shows a loading indicator instead of showing the video. Any tips to solve this would be most appreciated.
Switching to --web-renderer -html and using Image.network() solves this issue but due to project constrains canvaskit is preferred.
I am doing my first steps in vapor 4 using leaf as view renderer. In my data i am pasting image urls but when I run the page the browser does not show them. The browser always shows the value of the "alt" tag.
So I tried to build a static leaf page which only shows an image from the internet but this is also not displaying the image. I can not figure out why. Do I have to set somewhere that the running test Webserver should render images? I am using macOS Big Sur 11.0.1
Here is my leaf code (it's simple html code but does not display the image)
<!DOCTYPE html>
<html>
<head>
<title>Image Test</title>
</head>
<body>
<a href="https://www.w3schools.com/tags/img_girl.jpg">
<img scr="https://www.w3schools.com/tags/img_girl.jpg" alt="test image" width="500" height="600">
</a>
</body>
</html>
As Nick said it was a speeling mistake .
I wrote „scr“, but it must be „src“
Correct:
<img src="https://www.w3schools.com/tags/img_girl.jpg" alt="test image" width="500" height="600">
I'm building a responsive HTML creative template to serve a full screen ad. The ad is displayed on a mobile device, running iOS 6-7, using version 6.8.0 of the DFP SDK. I noticed that when serving an ad with my template, DFP wraps my HTML with extra html/body tags (see comments below):
<!-- the code below is from DFP -->
<html><head>
<meta name="viewport"content="width=device-width,height=device-height,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0"/>
</head><body leftMargin="0" topMargin="0" marginwidth="0" marginheight="0">
<!-- my code starts here -->
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"/>
</head>
<body>
...
<!-- my code ends here -->
<!-- the code below is from DFP -->
</body></html>
The issue I'm having is that height=device-height from the injected HTML code makes my ad scrollable. My ads are displayed in landscape and for unknown reason device-height and device-width default to a same value - the device width. The HTML above is not valid because nested html/body tags and I can't control the viewport definition to remove the erronous height=device-height.
Questions:
Is there a way to suppress DFP generated wrapping HTML (<html>...</html>) and rely on my code to supply it (so I can supply my own viewport)
Any clues why landscape view of the ad defaults both width and height to the device width
I ended up using Javascript to update the header:
<script type="application/javascript">
var meta = document.getElementsByTagName("meta")[0];
meta.setAttribute("content", 'width=device-width,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0');
</script>
Wait-webdriver, chrome-driver
I have the following html code:
<iframe frameborder="0" allowtransparency="true" tabindex="0" src="" title="Rich text editor, ctl00_ContentMain_EditSegment1_txtDesc" aria-describedby="cke_27" style="width:100%;height:100%">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html class="CSS1Compat" lang="en" dir="ltr">
<head>
<title data-cke-title="Rich text editor, ctl00_ContentMain_EditSegment1_txtDesc">Rich text editor, ctl00_ContentMain_EditSegment1_txtDesc</title>
<link href="http:somefile.css" rel="stylesheet" type="text/css">
<style data-cke-temp="1" type="text/css">
</head>
<body class="cke_show_borders" contenteditable="true" spellcheck="false">
<br type="_moz">
</body>
</html>
</iframe>
I used the following code to set data to the body of the iframe :
#browser.frame(:title => 'Rich text editor, ctl00_ContentMain_EditSegment1_txtDesc').send_keys "description"
Yesterday I updated my chromedriver with new one: https://code.google.com/p/chromedriver/downloads/list
and this line doesn't work for me anymore, but it still works using old chromedriver
Any ideas how can I make it work with new chromedriver?
Thanks,
Anna
Yes, got the same issue. Switched back to old version and got it to work again.
Got all the frameSwitch code in a C# try/catch and no error is given, just an empty textfield.
( Dojo richtext )
The issue fixed in new chromedriver v.2.2:
https://code.google.com/p/chromedriver/downloads/list
I'm trying to get an SVG image to show up on my iPhone (or iPad) default browser, but I can't seem to get even just a rect to show up.
Example at: http://www.invalidpage.com/svg/svgtest.html
Source:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/html1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>SVG iPhone Test</title>
</head>
<body>
<div>
<svg width="500" height="220">
<rect x="2" y="2" width="496" height="216" stroke="#000" stroke-width="2px" fill="transparent"></rect>
</svg>
</div>
</body>
</html>
Add xmlns="http://www.w3.org/2000/svg" version="1.1" to your svg tag.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/html1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>SVG iPhone Test</title>
</head>
<body >
<svg width="500" height="220" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="2" y="2" width="496" height="216" stroke="#000" stroke-width="2px" fill="transparent"></rect>
</svg>
</body>
</html>
The HTTP MIME type being delivered by http://www.invalidpage.com/svg/svgtest.html is
"Content-Type: text/html". HTML inline svg works with the MIME type "Content-Type: text/xml" You can create this by ending the document with XML instead of HTML as they have done here.
Not sure if Ipad cares about the Content-Type but other browsers do.
Updated
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
Can also be used; It is what is being shown on the Ipad svg examples. When the document is delivering as an XML not HTML, it should start with <xml version="1.0" standalone="no">;
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="500" height="220" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="2" y="2" width="496" height="216" stroke="#000" stroke-width="2px" fill="transparent"></rect>
</svg>
Figured I would tack this on here, though it's mostly just related to the title.
I had my SVG tag rendering everything properly in every browser (even IE9+), except for iOS. I had the css height of the svg set to 100%, which worked everywhere, but on iOS it appeared to be 100% of the height of the entire page, instead of just its parent element! This was causing my inner SVG elements to render outside of their viewport.
Adding a position: absolute to the svg tag fixed my issue and it rendered properly on iOS and everywhere else (the parent element was already positioned, so this didn't change the actual position of the svg). Other position styles may also work.
I have had this problem before too with mobile Safari. What you can do is load the SVG into the the DOM via javascript:
$(document).ready(function(){
var svg = '<svg width="500" height="220" xmlns="http://www.w3.org/2000/svg" version="1.1"><rect x="2" y="2" width="496" height="216" stroke="#000" stroke-width="2px" fill="transparent"></rect></svg>';
var chart = document.adoptNode($('svg', $.parseXML(svg)).get(0));
$('body').html(chart);
);
That's just an example - obviously you're not going to store your SVG in a string like that in practice.
You could retrieve the SVG string from the server via ajax, and then load into the DOM using the above approach if you wanted.
I also had a problem displaying large SVGS (dimensions) in IOS browsers. By scaling it down I did get it to work.
I think around 1000px and down will do it..
A friend of mine told me it perhaps had something to with Integer Limits for IOS.
http://msdn.microsoft.com/en-us/library/7fh3a000.aspx
Mixing SVG tags with HTML tags without using a well-formed XHTML document and namespaces (see Wayne's answer) is not supported in Safari for iOS 4.2.1 and earlier, nor is it supported in Safari 5.0.x and earlier on Mac OS X and Windows.
Including SVG tags within an HTML document is a new feature of HTML5 parsers. If you download and run a nightly build of WebKit for Mac OS X or Windows, you'll see that your test case works as expected.
Even with all the other advice on this page I couldn't get it to work (even in Safari).
So I found a working example at:
http://upload.wikimedia.org/wikipedia/en/3/35/Starbucks_Coffee_Logo.svg
and copied the file to my own site. Still no luck, so I had a look at that file and my own using Rex Swain's HTTP viewer:
http://www.rexswain.com/httpview.html
The difference became obvious. My svg was being served as text/html, and the Starbucks logo was being served as image/svg+xml.
The solution was to change the header by adding:
addtype image/svg+xml .svg
to the .htaccess file.
have you tried to embed it inside an <object> tag.
<object type="image/svg+xml" item-prop="image" id="[give any id]" data=" [mention your file name] "></object>
e.g
<object type="image/svg+xml" item-prop="image" id="svgImage" data="images/svgImage.svg"></object>
I think this should do the trick!