CODEWITHSUNDEEP
htmlcsssvg
Hitokage
Hitokage

Reputation: 210

SVG Oversized on Load

I have a simple search icon as an SVG I'm using, but for some reason, when I load my webpage, it is huge despite a 24x24 lock in the CSS and in the styling of the SVG itself.

It spreads out and takes up the whole page until everything is done loading, then it snaps to the normal 24x24 size. It looks absolutely ridiculous and I know I have to be doing something wrong. Any ideas?

SVG:

<svg style="position: absolute; width: 0; height: 0;" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
    <symbol id="icon-search" class="icon" viewBox="0 0 24 24">
        <title>search</title>
        <circle class="st0" cx="9.3" cy="9.2" r="8.6" />
        <line class="st1" x1="15.3" y1="15.4" x2="23.3" y2="23.4" />
    </symbol>
</defs>

HTML:

<div class="searchContainer">
     <div class="search">
          <input class="image" type="image" src="images/search.svg"><input class="text" type="text" onfocus="if(this.value == 'Search') { this.value = ''; }" value="Search" onblur="if (this.value == '') { this.value = 'Search'; }">
      </div><!-- /search -->
</div><!-- /searchContainer -->

CSS:

input.image{
   fill: black;
   width: 24px;
   height: 24px;
   border: 0;
   padding-top: 9px;
   text-align: right;
}

Here is what I'm Seeing on Load.

Note that the other icons are also SVGs, but they are done in a single file with the method I couldn't use with the input for the search. 

<svg><use xlink></use></svg>

Any help appreciated. Thank you!

Upvotes: 9

Views: 10634

Answers (8)

Wolle
Wolle

Reputation: 491

Not the answer to the original question, but maybe it helps someone.

If you are using a CMS and FontAwesome as JS you maybe need to disable FA in edit mode so it does not replace the tags. Without the FA-Script loaded the stays in the content, not the .

Upvotes: 0

Wen Ma
Wen Ma

Reputation: 11

You will need to identify your width and height on the html dom. Also, try using the tags below

<object data="your_svg_path" width="57" height="57" type="image/svg+xml">
</object>

Upvotes: 1

Zechariah
Zechariah

Reputation: 1

Even better solution...

  1. Add style="display:none;" attribute inline to img tag(s).
  2. Use jQuery to .show() img once page is fully loaded.

  $( window ).load(function() {
  $('.container img').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div class="container">
<img src="https://www.zdmdesigns.com/images/zdm-logo.svg" style="display:none;">
</div>

Upvotes: 0

Leonardo Borsten
Leonardo Borsten

Reputation: 163

My solution is to have the opacity of the SVG element set to 0 and then set it to 1 after loading. 1. Add the opacity: 0; to the element or its parent in your CSS. 2. Optionally add a transition, like transition: 0.5s opacity; 3. Create a new class, let's say "loaded", with the opacity: 1; 4. In JavaScript add a line in the load event that adds the "loaded" class to the SVG element or its parent.

Upvotes: 0

ahbou
ahbou

Reputation: 4928

If you can load your svg inside an <img> tag then set the size of the img directly

 <img src="badge.svg" width="200">

Upvotes: 0

Prradox
Prradox

Reputation: 31

Load the SVG and style inline. If you put the tags above the tags it will remove the giant stutter on page load.

Upvotes: 0

jg314
jg314

Reputation: 616

You can solve this by adding the width and height attributes directly to the SVG. For example, your SVG might look something like this:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 225 225" width="20" height="20"> 
  <title>Search</title>
  <path fill="#fff" d="M225 202v8c-2.7 7.3-7.6 12.4-15 15h-8c-7.3-1.2-12.4-5.7-17.3-10.9-6.6-7-13.6-13.7-20.4-20.6-11.5-11.6-22.9-23.2-34.3-34.7-18 10.2-36.7 14.6-56.6 11.2-34.8-5.9-57.9-25.9-69.3-59.2C2 105.2 1.3 99 0 93V78c.3-.8.7-1.5.8-2.3C6.1 38.8 27 15 62.1 3.4 67.2 1.7 72.7 1.1 78 0h15c3.6.7 7.1 1.3 10.7 2C140 8.7 170 44.2 171.1 81.2c.5 17.2-3.3 33.3-12.5 49.2 1.3 1 3 1.9 4.2 3.2 17.1 17 34.1 34.2 51.3 51.2 5.1 4.9 9.7 9.9 10.9 17.2zM85.1 146.9c33 .5 61.5-27.3 61.9-60.4.4-33.7-26.7-61.5-60.6-62.2-33.3-.7-61.5 26.8-62.1 60.6-.6 33.3 27 61.5 60.8 62z"/>
</svg>

Note where it says width="20" height="20" specifically. That will limit the SVG size when the image loads. Then you can adjust the height and width using CSS as needed.

Upvotes: 7

user6129967
user6129967

Reputation:

Put the SVG IMG element inside a div and then size the div and the img appropriately...

<div id="logo">
  <img id="logo_img" src="assets/images/logo.svg">
</div>

  #logo {
    display: block;
    height: 50px;
  }
  #logo_img {
    height: 50px;
    width: 200px;
  }

Upvotes: 1

Related Questions