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:
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.