SVG Shape Warped?

[d'Anconia]

Okay so I am using table headers and PHP in order to create up and down arrows that appear when re-sorting a table. For some reason the small triangles / arrows become warped when actually implemented in the HTML code. I didn't seem to have this issue back when I was using PNG.

Here is my code:

<div id="content" ><h2>View Submitted Entities</h2><p>There are currently <b>28</b> submitted entities.</p>
<table align="center" cellspacing="1" cellpadding="1" class="content_div" width="95%" style="box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.2);">
		<thead class="thead_template"><th class="th_template" align="center">
                    <a style="color:white" href="view_entities.php?sort=name_asc"><b>Name </b></a></th>
                <th align="center" class="th_template"><a style="color:white" href="view_entities.php?sort=entity_location_desc"><b>Country </b><object data="images/sort_asc_white.svg" height="8px" type="image/svg+xml" ></object></a></th>
                <th align="center" class="th_template"><a style="color:white" href="view_entities.php?sort=created_by_username_asc"><b>Created By </b></a></th>
                <th align="center" class="th_template"><a style="color:white" href="view_entities.php?sort=date_of_creation_desc"><b>Date Created </b></a></th></thead>

When I sort / resort the images look like the following (zoomed in):


and


Yet when I open them in Inkscape as SVG files and add a grey background (so you can actually see them), I see the following:


and


What is going on here? I am using Google Chrome.

[DrDOS]

Try the embed tag, or you may be able to use a standard img tag.

Added note; It occurs to me now that you have probably not put anything in your style sheet to set the size. You could maybe put in style for object, or embed, or whatever, or give them a class name.

[d'Anconia]

I will try in a bit, thank you. Been pretty busy the last few days. Will get back to you when I try it out.