I'll admit right off the bat i'm very new to SVG graphics in html. That said i'm attempting to upgrade my site images to SVG's where appropriate.
I started with this code:
<svg class="logo">
<image
class="logo"
xlink:href="https://cdn.badmonsterarts.com/main_logo.svg"
src="https://cdn.badmonsterarts.com/main_logo.png"
/>
</svg>
Which works fine in chrome and firefox, however when tested on Safari(Both mobile and desktop) it rendered as a blank rectangle. That said I did some research and tried some stack overflow answers which brings us to my current code:
<svg
class="logo"
viewBox="0 0 256 75"
xmlns="http://www.w3.org/2000/svg"
role="img"
>
<image
class="logo"
xlink:href="https://cdn.badmonsterarts.com/main_logo.svg"
src="https://cdn.badmonsterarts.com/main_logo.png"
/>
</svg>
The problem however is this still works in chrome and firefox, but I still can't get it to render in Safari.
Here's the CSS i'm using to size it, logo wrapper is a div surrounding the SVG as a warpper:
.logo-wrapper {
width: 256px;
height: 75px;
overflow: hidden;
.logo {
width: auto;
height: 100%;
}
}
I've also tried using <use ... /> instead of <image ... /> with no luck either, when I used <use ... /> it didn't even render in chrome. I'm hoping one of your brilliant minds can lead me in the right direction and save my sanity.
If it helps anyone debug this, there's a link to the site that the SVG is being used on(The logo in the top left on the nav bar).
https://www.badmonsterarts.com/
Thanks!
If you set the image width and height to 100% of the viewBox it ought to work (I took the viewBox values from the external SVG).
By only setting the viewBox you make the SVG responsive – why you can leave out the logo class
.logo-wrapper {
width: 256px;
height: 75px;
overflow: hidden;
}
<div class="logo-wrapper">
<svg viewBox="0 0 679 200">
<image width="100%" height="100%" xlink:href="https://cdn.badmonsterarts.com/main_logo.svg" />
</svg>
</div>
I have a text and an image side by side with a little margin in the middle. I want to draw an arrow to a specific point on the image.
So for this I trying to use svg however, the position of the line is somehow not responsive. After reading a couple of questions here (like this) and blog posts (like this) I changed all the values to % and also added the viewBox attribute But for some reason the arrow is only in the correct position with my current browser screen 1920x1200. If I resize the browser window the arrow is at an incorrect position. My code:
html:
<div id="a">
This is the nose
</div><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 2000 2000" preserveAspectRatio="none">
<line x1="9%" y1="9.5%" x2="23%" y2="6%" marker-end="url(#triangle)" stroke="black" stroke-width="0.2%"/>
</svg>
<img src="http://www.hickerphoto.com/images/200/little-polar-bear_29287.jpg" />
css:
#a{
position: absolute;
margin-top: 8%;
}
svg{
position: absolute;
z-index:2;
}
img{
margin-left: 20%;
position:relative;
z-index:1;
}
Here is a fiddle
Anyone an idea why this is not working?
Is svg the even the right attempt here or should I use something else?
SVG viewBox
Making SVGs Responsive with CSS - Tympanus
SVG text and Small, Scalable, Accessible Typographic Designs
SVG image element
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 2000 2000" preserveAspectRatio="none">
<image x="20" y="20" width="132" height="200" xlink:href="http://www.hickerphoto.com/images/200/little-polar-bear_29287.jpg" />
<text x="25" y="55" font-family="'Lucida Grande', sans-serif" font-size="32">This is the nose </text>
<line x1="9%" y1="9.5%" x2="23%" y2="6%" marker-end="url(#triangle)" stroke="black" stroke-width="0.2%"/>
</svg>
I found one solution, not sure if this is a good one, please correct me.
First of all I removed the viewBox attribute. Then I made the image also responsive by giving it a relative width and height: auto;. Lastly I also made the font-size responsive in the css through:
body{
font-size: 12pt;
}
a{
font-size: 1.5vh;
}
Works when I resize the browser. Here the fiddle . Please correct me if I'm wrong.
I have a webpage where I will repeat the logo of my company several times - one time in big size, white logo ; one time in small size, white logo ; one time in small size, orange logo.
For now I'm using JPG files - all good with 3 JPGs.
But I wonder whether I can use SVG for this use case, ideally without duplicating the SVG code within the page.
Would you have any clue?
Thanks,
Nicolas
Maybe this can serve as an inspiration for you: I'm embedding a bogus logo inside the HTML and using CSS to scale and color it differently. This is the HTML:
<h1>my page</h1>
<div class="big logo" title="big logo">
<svg id="logo" viewBox="0 0 50 50">
<rect x="1" y="1" stroke-width="2" width="48" height="48"/>
<circle cx="25" cy="25" r="23" fill="currentColor"/>
</svg>
</div>
<div>some text on my page and a small logo</div>
<div class="logo">
<svg id="smallLogo">
<use xlink:href="#logo"/>
</svg>
</div>
<div>some more text on my page and a differently colored logo</div>
<div class="yellow logo">
<svg id="smallLogo">
<use xlink:href="#logo"/>
</svg>
</div>
And the CSS:
.logo > svg {
fill:green;
stroke:blue;
color:red;
height:75px;
width:75px;
}
.big.logo > svg {
height:200px;
width:200px;
}
.yellow.logo > svg {
fill:yellow;
color:orange;
stroke:black;
}
See example on jsFiddle. Unfortunately, this only seems to work with Firefox and Chrome. Neither Opera nor Internet Explorer seem to like this (also not the new versions 9 and 10). Didn't try Safari.
So, I guess, unless you want to restrict the viewers to Webkit and Firefox browsers or use JavaScript to duplicate the SVG and modify certain attributes of the different instances, you're better off with either three different JPEG files (PNG would be better), or two different SVG files (in two different colors -- you can obviously rescale without problems).
If you don't need to use the image as a CSS background, then it's possible to use the SVG Stacks technique to do this.
Here's an example, a single svg file that contains several different icons, where the size of the image also decides how the svg looks.
Here's a part of that svg file to illustrate:
<?xml version="1.0" encoding="utf-8"?>
<svg id="icon" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style>
svg .icon { display: none }
svg .icon:target { display: inline }
/* media-queries can control the appearance too */
#hours {
fill:none;
stroke:#850508;
stroke-dasharray:1,5.28;
stroke-dashoffset:0.5;
stroke-width: 1.5px;
}
#media screen and (max-width: 128px) {
#hours {
stroke-dasharray:1, 17.84;
stroke-width: 2px;
}
}
#media screen and (max-width: 64px) {
#hours {
stroke-dasharray: none;
}
}
/* shared styles */
.icon * { fill: #850508; }
</style>
</defs>
<svg viewBox="0 0 32 32">
<g id="clock" class="icon">
<path d="M16,4c6.617,0,12,5.383,12,12s-5.383,12-12,12S4,22.617,4,16S9.383,4,16,4 M16,0 C7.164,0,0,7.164,0,16s7.164,16,16,16s16-7.164,16-16S24.836,0,16,0L16,0z"/>
<path d="M21.422,18.578L18,15.152V8h-4.023v7.992c0,0.602,0.277,1.121,0.695,1.492l3.922,3.922
L21.422,18.578z"/>
<path id="hours" d="M16,4c6.617,0,12,5.383,12,12s-5.383,12-12,12S4,22.617,4,16S9.383,4,16,4"/>
</g>
</svg>
<svg viewBox="0 0 32 32">
<g id="star" class="icon">
<polygon points="22.137,19.625 32,12 20,12 16,0 12,12 0,12 9.875,19.594 6,32 16.016,24.32 26.008,32"/>
</g>
</svg>
</svg>
Each icon can have a unique look with different colors, gradients etc (in my example all the icons share the same fill, but they don't have to do that).
I am using SVGs, and for some reason, the height is set to 289 px by the user agent stylesheet.
I dont want to define the height, as I will be using many SVGs (like at least 256), and dont want to set different css rules manually for each of them by using !important.
So how do I adjust the user stylesheet (using Chrome) or reset the height field for SVGs!, so that it is not defined?
example SVG HTML: (SVG height is 25 px, yet the svg Bounding box renders to 289)
<div id="measure<%= measure.cid %>" class="measure">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="10" y="10" width="250" height="25" style="stroke:black; stroke-width:2; fill:lightgray;" />
<div id="<%= beatHolder %>">
</div>
</svg>
</div>
When trying Alex W's answer, I get this:
Can't you just add the rule to your stylesheet?
<style type="text/css">
...
svg { height: auto !important; }
</style>
You want to put that rule at the very bottom of the style tags to make sure it takes priority.
Also, in your code example it seems you are setting the rect to be 25 pixels, but not the actual <svg> element.
Okay so after playing with your example, I've come up with an answer for you. When using svg its computed style height is set from its parent element, so with that being said you would have to place your svg inside a div that has a width and height so I made a quick little example of how this would be used, so lets say we want to put a svg as a logo and then one for a banner or something we would accomplish this by doing your svg like this,
CSS
.logo {
width: 250px;
height: 27px;
}
.navigation {
width: 960px;
height: 54px;
}
HTML
<div class="logo">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="250" height="25" stroke="black" stroke-width="2" fill="lightgray" />
</svg>
</div>
<div class="navigation">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="960" height="50" stroke="black" stroke-width="2" fill="lightgray" />
</svg>
</div>
I need to have my svg within div's as follows:
<div style="height:100px; width: 300px; border:1px solid red;" >
<div style="width: 100%; height: 100%; display: table;">
<div style="display:table-row; height:100%">
<div style="position: relative; vertical-align: middle; height:100%;">
<div style="vertical-align: middle; position: relative; margin: 0px auto; height:100%;">
<svg viewBox="0 0 485 255" id="damageCanvas" style="vertical-align: middle;" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1" fill="rgba(124,240,10,0.5)" height="100%" width="100%">
<g transform="translate(1,1)">
<rect stroke="black" stroke-width="1.5" width="99.5%" height="99.5%" fill-opacity="0" style="padding: 2px 2px 2px 2px"></rect>
</g>
</svg>
</div>
</div>
</div>
</div>
</div>
The problem is that the following SVG is rendered in different browsers in different ways.
Chrome:
Firefox:
IE 9:
I want the image to be scaled as in chrome version. How can i achieve this?
Fiddle: http://jsfiddle.net/Sq5bL/5/
You can save your SVG in a file and use it as a resource, via <img> or <embed>. I've used both and it scales nicely. <img> stops you from accessing the SVG, so if you need access to the SVG then I would recommend using <embed>.
In my case I did:
<embed id="gaugeSpeed" class="gaugeImage" width="200" height="200" type="image/svg+xml" src="assets/gauges/speed.svg">
and it scaled it nicely. Same for when I use SVG with the <img> tag. I've tested on Transformer Prime and Nexus 7 running both ICS and Jellybean, works fine.
Should work fine with your parent div as well, as it's just treated like a normal img or object.
Well, since you would like to keep your SVG... your problem is caused by the use of the
display: table
on the second div. If you change that to a table-cell or remove it then your problem is resolved.
This is a JSFiddle that shows it working with table-cell