I'm using the Sketch software to build svg images to use in my android project. I'm having an issue with this one:
As you can see, the picture is ok and I checked the previews with Chrome and the Macos preview.
When I try to import the SVG in Android Studio the import preview is the following:
The subtracted circles inside the filled ones are gone. The import log messages me this:
In ic_percent.svg:
WARNING# line 10 We don't scale the stroke width!
WARNING# line 11 We don't scale the stroke width!
WARNING# line 12 We don't scale the stroke width!
WARNING# line 13 We don't scale the stroke width!
Does anyone know what is happening with my import?
I had similar issues when importing a .svg file made with Inkscape. It seems that some attributes are just not supported by the Android Studio importer.
The easiest way I found is to use svg2android. Not sure how it handles Sketch .svg but it seem to do the trick with files from Inkscape.
If someone else uses Inkscape don't forget to set your document size to your vector size "File -> Document Properties..." or just edit it directly in the file with a text editor.
Short answer: Ungroup everything you have in your SVG, make sure you don't have layer transforms and resave.
Long answer: Every stroke has width, it is numeric and encoded in SVG as
<path style="...;stroke-width=1.5;...">
At the same time every stoke is an object and objects can be grouped for the sake of editing ease. Groups are objects also, thus can be grouped so that groups can have nested groups.
Whats most important, groups have transformations, that are created when you move or scale or rotate grouped objects (e.g. paths) in your vector editor and that are encoded in SVG as
<g transform="...">
<path .../>
<path .../>
<some other object .../>
</g>
The "transform" attribute can be either a "matrix" or a sequence of linear transformations like "rotate" or "translate" or whatever, it does not matter in this case. All transforms of a group are applied to all contained object properties.
So group "transform" is applied to the contained path "stroke-width".
This is exactly what Android Studio does not support.
The solution is simple: Ungroup all the groups and force vector editor to apply transformations to the real geometrical objects. Then export again.
There still will be groups in the resulting file, that's fine - it's the only way to store layers in SVG. Just make sure layers in the file do not have transforms applied. Most probably you will not have to do anything for this, as vast majority of vector editors can only have visual and not geometry effects on them.
That's it.
Example of a piece of very simple file that will break Android Studio import. This is just two random strokes, grouped and scaled with mouse:
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<g
id="g821"
transform="matrix(0.74621726,0,0,1.3160501,48.238048,-10.434556)">
<path
inkscape:connector-curvature="0"
id="path815"
d="m 58.964284,69.458334 31.75,-5.291667"
style="fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
inkscape:connector-curvature="0"
id="path817"
d="M 77.863093,95.160713 112.6369,77.017855"
style="fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
</g>
The same piece after ungrouping that is fine for Android Studio:
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<path
style="fill:none;stroke:#000000;stroke-width:0.26219916px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 92.238214,80.976091 115.93061,74.011993"
id="path815"
inkscape:connector-curvature="0" />
<path
style="fill:none;stroke:#000000;stroke-width:0.26219916px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 106.34083,114.80171 132.28965,90.9248"
id="path817"
inkscape:connector-curvature="0" />
</g>
Here's how:
Open your .svg in sketch
Select that missing Circle in Page List. In my case, it's looks like this.
Click Fills (Gear shaped icon) and change Even-Odd to Non-Zero
Open Layer menu -> Path -> Reverse Order
Export the shape back to .svg format
Convert that .svg to Vector Drawable (from Android Studio or 3rd party tools)
That's it! Credit to #dineshbob medium blog
In Inkscape you can select lines a.s.o. that use stroke width and convert them to path before saving as sgv:
I had the same problem when I exported my vector graphics in svg format.
But Android studio can also handle the psd file format when importing vector graphics. After I set the file format to psd during export, the import into android studio worked fine for me.
I had the same problem using inkscape. Not sure if would work with Sketch, but is simple to try it out.
Just start a new Sketch project and paste your vector from the previous one. This solved my problem with the same situation on Inkscape. It seems some extra properties used during creation of the picture are not welcome in android's import tool.
Related
I have a couple of SVG images that I want to paste together to make a big graphic.
First, let me present you with my problem:
This is one of the symbols, placed in a grid. The grid is, for convenience, with unit-less 100 distance from line to line.
If I render it to pdf, it looks like this instead:
Those symbols have a completely wrong size for the grid (They are much larger, mostly) and they are badly positioned if I use them raw.
So my treatment is, I scale them and position them correctly in relation to the grid, then I make a rectangle around them that encompasses them completely and makes the symbol-handling easier.
That rectangle is perfectly fitting to my grid. In my case, for this symbol, it is a rectangle encompassing the six squares around the symbol. I did this, because the symbol can be rotated by the user and the rotation is done from symbol point of view; any transform after the rotation is from the rotated point of view. So I made an attempt to de-couple the transformations by wrapping them.
Finally, I move the rectangle to a user-defined place and rotate it as the user wants to have it. So far, so well, it was extensively tested in google chrome and works reliably. In Google Chrome.
Now I wanted to translate it to pdf for printing. And after conversion, the symbol is placed in the wrong position.
I am guessing (as I made several tests) that the error is somewhere in my header.
Could someone of you please check the headers that I add and tell me if and where I did something wrong? For example there is a view box starting at -100, otherwise the symbol would be cut and wrongly placed. Is there another way to "rectangularize" any arbitrary symbol? Or is it generally the wrong way to do these kinds of things?
Here are the changes that I added around the svg symbol code. Innermost changes are applied first.
<!-- move the rectangle to the right place and rotate it as the user wishes-->
<g transform="translate(300.0, 400.0) rotate(0,150.0, 50.0) ">
<!-- a rectangle around the symbol, perfectly fitting to the grid-->
<svg x="0" y="0" width="300.0" height="200.0" version = '2.0'
xmlns="http://www.w3.org/2000/svg" viewBox="-100.0 0 300.0 200.0">
<!-- scaled to correct size, placed inside the grid as it should be -->
<g transform = "translate(-10.000, 73.614) scale(0.229,0.229)" >
<!-- original symbol, wrong size -->
<svg width="523" height="230" version = '2.0' xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 523 230">
.... lots of svg paths here ...
</svg>
</g>
</svg>
</g>
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.
Filling and stroking a circle with the same color and a stroke-width exceeding a certain size, produces a strange transparent region “between” the two paint regions. What is going on?
This is happening in both Chrome and Firefox, so it may be to spec, but I couldn’t find any language in the spec about this behavior.
Fiddle
<svg viewBox="0 0 300 300">
<circle cx="100" cy="100" r="8"
stroke="#000" stroke-width="40"
fill="#000"/>
</svg>
Produces this rendering:
As Robert Longson noted, the issue shows up when a stroke overlaps itself in such a way that it creates a donut-hole when you convert the stroke outline to a separate path (depending on the winding-order / fill-rule calculations).
The gap between the fill and stroke in your particular example is caused by the "inside" edge of the stroke extending across the entire fill region and out the other side.
It gets really weird when you have dashed strokes, as shown in the examples from Tavmjong Bah's discussion article.
This is, unfortunately, neither according to the SVG spec nor against the spec. Instead, the spec at this point of time has left the matter undefined.
SVG working group discussion is here.
At this point, WebKit, Blink, and Firefox on Mac/Android draw strokes with cut-outs, using the Skia graphics library or Apple's CoreGraphics.
IE/Edge and Firefox on Windows/Linux just draw the total stroke, without cut-outs, as do Inkscape and Illustrator and most PDF-rendering software (the PDF spec itself is non-committal).
Everyone I've discussed this with agrees that the cut-outs are a sub-optimal result. But with so many browsers using rendering engines that do it this way, the SVG working group wasn't willing to make the more-intuitive stroke behavior a strict requirement. So instead, the SVG 2 spec has a warning-to-authors with a sample figure:
At this point, the best prospect for making a change would be to file issues (or contribute code) on the Skia library. If it was changed, that puts pressure on Apple to update to match, and the SVG spec would be able to make it official.
I found that adding stroke-linecap="round" style="stroke-dasharray: 1000" fixes the issue by introducing virtual dashes
<svg viewBox="0 0 300 300">
<circle cx="100" cy="100" r="8"
stroke="#000" stroke-width="40"
fill="#0F0" stroke-linecap="round" style="stroke-dasharray: 1000" />
</svg>
It's an artifact because the stroke width is so big it crosses the centre of the circle. It shouldn't happen but it's easily avoided by increasing r and decreasing the stroke-width.
I've tried to make some hexagon-based map in SVG. Unfortunately, there are white spaces between fields.
I've disabled fields' borders (stroke="none stroke-width="0"), rounded all floating points to integers and made sure that hexagons have common points (no space between them). It didn't help.
Two screenshots shows same SVG in different magnifications http://imgur.com/GLiJs,gi3pt
Source code is here: http://pastebin.com/hqwTKW4M (remember to change extension to svg, after download).
Setting shape-rendering property to 'crispEdges' for all hexagons (or group of them) solves this issue. E.g.
<polygon
points="0,90 45,12 135,12 180,90 135,168 45,168"
fill="green" stroke="none" stroke-width="0"
shape-rendering="crispEdges" />
http://www.w3.org/TR/SVG/painting.html#ShapeRenderingProperty
I have one or more path elements inside a g element that I am scaling to fit inside a grid rectangle. The transform is applied to the g element. My transform works in that all the points end up at the right places, but I discovered that I have to adjust the stroke-width of the path to get a readable line.
The problem is that if the scale involves a large shift in the aspect ratio, I end up with some segments of the path being heavier weight than others, depending on their orientation.
Here is a typical transform that my code computed:
scale(0.1875, -0.010397820616798718) translate(-1149000, -96174)
In this case I end up changing the stroke-width from 9px to about 48px. Segments close to the horizontal end up thin, those close to the vertical are thick.
Is there any easy way to end with all the segments with the same rendered width?
Have you looked at setting the vector-effect attribute to non-scaling-stroke?
<line vector-effect="non-scaling-stroke" stroke="black" stroke-width="5"
x1="32" y1="50" x2="32" y2="350"/>
http://www.w3.org/TR/SVGTiny12/painting.html#NonScalingStroke
UPDATE
The best solution I can think of is to manually transform the coordinates of your path.
vector-effect="non-scaling-vector" is not consistently supported. My versions of Firefox and Safari do not support it, but my Chrome browser does.
In the SVG standard there is no way of specifying a transformation for the stroke independantly. (A stroke-transform attribute would be nice - like the windows GDI+ drawing system, where a Pen object has it's own local transformation).
Until this changes, the best solution I can think of is to manually work out the coordinates of your path - that is the svg has no transform elements; the coordinates are already transformed.