Scrolling & zooming SVG Viewer on Windows? - windows

We need to view some very large (7200+ pixels) SVGs. Every SVG viewer I've found, including modern web browsers, does not allow us to view the entire image. There aren't any scrollbars, and we do not have the option to zoom.
Is an open source / free application available that could help with viewing the entire SVG image? Thanks!

If you really do mean SVG, Inkscape should work.

You need to add viewBox attribute to the <svg> element and wievers will scale the image to the available viewport.
<svg viewBox='0 0 7200 7200' ... >
You may want to try Opera SVG Viewer to preview multiple svg files at once.

If you use a custom css browser extension such as Stylus, you can set up a CSS style for overflow on the root element, which should be <svg>:
:root {
overflow:auto !important;
}
This is pretty harmless for any html page but you can have it only apply to .svg urls via the url regex filter:
^.*[.]svg$
Now with this in place, opening an svg in a new tab will apply the style and allow you to scroll around. Zooming in and out should automatically adjust scrollbars.

Related

IE9 - 11 SVG backgrounds are blurry

This is only happening in Internet explorer. I am looking for a solution. I read that ie rasterizes background images or something just like older firefox versions but what are the solutions? Im so desperate. I dont want to serve an inline img image only because of IE.
This is seriously limiting. All other browsers render the SVG 99% the same and accurately.
Use inline image SVGs. If you are concerned that the resource is download by browsers other than IE then use javascript media queries
I've found that deleting the width and height attributes of the svg root (in the svg file itself) helps a little, but not always. You will want to make sure viewBox is defined to retain the aspect ratio.

D3.js Unable to get map zooming to work in Webkit browsers

I have a map where clicking an area to zoom in works in FireFox, but not in Chrome, Opera and Safari.
The map can be viewed at http://tcan.ca/content/tcan-neighbourhood-members
Anyone have suggestions about what can be causing this?
You can't use transformations directly on the <svg> element in webkit -- and even on other browsers, it won't always do what you expect.
A top-level <svg> element is positioned on the webpage as an HTML object (similar to a <div>). Transformations that apply to it are interpretted as HTML/CSS transformations. The CSS transformation syntax is still not finalized and webkit browsers only support a prefixed -webkit-transform version.
Rather than deal with multiple transformation syntaxes, add a <g> element inside your <svg>, append all your graphical content within the <g>, and then declare your SVG transformations on the <g>. It will work in all the browsers that support SVG.

SVG fonts in Firefox other than serif and sans-serif?

I am using fonts in an embedded SVG file rendered in Firefox (v26, "Nightly" and future versions). Other than the two fonts serif and sans-serif, what else is available?
My SVG is generated in Adobe Illustrator. Any font-family names I specify only render correctly in Safari and Chrome and I cannot use outlines as a workaround, as I will be annotating the SVG with dynamically-generated label text.
Other than using outlines, what is the process for annotating SVG documents with custom text elements, such that they will render correctly in Firefox?
On making your SVG render pretty fonts
It is entirely possible for Firefox to present SVG text in a custom font. For example, it can be done as follows:
<svg>
<style>
#import url(http://fonts.googleapis.com/css?family=Varela+Round);
text { font-family:Varela Round, sans-serif; }
</style>
<text y="20">I will appear in a custom font</text>
</svg>
This fiddle demonstrates the usage to some extent. Note that in jsfiddle the CSS is included as an HTML style sheet, not directly in the CSS.
The following can be used as a data URL, i.e. you may copy an paste it directly into the address bar. It demonstrates using #import from the SVG directly.)
data:text/html, <svg><style>#import url(http://fonts.googleapis.com/css?family=Varela+Round);text { font-family:Varela Round, sans-serif; }</style><text y="20">I will appear in a custom font</text></svg>)
(Of the current popular browsers, only Firefox supports data URLs in the address bar. Also if you change the data's MIME to image/svg+xml it won't work in Firefox.
In a comment on the previous answer to this question, Robert Longson also shared a link demonstrating an imported font using <link rel=stylesheet. Note that some of the fonts on that page are rejected by Firefox for technical reasons which I don't understand. However, almost all of them work.
Regarding the politics around SVG Fonts
SVG Fonts is a branch of the SVG spec which deals with defining your font in an SVG file. This is totally different to using a font in an SVG file, which I have outlined above.
Mozilla's position on the SVG Font spec, as I understand it, is that the only benefit to SVG fonts is that you can define your font by hand in a text editor. Others have expressed similar opinions. This is why Mozilla have concentrated on WOFF.
The current state of importing web fonts is such that, to achieve cross-browser/device compatibility, you have to provide multiple different font formats. This is unfortunate, but hardly the end of the world in my opinion.
Unfortunately for you, Mozilla has indefinitely postponed SVG font implementation to focus on WOFF. In fact this bug was even labeled on Bugzilla as "RESOVLVEDWONTFIX". Here is the link for MDN and the link on Bugzilla.
Admittedly I do not know enough about SVG Font to know if the CSS #font-face element will work and I also saw reference to Openfont.

Is it possible to make the iFrame of a Colorbox adaptive?

I made an adaptive theme with Drupal 7.22, which works very fine. Unfortunately the size of the iFrame's opened by Colorbox are not adaptive.
To open them, I do the following:
<a class="colorbox" href ="http://mydomain.tld?width=800&height=700&iframe=true">Link</a>
But the width and height properties are hard-coded. How can I specify different values for the width and height properties based on the browser aperture/screen definitions?
For example, all screens which have a width between 0 and 1024px should have a colorbox iFrame with the following properties:
width=800px
height700px
and all screens which have a resolution greater than 1024px should have a colorbox iFrame with the following properties:
width=500px
height400px
Do you have any suggestion on how to make these adaptive?
Take a look at jRespond:
https://github.com/ten1seven/jRespond
that might be the easiest way to accomplish what you are looking for.

SVG isn't always sharp

The SVG logo on this site doesn't look sharp on every zoom level. I read once, that SVG is just sharp on a multiple of its original size. But when I rightclick on the graphic and display it alone (without an img tag around it), it looks sharp on every possible zoom. There is no width or height given to the image.
It appears that Firefox renders the SVG to an image when referenced via an <img> tag. Use an <object> tag
I believe the issue is in Firefox.
Try to set the image width to 100% and height to the actual height of the SVG and this will solve the issue.
For Instance.
img{width:100%;
height:xxpx; /* Where 'xx' is the value of the image height in pixels */
}
Hope this Helps.

Resources