An SVG newbie needs your help.
I've created some SVG files using Inkscape and trying to implement these in my website scaling them over CSS ( height:12pt;width:auto; ).
It does work fine in Chrome and Opera but doesn't in IE 9 and IE for WP8.1:
The images are cropped to the indicated height instead being scaled.
Does anyone have the same issues or even a solution?
Thank you in advance!
Here's a link to the Image
Here's the integration code:
<div id="social">Social:
<a href="http://www.xing.com/profile/Alexander_Radeke" target="_blank" rel="me"title="Besuchen Sie unser XING-Profil">
<img id="xing" class="svg" src="fileadmin/sprachvertraut/svg/xing.svg"alt="Unser XING-Profil">ing</a> </div>
CSS:
#xing {height:1em;width:1em;border:solid 1px #eef;border-radius:0.2em;margin-bottom:-0.1em;}
Do you need more infos?
Related
I am working on my website at the moment. And I realized, when looking at the mobile site that one of my images stretches/changes it's aspect ratio. Keep in mind this is only on iPhones. I had a few friends look at the site, and only the people with iPhones had the image stretched like this.
This is the page on the browser
This is the page on my iPhone 11
<div class="col d-flex d-md-flex d-xl-flex justify-content-center align-items-md-center">
<img class="d-xl-flex align-items-xl-center" src="assets/img/headshot.jpg" style="max-width: 90%;">
</div>
I originally had height: auto; in there as well, and when trying to solve this issue I found an older post saying that could be the issue. Sadly it did not resolve it.
I know I can easily solve this problem with media queries, but there must be a reason why this happens only on iPhone. I also only have in body styling on this image, you can see it on the browser preview on the inspector.
If you would like to look at it yourself. The Website URL is https://www.robinalexander.at/about-me
Try to remove the classes d-xl-flex align-items-xl-center from img and give it a display: block. The parent div will keep the img in place
I have an interesting problem with placing a border radius on an image. The radius works fine when the page is rendered in the browser, but doesn't work (full rectangular image is shown) when I try to print the page.
This the HTML syntax (CSS is inline so it's easy for you guys to see).
<img style="padding:0;margin:0;border-radius: 75px;-moz-border-radius: 75px;-webkit-border-radius: 75px;border: 3px solid #f58d1e;" border="0" height="50" width="50" src="myimage.jpg"/>
I'm using Mac/Yosemite and my version of Google Chrome is "Version 40.0.2214.94 (64-bit)"
I have a good selection of SVG graphics on my site here
http://www.poipleshadow.com
They look crisp and I would love to continue using them, although I have a problem when i combine them with fallback for IE when they have links.
For example this is fine
<a href="index.htm">
<img src="Images/Poiple-Shadow.svg" width="32" height="32" alt="Poiple Shadow Charity Website" class="logo200">
</a>
But when I add the svg as an object and include a line for PNG support the link does not work anymore.
<a href="Goa-India-Map.htm" title="Goa Tourist Map">
<object type="image/svg+xml" data="Images/Buy-Items-To-Donate.svg" class="myimgleft">
<img src="Images/Buy-Items-To-Donate.png" width="200" height="156" alt="Give to charity - Donate to Street Children Charity" class="myimgleft">
</object>
</a>
I have searched and found that I could include the link in the SVG itself, although this means that the SVG would only link to a single address. Not ideal. Anyone know of a clean, basic, solution as I like to keep my site as basic as possible where ever I can just using HTML5 and CSS.
This is hacky, but I've used a trick from CSS Tricks in the past.
Unfortunately there's not a convenient anchor on that page to link to, but it looks like this:
.my-element {
background-image: url(fallback.png);
background-image: url(image.svg), none;
}
Apparently support of multiple backgrounds and SVG mostly overlap, so anything that doesn't support svg will use the top background-image while anything that does support svg will use the bottom. Clever, but like I said, hacky, and the best trick I know that doesn't use Modernizr.
CSS Tricks reports that "this works well in IE 6-8, but sadly not in Android 2.3 which supports multiple backgrounds but not SVG," so caveat emptor.
In reply to your comment below:
Your SVG looks like this right now:
<a href="index.htm">
<img src="Images/Poiple-Shadow.svg" width="32" height="32" alt="Poiple Shadow Charity Website" class="logo200">
</a>
In your stylesheet, you can add to class .logo200:
.logo200 {
background-image: url(Images/Poiple-Shadow.png); // make a png or jpg version of the image
background-image: url(Images/Poiple-Shadow.svg), none;
width: 32px; //give it width and height
height: 32px;
}
Now, instead of using an <img> tag, use a div:
<a href="index.htm">
<div class="logo200"></div>
</a>
The browser should show the SVG if it supports multiple backgrounds (and therefore svgs). If the browser does not support SVG, it likely doesn't support multiple backgrounds, so it will only show the first background-image property.
Well, this is a weird one.
I have web page with several svg images.
(I also detect not supported svg browsers and display a regular image instead, but I guess it is not relevant here).
Sometimes (I found it so far in Chrome OSX and Windows), the browser displays another svg instead of the one mentioned in the html .
Assuming I have to svg files linked from my page, logo.svg and logo2.svg, it might display logo2.svg intead of logo.svg.
I've inspected the elements , and all seems to be fine. HTML referes to one svg, while the browser displays a different svg (located on another part of the html) instead.
Any idea ?
<a href="Home">
<div style="float:left;width:170px;height:154px;">
<object class="svg-default" data="/images/logo.svg" type="image/svg+xml" style="width:100%; height:100%;z-index:1000;">
</object>
<img class="svg-fallback" src="/images/logo.png" style="width: 151px; height: 41px; display: none;">
</div>
</a>
Maybe you can dynamically insert the div element with the <object> as its child. And when you want to show another svg, remove the previous div & insert a new div with updated svg.
I have two google maps. The first is created using the Google Maps API (v3) and contained in #map1. The second is displayed in an iframe using the suggested embed syntax from Google and is contained in #map2.
Here's the fiddle: http://jsfiddle.net/wmcmeans/mPGWx/7/
Here are the snippets:
<div id="map1" class="gmap left bling"></div>
<iframe id="map2" class="gmap right bling" height="425" width="550" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?hl=en&q=augsburg+germany&ie=UTF8&hq=&hnear=Augsburg,+Bavarian+Swabia,+Bavaria,+Germany&t=h&ll=48.451123,10.862346&spn=0.004981,0.00912&z=16&output=embed"></iframe>
Here's the issue: Google Maps created from the v3 API do not respect the borders of the container having border-radius styling applied, when viewed in a webkit-based browser. The iframed (embed) method does not show the same deficiency.
Tested good:
FireFox v 19.0.2 (Windows 7)
FireFox v 32.0.3 (Windows 8.1)
IE9 v 9.0.8112 (Windows 7)
IE11 (Windows 8.1)
Failed on:
Chrome v 25.0.1364.160 m / Safari (Win/32) v 5.0.3 / Opera v 11.64 (Windows 7)
Chrome v 38.0.2125.104 m (Windows 8.1)
Version 2 maps are deprecated and not an option. I'd like to style v3 maps with CSS only, no graphics or overlays. I'm looking for a workaround to the webkit rendering issue. (I've already opened a Chromium Issue #187187 for this that, almost a year later, has yet to be looked at).
Here is the solution : http://jsfiddle.net/alxscms/3Kv99/
I am using several extra markups to achieve this, which I don't like so much but was the only possible way to me.
<div class="wrapper">
<div class="map" id="map"></div>
<i class="top"></i>
<i class="right"></i>
<i class="bottom"></i>
<i class="left"></i>
<i class="top left"></i>
<i class="top right"></i>
<i class="bottom left"></i>
<i class="bottom right"></i>
</div>
My goal was to have a inner border and rounded corners, but you can set the border thickness to 0 and you will have just the rounded corners on the map. This works on FF, Chrome and IE. I haven't tested on Opera or Safari.
This worked for me:
-webkit-transform: translate3d(0px, 0px, 0px);
-webkit-mask-image: -webkit-radial-gradient(white, black);
This appears to be fixed, so it's no longer an issue. You can verify that a map container's border-radius style is indeed respected, using the v3 map API, at this fiddle.
<div id="map3" class="gmap"></div>