I'm struggling to find a way of printing a wide SVG image. This is a common problem so let me explain my specific problem.
The image is wide and so I need to tile it (poster fashion) across about 5 or 6 A4 sheets (actual count not important). My first problem is that the default Print dialog in my Firefox or Chrome browsers, under Windows, do not allow me to scale the image height to fit the page height while also spreading the image width across multiple pages.
Someone else suggested using Inkscape to convert to PDF format as the Print dialog in Acrobat reader has better support for tiling. Well, it does, but Inkscape does not deal with embedded images (e.g. PNG or JPG). Worse still, it generates huge square error markers saying "Linked image not found" all over. These are also preserved in the generated PDF which makes it useless.
There are lots of online tools that claim they can convert SVG to PDF. I tried a handful and none coped with embedded images. They were simply discarded.
So, I'm basically looking for any route to print a wide SVG image onto a horizontal series of pages, and that preserves any embedded PNG/JPG images.
[Edit]
Some of the online results:
zamzar -- images discarded
cloudconvert -- simply used inkscape
convertio -- best of the bunch, but opacity ignored on images
online-convert.com -- images discarded
pdfresizer -- simply used inkscape
freefileconvert -- simply used inkscape
onlineconvertfree -- failed with basic SVG
pdfaid -- massively failed with basic SVG
[Edit 2]
Here are a few lines of code that show one of the embedded internet-based PNG references. This one is designed to provide a faint background image underneath the subsequent SVG shapes. Hence the opacity of 12%.
<defs>
<pattern id="img2" width="50%" height="100%" >
<image xlink:href="https://clipartart.com/images/tree-branch-clipart-png-4.png" x="0" y="0" width="50%" height="100%" />
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#img2)" fill-opacity="0.12" />
I've had time to experiment with this further (and so wasting printer paper by the shed-load).
1) Inkscape deliberately does not support Internet image references (e.g. http) for "security reasons". As mentioned, it puts a horrible error marker in the view of the loaded SVG and I have found no way to edit it out. Hence, it gets saved in any PDF version.
2) If I download local copies of the images and change their http:// references to equivalent file:/// (yes, 3 slashes) then they are accepted.
3) This allows a PDF copy to be saved, but if any of the images had an opacity (e.g. a background image) then that gets lost and it is full opacity in the PDF. This may be a conversion issue or a PDF limitation -- I do not know.
4) Since I then have local copies of the images, they can be changed to implement any faintness required "at source".
5) The Acrobat Print dialog has a Poster option for tiling the pages of a wide image. Ensuring no 'cut marks' or 'labels' are added, you can set a 'Tile scale' that keeps the height within one page, and it will spread it over as many pages as necessary for the width. On the basis of the scaling, it selects landscape/portrait itself and ignores any selection of your own.
So, problems? Yes, the Acrobat 'Overlap' setting is a mystery, leaving a thin white margin on either one or both of adjoining sheets in the output. I have not been able to correlate the width of this margin, or the appearance on one or both sheets, with this setting.
Via the Preferences button, I can get to the normal printer preferences dialog, where I can request 'Borderless printing'. Rather than fixing the issue, this just makes the correlations even more mysterious.
Related
I'm trying to make some text fit into a specific width on my SVG, I noticed that the text-length attribute gets me almost there, but it has the problem of stretching the text in case it's too short.
Either spacingAdnGlyphs and spacing are not involved in the behavior I'm looking for, they define how to stretch the text. What I want is to prevent the stretching from happening at all if it's not required in order to make it fit its container. So a short text should not be altered.
<text
length-adjust="spacingAndGlyphs"
text-length="380"
>
Hello
</text>
Could anyone suggest a way to make my text preserve its original aspect ratio if it's not exceeding the width of my container?
I have an independent SVG image with no filling (fill="none").
I would like to fill it with color, but when I change fill="none" to fill="blue" for all paths, my file becomes a blueish mess:
Source SVG file: https://ufile.io/yaj33
Your SVG is not "clean". It is made up of several hundred open (ie. not closed) path elements. If you want to be able to fill your drawing easily, you'll need to make an SVG with a smaller number of closed shapes, perhaps one for the head, one for each arm and leg, and two open paths for the eyes.
I am trying to get the path data points from an SVG file I am creating for an image-map. The code should look like the below after I save to an SVG file:
<svg height="210" width="400">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
However, when saving and/or exporting the file, I am getting a bunch of gibberish instead of data points and it looks like the below:
<image id="image4125" opacity=".5" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAO4AAAEUCAYAAAAskArpAAAACXBIWXMAABYlAAAWJQFJUiTwAAAA GXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAJYNJREFUeNrsnQd8FNX2x6dsb9nN 7qb3SrqU0ATpIcEnIA9QKRZEUB/6pINYEFFqDH8bwkOeFJGm0t5LqIbewZBAIKQXAtlNdtO37z83...
I have tried using both Adobe Illustrator CC and Inkscape. Any idea how to extract the correct data points using either of these programs, or why I am getting gibberish instead of the data points? I have followed multiple instructions on different websites (including this thread on StackOverflow).
Right now I can get data points to make a rectangle of each area, but the rectangular data points overlap and conflict with other. I am trying to create a polygon path and extract the data points so each shape is unique. Any help is much appreciated.
After a week of research and many tears shed, I finally found the solution. To create SVG images with the path data included when using Adobe Photoshop and Illustrator CC, follow these instructions:
Cut up your image using Photoshop with layers of the image. Save the file as .psd.
Open .psd file in Illustrator. You will then be able to select the different images you cut up in Photoshop.
Select a single image. Open up image trace and trace the image using the Silhouettes preset option.
Click on the Expand button (you will notice the silhouette of your image now has points around the edges; these are your data points).
Open up the color palette. Make the top color white with a red line through it (this removes the fill of the silhouette). Then make the bottom color black (this traces over the trace line between the points).
Finally, on the Attributes panel, you will want to set the image map to Polygon (you can add a new to the attribute below if wanted).
After you repeat these steps over each image layer, you will then save the file as an .svg file with the following settings:
• SVG Profiles: SVG 1.1
• Subsetting: None
• Image location: Link
• Preserve Illustrator Editing Capabilities: unchecked (this will reduce the size of your file for better performance.
• CSS Properties: Style Elements
• Output fewer tspan elements: checked
• Use textPath elements for the text on path: checked
• Responsive: checked
After the file is saved with these options, you will then be able to open the .svg in Sublime, WebStorm, TextEdit, etc., and the path data will be included in the HTML. It is a beautiful sight! Hope this helps whoever is seeking the answer to my same problem!
I have an SVG I am building with Javascript. I load in a large SVG file, break it apart into pieces all drawn with paths, and place each element in my page. I'm only using these SVGs as masks for other images I am loading. Basically my structure is like the following.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="26.750152587890625 10.117172241210938 197.24969482421875 348.1596221923828" width="197.25" height="348.16015625">
<mask id="designMask" maskContentUnits="objectBoundingBox">
<g id="CutContour1bg">
<path d="[my path coords]" style="fill:#FFFFFF;">
</g>
</mask>
<image href="http://myImage.jpg" style="mask: url(#designMask);" width="800px" height="800px" x="26.75" y="10.1171875">
</svg>
This renders the image being masked by my SVG perfect, in FF, IE9, Chrome, Safari 5.1 (desktop). In mobile safari however, the image does not render properly. I trace out coords of the mask, they are all correct. In FF I can see the SVG load (all black) then disappear as it becomes the mask. (I am waiting until the design is loaded, then wrap my <g> with <mask> since FF has an issue looking for the mask before the content is loaded.
This tells me the mask's position is exactly where it needs to be, but the maskContentUnits are not. They remain in the top left corner instead of the object's bounding box, like I'm telling it. I can barely see part of the image in the mask, so the mask units are correct, but I cannot get the maskContentUnits to work or be read in mobile safari.
Has anyone ever seen this issue, or any idea how to correct it? I hate having this work everywhere except mobile safari, as it is meant to mostly work on mobile... which defeats its not purpose haha.
Thanks!
I haven't found a way to make maskContentUnits work properly in mobile safari yet, I'm pretty sure it's just not recognized yet like other browsers. But I figured out a 'hack' to make the example work.
The issue is, the mask area resides in the top left corner of the browser, rather than of the svg object being used as the mask. So if you have an svg in the middle of your page, the image being masked will not follow the same positioning.
The way I found for it to work, is, I wrapped the svg inside a div with the same width as the svg, and modify the position of the div instead of the svg. This way the mask is technically still in the 'top left' corner, but of the div rather than the offset position of the svg.
If anyone finds a better way, to make maskContentUnits render proper in mobile safari, I'd like to hear it!
i want to acheive the effect on this page using SVG. As you can see it uses a series of PNG transparent overlays when the user mouses over a polygonal hotspot drawn on a product.
What i want to achieve is the same thing with SVG, but without messing about with creating a load of PNGs, so that when the user mouses over an area the transparent shape (with link on it) appears over the top. The SVG shape would be built from a set of coordinates exactly as a polygonal hotspot would on an image map.
So i guess my first question is, can this be done with plain old SVG or do i need to use something like Raphael to achieve this? Never seen this effect before with SVG so if anyone has an example like that would be very useful.
Thanks in advance.
There are several ways to get this effect with plain old SVG. Probably the simplest is to use CSS within the SVG. For example:
<style>
.overlay:hover
{
opacity: 0.5;
}
</style>
<svg>
<a xlink:href="http://www.wherever/you/want/to/link/to.com">
<path class="overlay" d="Coordinates of your shape..." />
</a>
</svg>
I've written about various other methods at:
http://www.petercollingridge.co.uk/data-visualisation/mouseover-effects-svgs
Yes it can be done with SVG only, with or without javascript.
One way to get the effect would be to overlay a white semi-transparent path on top of the image that you want to whiten. Another way would be to use an SVG filter to process the image directly, similar to what I've done here or here to recolor a PNG (view page source and feel free to reuse that in any way you like).
You'll want to make use of the 'pointer-events' property most likely. Here's an example showing how to detect mouse-events on the fill and/or stroke of an svg shape, even if the shape is invisible.