I am new to the whole SVG and imagemagick, so still learning things as I go. I have this image in a svg format, which I would like to convert to png. This is how the SVG looks like when opened using Chrome:
The original SVG file also has some white spaces, which I would like to trim out. After doing some searching, I found out the "trim" option that can be used in "convert".
I tried the following:
convert -trim example_image.svg example_image.png
Which seems to trim out any unnecessary white spaces and most of the SVG file is converted. However, the text portion of this image is no longer visible in the png file:
I went through some forums and most of them seems to suggest to start by checking the DELEGATES section that I can read using "convert -list configure", and look out for tags such as "freetype" and "gs". So it seems like those two tags are available. Is there anything else I could do to diagnose the issue? I don't necessarily generate these SVG files (it is generated by one of the colleagues at work), so not sure where to look exactly. However, I am attaching a snippet of the SVG "code" that prints the text portion. I hope this might help somebody diagnose the issue:
<g transform="translate(0, 480)">
<g transform="translate(50.000000, 0)">
<switch x="0" y="0">
<foreignObject height="300" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" width="1150">
<p style="font-family: Arial; font-size: 20px" xmlns="http://www.w3.org/1999/xhtml">Figure 1. Putative Fusion-translocation event. The 5' (in the fusion) transcript EWSR1-001(ENST00000397938) from the gene EWSR1(ENSG00000182944) on the forward strand is drawn top left with its corresponding breakpoint at 22:29684366. The 3' (in the fusion) transcript FLI1-004(ENST00000525560) from the gene FLI1(ENSG00000151702) on the forward strand is drawn top right with its corresponding breakpoint at 11:128664210. Exons are drawn to scale relative to other exons in the same drawing. Introns are scaled to make up approximately 1/4th of the final drawing. This is predicted to be an IN-frame fusion. Domains include: </p>
<div style="display: table; font-family: Arial; font-size: 20px" xmlns="http://www.w3.org/1999/xhtml">
<div style="display: table-row; font-family: Arial; font-size: 20px; font-weight: bold" xmlns="http://www.w3.org/1999/xhtml">
<div style="display: table-cell" xmlns="http://www.w3.org/1999/xhtml">Domain Name</div>
<div style="display: table-cell; padding-left: 20px" xmlns="http://www.w3.org/1999/xhtml">External identifier(s)</div>
</div>
<div style="display: table-row; font-family: Arial; font-size: 20px" xmlns="http://www.w3.org/1999/xhtml">
<div style="display: table-cell; font-family: Arial; font-size: 20px" xmlns="http://www.w3.org/1999/xhtml">Ets</div>
<div style="display: table-cell; font-family: Arial; font-size: 20px; padding-left: 20px" xmlns="http://www.w3.org/1999/xhtml">PF00178</div>
</div>
<div style="display: table-row; font-family: Arial; font-size: 20px" xmlns="http://www.w3.org/1999/xhtml">
<div style="display: table-cell; font-family: Arial; font-size: 20px" xmlns="http://www.w3.org/1999/xhtml">RRM_dom</div>
<div style="display: table-cell; font-family: Arial; font-size: 20px; padding-left: 20px" xmlns="http://www.w3.org/1999/xhtml">PF00076</div>
</div>
<div style="display: table-row; font-family: Arial; font-size: 20px" xmlns="http://www.w3.org/1999/xhtml">
<div style="display: table-cell; font-family: Arial; font-size: 20px" xmlns="http://www.w3.org/1999/xhtml">Znf_RanBP2</div>
<div style="display: table-cell; font-family: Arial; font-size: 20px; padding-left: 20px" xmlns="http://www.w3.org/1999/xhtml">PF00641</div>
</div>
</div>
</foreignObject>
</switch>
</g>
Your help would be greatly appreciated.
Related
I'm looking to render html by passing a string to Responsys.
DynamicVariable.TEXT would be a string that looks like:
<button style="background-color: red; color: white; padding: 25px; border-radius: 4px; border: none; font-size: 18px; font-weight: bold">
Click Here
</button>
I've tried using ?html
<body bgcolor="white" style="margin: 0px; padding: 0px;">
${DynamicVariable.TEXT?html}
</body>
Also tried <#escape x as x?html>:
<body bgcolor="white" style="margin: 0px; padding: 0px;">
<#escape x as x?html>
<#noescape>${DynamicVariable.TEXT}</#noescape>
</#escape>
</body>
As well as <#noescape>
<body bgcolor="white" style="margin: 0px; padding: 0px;">
<#noescape>${DynamicVariable.TEXT}</#noescape>
</body>
but none of these work. Any help would be greatly appreciated!
I found the answer.
Using <#noescape> is correct. However, the code was not rendering because you need to leverage a document that is saved in the Content Library within Responsys.
<body bgcolor="white" style="margin: 0px; padding: 0px;">
<#noescape>${DynamicVariable.TEXT}</#noescape>
</body>
i am trying to build a responsive website using bootstrap and dreamweaver.
I would like to place an image in my navbar, and place a text link over the image. Im having some trouble getting the text to sit over the image.
Any help would be greatly appreciated.
Here is the source code:
</head>
<body>
<nav class="navbar navbar-fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">
<img src="files /button images/swirl 1 11.svg" alt="" width="130" class="d-inline-block align-top">
Tom
</a>
</nav>
Here is my own css sheet i linked to override bootstarps:
body{
background-color:#F00;
}
nav a{
font-size: 24px;
font-family: Arial, Helvetica, sans-serif;
color: #000;
background-color: transparent;
font-style: normal;
}
In that case, you need to add a bit of custom css like so:
.navbar-brand {
background: url("https://placeimg.com/130/40/animals") no-repeat center;
background-size: cover;
min-width: 130px;
}
Replace that with your SVG and you should be good to go.
That creates a background image for the element with the navbar-brand class.
I'm trying to add some text over an image. I've set the position of the image to relative and the position of the text is absolute. It's working completely fine in Firefox but not in Chrome.
All I see in Chrome is an image.
Can anybody help me out in this ?
My code:
<p class="call text-right hidden-xs tel">
Call: 1-800-378-7566
</p>
<img src="img/slider/slider01.jpg" alt="" title="" style="margin-top:-28px; position:relative;" />
this could help you.
added
<p class="call text-right hidden-xs tel">
<a href="tel:+18003787566" style="position: absolute;
top: 50px;
left: 10px;
padding: 6px;
background-color: #292D30;
font-size: 26px;
padding-left: 100px;
padding-right: 127px;
z-index: 999;">Call: 1-800-378-7566</a>
</p>
Added top and left position as well as added z-index.
See the example
http://jsfiddle.net/nanduh/wo2eyhp6/
Why this image is not centrally align?
<div style=" width:70%; margin:0 auto; padding:0.2%; border:1px solid #000; ">
<img src="images/social.png" width="227" height="68" style="border:1px solid #000;
border-radius:5px; width:auto; margin:0 auto; display:block;" /></div>
Its the simple question. Any quick solution please.
Thanks,
Its simple try using line height property and set its value in px equivalent to the height of the container e.g
//container
<div class="container" align="center">
<img src="http://static.adzerk.net/Advertisers/46a9844d6e504212a85bc72ddd7dd829.png" width="40" height="40">
</div>
//css
.container{
width:200px;
height:200px;
line-height:200px;
border:1px solid #666;
margin:0 auto;
}
This works fine in Webkit, but when I go to Firefox (Or IE8) it totally messed up. I've been staring at this for so long that I can't find any errors at all with it, so maybe one of you guys can point out where I'm going wrong.
CSS:
body {
font-family: Georgia, serif;
margin: 0px;
padding: 0px;
background: #222;
}
header {
background: #fff url('images/header-border.gif') bottom repeat-x;
width: 980px;
margin: 0px auto;
height: 100px;
padding: 0px 0px 0px 20px;
-moz-border-radius-topright: 4px; -moz-border-radius-topleft: 4px;
-webkit-border-top-right-radius: 4px; -webkit-border-top-left-radius: 4px;
border-top-right-radius: 4px; border-top-left-radius: 4px;
}
section {
}
article {
}
footer {
clear: left;
}
nav {
width: 980px;
margin: 0px auto;
height: 70px;
padding: 10px 0px 10px 0px;
font-size: 21px;
font-weight: bold;
font-family: Arial, serif;
}
nav a {
color: #fff;
text-decoration: none;
padding: 10px;
}
nav a:hover {
background: #060606;
}
#content {
width: 980px;
background: #fff;
padding: 0px 0px 0px 20px;
margin: 0px auto;
}
nav ul li {
float: left;
list-style: none;
width: 155px;
}
#left-column, #logo {
width: 560px;
margin: 0px auto;
float: left;
}
#right-column, #share {
width: 380px;
margin: 0px auto;
float: left;
height: 100%;
padding: 0px 0px 0px 20px;
border-left: 1px solid #d9d9d9;
}
address {
display: inline;
}
a img {
border: 0px;
}
.clear-left {
clear: left;
}
And the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="text/html; charset=UTF-8" />
<title>Webtint </title>
<link rel="stylesheet" href="http://localhost/wp-content/themes/clean/style.css" type="text/css" />
<link rel="pingback" href="http://localhost/xmlrpc.php" />
</head>
<body>
<nav>
<ul>
<li>home</li>
<li>tutorials <img src="http://localhost/wp-content/themes/clean/images/arrow.gif" alt="Arrow" /></li>
<li>resources <img src="http://localhost/wp-content/themes/clean/images/arrow.gif" alt="Arrow" /></li>
<li>articles <img src="http://localhost/wp-content/themes/clean/images/arrow.gif" alt="Arrow" /></li>
<li>contact</li>
<li>follow us</li>
</ul>
</nav>
<header>
<section id="logo">
</section>
<section id="share">
</section>
</header>
<div id="content">
<section id="left-column">
<article>
<h2>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
<?php the_title(); ?>
</a>
</h2>
<time><?php the_time('F jS, Y') ?></time> by <address><?php the_author(); ?></address>
<?php the_excerpt(); ?>
<br /><br />
Read More
<?php comments_popup_link(
'<span class="boxed">No Responses »</span>',
'<span class="boxed"> 1 Response »</span>',
'<span class="boxed">% Responses »</span>'); ?>
</article>
<hr />
</section>
<section id="right-column">
<h2>Popular Posts</h2>
</section>
</div>
<footer>
</footer>
</body>
</html>
Screenshot in Firefox:
http://imgur.com/wvhI0.gif
Screenshot in Chrome: (How it's supposed to look)
http://imgur.com/sQK8S.gif
Screenshot in IE8:
http://imgur.com/7OnEJ.gif
Thanks for any help in advance :)
Basically, you're using mostly HTML5 specific elements, and they're not supported everywhere properly yet, especially IE8 out of those you listed.
For a quick look, Here's the list of elements added in HTML5.
Try using a debug tool like Firebug or the IE developer toolbar to figure out which elements are being placed wrongly and why.
Both let you hover your mouse over blocks and will highlight the corresponding HTML. You will be able to see exactly which element it is that is being placed incorrectly, and view the CSS to try and figure out why.
Johnny, does your solution also fix the incorrect rendering in Firefox 2 and Camino 1? Interesting, as I only know of the Javascript solution. Just to give you some more feedback on this: to learn more about getting HTML5 rendered properly in all major browsers, read this article by Nico Hagenburger. You can also use this script to render HTML5 in IE.
A more general article about HTML5 and CSS3 support in IE (e.g., your corners aren't rounded) in this article. For rounded corners in all major browsers (also in Opera) please read this one. There also exist general tables about support in all major browsers of HTML5 and CSS3.
EDIT: I just read an article about HTML5 pages not rendered properly when printing from within IE, because this JavaScript solution isn't loaded when printing a page. More info on doctype.com.