I want to know how can one actually use a .svg file In a web page?
See svgweb quickstart and the svgweb project homepage for something that works in all browsers including IE (requires flash plugin).
There are many ways to include an existing svg file:
<img src="your.svg"/>
<object data="your.svg"/>
<iframe src="your.svg"/>
<embed src="your.svg"/>
<div style="background:url(your.svg)">...</div>
If all you want to do is to place an SVG image such as a logo or static diagram, you just need to be careful to provide a fallback for older versions of Internet Explorer (i.e. versions 8 and earlier).
The best and simplest method I've found is to use a .png or .jpg for your fallback, placed using a normal img tag. You then wrap the img tag in an object tag, using the data attribute to place the SVG.
<object data="/path-to/your-svg-image.svg" type="image/svg+xml">
<img src="/path-to/your-fallback-image.png" />
</object>
The img fallback is only loaded and used if the browser doesn't understand SVG.
I recommend putting the svg inline into your document (html5 technique). Just open your SVG file, copy the SVG tag and everything insideof it and then paste it into your html document.
<html>
<body>
<svg></svg>
</body>
</html>
It has the advantage that this allows you to use css to style it, like changing the fill color or applying filters to it like blur. Another advantage is that you save one http request for fetching the svg file if it is inside of your document.
If you want for example to change its position using css, then you have to put the css inside of a style attribute. Styles that are in an external css file will not get applied in most browser as this is a security restriction. For example:
<svg id="mySVG" style="position: absolute; top: 200px; left: 200px;"></svg>
This technique is supported by all browsers except IE8 and below as well as the android 2.3 browser and below.
Read the chapter inline SVG for further details:
css-tricks.com Using SVG
developer.mozilla.org SVG In HTML Introduction
If you dont want to put it inline in your page then the best alternative seems to be the object tag and avoid using the embed tag.
Read this for further details about object vs embed vs img tag:
How to Add Scalable Vector Graphics to Your Web Page
http://www.w3schools.com/svg/svg_inhtml.asp
The best example:
<embed src="rect.svg" width="300" height="100"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
Caspar's approach is the proper one. However, I would move the fallback to the CSS, since you probably want to apply some styles to the svg file itself...
<object data="/path-to/your-svg-image.svg" type="image/svg+xml" class="logo"> </object>
CSS
.no-svg .logo {
width: 99px;
height: 99px;
background-image: url(/path-to/your-png-image.png);
}`
Raphaël—JavaScript Library. Nice javascript library that is using svg, and gives you a large range of effects!
Also supports most browsers, including IE
I'd like to agree with the answer from "code-zoop". Although this technically doesn't answer your question, it might also be a solution: enter the relevant data straight into the HTML. Either directly as an svg element, or by using Raphaël-JS.
From w3c-schools:
SVG is all suported in In Firefox, Internet Explorer 9, Google Chrome,
Opera, and Safari you can
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
</body>
</html>
(end of quote)
And to think even more outside the box, depending on how you want to use it, you can also put your 1-color graphics in a webfont. (see for example iconmoon.io )
Related
i have a pdf form that i need to be able to import as a background then use Dompdf to overlay html/text.
can this be done?
thanks
Dompdf is a library for converting HTML -> PDF. I'm no expert on that particular library but as far as I can tell it doesn't do things like overlaying html/text.
PDF cannot be imported into HTML because it isn't an HTML format and it isn't an image. There might be a parser library somewhere (e.g. http://www.pdfonline.com/easyconverter/sdk/pdf-to-html/), but without your own fairly extensive work you wont get that PDF document to be displayed in HTML.
HOWEVER, you CAN use something like this, it'll show your PDF document as the background, create a div that covers the screen just above the PDF document to make it non-interactive, then you can put all your contents above that. Note that there will be controls showing on the sides which as far as I know can't be prevented since they're provided by the browser when displaying a PDF file (you could use some fancy JS/CSS to prevent it I'm guessing but I don't know exactly how off the top of my head).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PDF as background</title>
</head>
<body>
<iframe src="http://unec.edu.az/application/uploads/2014/12/pdf-sample.pdf" style="width: 100vw; height: 100vh;position:absolute;top:0;z-index:0;"></iframe>
<div style="position:fixed;width:100%;height:100%;z-index:1"></div>
<div id="content" style="position: absolute;top:50%;left: calc(50% - 4cm);z-index:2">
<h1 style="font-size:20px;background:#00ff00;">I am on top of the PDF document!</h1>
</div>
</body>
</html>
I am using Laravel-Snappy for generating pdfs with wkhtmltpdf. I want to add a border in all pages that are created in the pdf file. At the moment, I have added this to the css:
body.pdf {
border: 1px solid #000;
}
My pdf html is like this:
<html>
<head>
<title>{{ $title }}</title>
</head>
<body class="pdf">
.....
</body>
</html>
With the above css, the border shows fine if it is a single page pdf. However, when it has multiple pages, the border breaks at the bottom of the first page and no more border shows from page 2 onwards after the page-break. I also read the documentation and I dont think there is an feature to add borders using setOption().
Is there a way to resolve it so the border appears in all pages when pdf is generated?
Please take look at here, you can find all available options available including border.
You didn't mentioned how you used page break.
I am using this way
div.page
{
page-break-after: always;
page-break-inside: avoid;
}
Working fine for me
I am trying to add an image in the header of my jQuery Mobile based web page.
I want the image to be aligned to the right edge and using CSS for this purpose. But the results are not satisfactory.
(Problem*)There is a big gap between the image and the edge and it is also not aligned with the header text.
Here is the header code:
<header data-role='header'><h1>My App<img src="my_logo.png" alt="Low resolution logo"class="align-right"/></h1></header>
and here is the CSS code for class align-right:
.align-right{
float:right;
margin-right: 5px;
}
No need to add custom styling or such. Jquery-Mobile already has built-in solutions for this. Just add the class 'ui-btn-left' or 'ui-btn-right' to your image (as if it were a button) and you're all set.
<header data-role="header">
<h1>My App</h1>
<img src="my_logo.png" class="ui-btn-right" />
</header>
I know the question has been asked way before, but I figured this might help those who are still looking for solutions. Besides, the question wasn't set as answered.
Based on your code example, you need a space between the alt attribute and the class attribute.
You have:
alt="Low resolution logo"class="align-right"
Should be:
alt="Low resolution logo" class="align-right"
Also, it is probably better to not have the <img /> tag inside of your <h1> element.
Check out the docs for more information on custom headers: http://jquerymobile.com/test/docs/toolbars/docs-headers.html
Something like this should work:
<head>
<style>
body{ margin: 0; }
.align-right{ float:right; margin-right: 0px;}
</style>
</head>
<body>
<div data-role='header'><h1>My App<img src="my_logo.png" alt="Low resolution logo"class="align-right"/></h1></div>
</body>
In my case, I was using a link as a button in my Header, and I wanted the same results where the image would show in the top right corner. I also wanted additional attributes added to the image such as no text, no corners, no disc, etc. Using ui-btn-right alone broke those other attributes. The fix was to include both ui-btn and ui-btn-right to the class, as shown below:
Options
In HTML it is recommended to seperate Content from Style, thus you should create external CSS-Files for your styles. As I am just getting started with SVG I now wonder: Does this rule also apply for SVG?
What is considered better code style?
<circle fill="yellow" />
or <circle style="fill: yellow;" />
I arrived here because I was trying to remember whether attributes or styles have greater precedence. This is one practical reason why you'd want one over another.
Attributes get applied as "presentation hints", as if they were the first of the cascading style sheets. In other words, this gives them lowest precedence.
Thus the precedence, from lowest to highest, is
attributes
CSS style sheets
inline styles
It's a little confusing that an inline style has much greater precedence than the attribute it's next to. (I keep having to look this up!)
There aren't going to be any new presentation attributes, and we are encouraged to use CSS styling instead, but it doesn't sound like presentation attributes are going away anytime soon.
More detail can be found in the Presentation Attributes section of the Styling chapter of the SVG standard.
I would generally prefer <circle fill="yellow" /> to <circle style="fill: yellow;" /> because it's shorter and easily to manipulate with, for example, getAttributeNS(null, "fill").
But over that I would prefer using a separate style element, just as with HTML, e.g:
<style>
circle{
fill: yellow;
}
</style>
Which has all the same advantages of using CSS, such as making it easy to change the stlye of lots of elements at once.
You can also put your CSS in an external file and add:
<?xml-stylesheet type="text/css" href="your_CSS.css" ?>
Before the svg element.
I have found Presentation Attributes vs Inline Styles on css-trick really useful for this.
From it:
The difference is always if it's content or it's presentation.
If the circle is content and it has to show whether or not there css available, then the first option is the one.
But if the circle is just part of the site disign and doesn't add anything to the content, then it should be the second option. Or use a css class.
I have a site that creates images for some bit of content after the content is created. I'm trying to figure out what to do in between the time the content is created and the image is created. My thought is that I might be able to set a custom image to display on a 404 error on the original image. However, I'm not sure how to do this with lighttpd. Any ideas or alternatives?
EDIT: The issue is the user isn't the one creating the content, it's being created by a process. Basically we are adding items to a catalog and we want to create a standardized catalog image from an image supplied by the product provider. However, I don't want a slow server on the provider end to slow down the addition of new products. So a separate process goes through and creates the image later, where available. I guess I could have the system create a default image when we create the product and then overwrite it later when we create the image from the provider supplied image.
Another alternative on the client side is to do:
<img src="/images/generated_image_xyz.png"
onerror="this.src='/images/default_image.png'; this.title='Loading...';" />
Use the <object> tag in HTML with a fallback to the default image.
<P> <!-- First, try the Python applet -->
<OBJECT title="The Earth as seen from space"
classid="http://www.observer.mars/TheEarth.py">
<!-- Else, try the MPEG video -->
<OBJECT data="TheEarth.mpeg" type="application/mpeg">
<!-- Else, try the GIF image -->
<OBJECT data="TheEarth.gif" type="image/gif">
<!-- Else render the text -->
The <STRONG>Earth</STRONG> as seen from space.
</OBJECT>
</OBJECT>
</OBJECT>
</P>
(Example from w3.org)
As I understand your problem: You want to show an intermediate image until the real image has been generated?
You could display a loading image and use AJAX to change that DOM node into the real image when it's been created. You could write it from scratch or use any of the well known and stable AJAX libraries out there, if you have no preference of your own take a look at jQuery.
Further to #kentlarsson - if you want to do it via Javascript, I recently found this code:
http://jquery.com/plugins/project/Preload and the demo at http://demos.flesler.com/jquery/preload/placeholder/ which does as he suggests - with its 'notFound' option.
I don't know enough about lighttpd to tell you about setting up a custom image with one or more subdirectories in a site though.
I think you could probably solve this on the client side alone.
Based on Jaspers' answer, you could do:
<OBJECT data="/images/generated_image_xyz.png" type="image/png">
Loading..<blink>.</blink>
</OBJECT>
Also layering backgrounds using CSS you could do:
<style type="text/css">
.content_image { width:100px; height: 100px;
background: transparent url('/images/default_image.png') no-repeat }
.content_image div { width:100px; height: 100px; }
</style>
<div class="content_image">
<div style="background:
transparent url('/images/generated_image_xyz.png') no-repeat" />
</div>
The latter solution assumes you don't have any transparency in your generated image.