Mobile Safari SVG Problem - iphone

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!

Related

Swift Vapor 4 Leaf Image not displayed in view on run

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

iOS: WKWebView Does Not Display SVG

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)

HTML Creative template served with extra html/body tags

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>

Gist -- how to set the height and width of an embedded Gist

For purposes of embedding very long Gists from Github in a Wordpress blog, what code will permit me to set the height so that vertical scroll-bars are generated? Something around 500px would be perfect.
EDIT: The issue is now resolved, but I spent so much time on this issue, I believe it would be helpful to have a thread dedicated to that issue. I've posted an answer below that is working.

<style type="text/css">
.gist {width:500px !important;}
.gist-file
.gist-data {max-height: 500px;max-width: 500px;}
</style>
<script src="https://gist.github.com/user-name/123456789.js"></script>
Example: Boilerplate webpage borrowed from : http://www.dummies.com/how-to/content/a-sample-web-page-in-html.html [The answer works as advertised as of February 24, 2016 with Firefox 44.0.2 on OSX Snow Leopard 10.6.8.]
<html>
<!-- Text between angle brackets is an HTML tag and is not displayed.
Most tags, such as the HTML and /HTML tags that surround the contents of
a page, come in pairs; some tags, like HR, for a horizontal rule, stand
alone. Comments, such as the text you're reading, are not displayed when
the Web page is shown. The information between the HEAD and /HEAD tags is
not displayed. The information between the BODY and /BODY tags is displayed.-->
<head>
<title>Enter a title, displayed at the top of the window.</title>
</head>
<!-- The information between the BODY and /BODY tags is displayed.-->
<style type="text/css">
.gist {width:300px !important;}
.gist-file
.gist-data {max-height: 300px;max-width: 300px;}
</style>
<body>
<h1>Enter the main heading, usually the same as the title.</h1>
<p>Be <b>bold</b> in stating your key points. Put them in a list: </p>
<ul>
<li>The first item in your list</li>
<li>The second item; <i>italicize</i> key words</li>
</ul>
<p>Improve your image by including an image. </p>
<p><img src="http://www.mygifs.com/CoverImage.gif" alt="A Great HTML Resource"></p>
<p>Add a link to your favorite Web site.
Break up your page with a horizontal rule or two. </p>
<hr>
<p>Finally, link to another page in your own Web site.</p>
<!-- And add a copyright notice.-->
<p>© Wiley Publishing, 2011</p>
<script src="https://gist.github.com/lawlist/12345678.js"></script>
</body>
</html>

None of the above answers work anymore. Here is the updated CSS that displays the gist correctly with visible scrollbars where needed.
.gist {
max-width:350px;
overflow:auto;
}
.gist .blob-wrapper.data {
max-height:200px;
overflow:auto;
}
See this blog post for example:
How to set custom height and width of embedded Github Gist.

They seem to have changed something, so now you need to do this:
<style type="text/css"> .gist {width:500px; overflow:auto} .gist .file-data {max-height: 500px;max-width: 500px;} </style>

If your gist is inside an iFrame, which is generated and you can't access since it's and embedded HTML, you might want to take a look at this.

new chromedriver: can't send keys to iframe body

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