Create svg image of fluid
I am trying to render an svg image in a liquid website, so I need to rescale it when the browser is smaller / larger, but I haven't had much success. Any suggestions would be really appreciated
Thank you! here is my code:
<div class="five columns" id="logo">
<svg width="300" height="160">
<image xlink:href="/Users/MaxRuizTagle/Desktop/guardado por illustrator/logoprobando.svg" src="" width="270" height="200"/>
</svg>
</div>
CSS
#logo {
position: absolute;
top:-35px;
}
+3
source to share
1 answer
While you can install height
and width
in SVG, you really need to set the viewing window to resize ...
<svg width="300" height="160" viewBox="0 0 300 160">
... this will ensure that the inner scale is aligned with your defined height
and width
.
Here's an awesome article: http://tutorials.jenkov.com/svg/svg-viewport-view-box.html
+1
source to share