CODEWITHSUNDEEP
htmlcsssvg
user4340635
user4340635

Reputation: 143

Same size SVGs not same size once on the page?

Working on this site for a school project, Heres the site in question: http://jmtestserver.net46.net/

As you can see the boxes on the right stick down further because of the images sizes being off. If you inspect the element, the working ones say 126x71 and the ones that are too big say 126x127 and I have no idea where the size difference is coming from.

I resized the images based on the working ones in illustrator like this gfy shows:

http://gfycat.com/ChillyFlawlessDrever

I dont know how to check the size of a SVG offline because I can only open it in illustrator but it appears to be the exact same size to me in illustrator but when I insert it in the web page it "grows" for some reason I have no clue despite it having the exact same CSS.

Any help would be appreciated, because I am getting caught up on very small stuff.

I guess: How can I check the size of an SVG offline, and what would cause it to "grow" like this?

Upvotes: 0

Views: 804

Answers (2)

AJ Meyghani
AJ Meyghani

Reputation: 4609

Quick fix:

photo_icon {
  /* remove margin top */
  height: 75px;
}

and make sure the canvas is the same for each AI file.

enter image description here

long answer

  • Use classes instead of ids. Create a single class called box to control your boxes.

  • Make a single canvas in Illustrator, and use the same canvas to export your svgs

  • Give your boxes a min-height depending on the highest box
  • Or use flexbox for equal height boxes

Extra space does come from the canvas size:

enter image description here

Upvotes: 2

Raúl Martín
Raúl Martín

Reputation: 4689

I usually use http://svg-edit.googlecode.com/svn/branches/stable/editor/svg-editor.html

Or you can edit viewport and viewbox value manualy. But you don't need. http://tutorials.jenkov.com/svg/svg-viewport-view-box.html

Upvotes: 1

Related Questions