White space around svg in Chrome/Custom fonts in svg

lolli · Postby **lolli** » Tue Jul 28, 2015 9:54 pm

Hello,
I have two questions regarding svg created in Inkscape:
1. I have created an image that is supposed to be used as a tile for a repeating background for my website(only repeat-x). It works with Firefox, but with Chrome (only on mobile devices though!) you see a px "line" of the image also repeating-y. This also happens when I use this image as png. Also, there is a big white space between each repeating tile, even though there is no such space in the document at all. It fits right to the canvas. How can I get rid off both these things?
2. I would like to use a custom font in my svgs, which works again when the svg is viewed from a computer that has this font installed; however, when the svg is viewed frm another computer, the person will see Arial instead. Can I somehow integrate my custom font so that everyone can see it?

Thank you so much for any help!

Postby **brynn** » Wed Jul 29, 2015 10:41 am

I can answer #2. You can convert the text to path (Path menu > Object to Path), so that it's all the same for everyone.

I think there is a way to code the page (HTML), so that it serves up the font for everyone who views it with their browser. But I don't know how to do it. However converting to path will do the trick too.

For #1, we may need to see the SVG file. Although you say the same thing happens when you export to PNG? Could it be something with the HTML?

It might help us to see the SVG file. And a screenshot of the improper results, when it's applied to the webpage. But without further info, my guess would be the problem is in how the HTML is coded.

lolli · Postby **lolli** » Wed Jul 29, 2015 8:31 pm

Hi,
thank you so much for your answer! I actually figured out #1. Apparently the svg did have some empty space on the side and at the bottom, even though the px size was exactly the size of the drawn elements, but I looked at the xml and the height and width did not match 100% the px size. There were some odd decimals and when I changed them, it worked.
However, I am facing another problem: I have a fixed feedback button on my website that is attached to the right side of the brwoser window. I created this button and added a shadow to it and this shadow has a 2.4 blur. Becaue of that, I can't resize the canvas to eaxctly the width of the button and when I upload it on the website, the button is not directly attached to the brwoser window but also has a small white space on the right. How can I delete this?
I have attached the image of the button.

Thanks in advance!

Postby **brynn** » Wed Jul 29, 2015 9:43 pm

The white space on the right must be because there's space between the button and the right side of the page. You should be able to have it flush to the right edge, without affecting the blur/drop shadow.

To make it work with the drop shadow, you'll have to make the page wide enough on the left, and bottom, that it doesn' cut off the shadow anywhere. It could be flush at the top too.

If you're using the SVG, it should be finished after you fix the page size, etc. If you're exporting as PNG, be sure and use either Export PNG Image (in 0.91) or Export Bitmap (before 0.91). If you use Save As cairo.png, you'll get a white background.

lolli · Postby **lolli** » Wed Jul 29, 2015 10:28 pm

Hi,
theproblem is that I cannot resize the canvas to exactly the red border! The blur shadow prevents it. When I select both elements(the red square and the drop shado underneath) and then go to doument properties and choose resize to selection, it will always show this white space on the right, since the drop shadow has the blur that takes up this space, even if you don't see the blur there.

Postby **brynn** » Thu Jul 30, 2015 3:27 am

Hhhmm, there are some strange things in this file. It's showing me 4 or 5 text objects, via Tab, but I can't see them. There's no bounding box, but there are elements in the XML Editor. But there are no actual characters associated with the text elements.

Hah, if I use Tab to select the invisible text objects, and switch to the Text tool, I can type, and then I see text!

But anyway, if the text is ok for you, then let's move on. There are 2 things probably causing the problem. 1 is that the gray drop shadow has a 0.99 px white stroke. Remove that stroke.

2, you can use clipping to fix the rest of the problem.

Before you do that though.... I notice that none of the sides except the right are quite straight, in case you might want to fix it. Ok, here are the steps to fix the problem with clipping (after you fix the sides, if you want to).

-- Duplicate the red object only
-- Give it some odd color, just so you don't confuse it later (say neon green)
-- Make it partially transparent, just to help you see what you're doing, because it has to be on top of everything
-- Do NOT touch to node in the top, right corner!
-- Select the bottom 3 nodes (drag selection box with the Node tool)
-- Shift + Down Arrow
-- Select the left 5 nodes
-- Shift + Left Arrow
-- Make sure the green object is on top of everything else
-- Deselect everything, then Ctrl + A (select all)
-- Object menu > Clip > Set
-- Now resize page to fit selection

That should work

lolli · Postby **lolli** » Thu Jul 30, 2015 4:24 am

Hello,
oh, I did not notice that there was a stroke around the blur! I removed it and it helped. Unfortunately the clipping did not do anything

not sure why. There still is a tiny white space left...

Postby **brynn** » Thu Jul 30, 2015 5:10 am

If the clipping didn't do anything.....well, at first, it doesn't look like it does anything. But then when you change the page to fit the selection, you can see that it did change something.

From what I can see, it looks like there might be a tiny space left. It could be related to that weird text issue. Let me t ry without the text....brb

Postby **brynn** » Thu Jul 30, 2015 5:18 am

Oh, I think I see the problem. That right edge isn't perfectly vertical. Try this.

Unclip and delete the clipping path
Select the top, right node, and set the X value to 52.000.
Select the bottom, right node, and set the X value to 52.000.
That will make the line perfectly vertical
Now recreate the clipping path, and clip again, and that should eliminate the line

If there still is a line, I would still go back and check the text. Make sure that none of the text goes beyond 52.000 for the X, on the right side.

Lazur · Postby **Lazur** » Thu Jul 30, 2015 12:10 pm

How about this one?:

buttonII.svg: (4.12 KiB) Downloaded 212 times

lolli · Postby **lolli** » Thu Jul 30, 2015 8:01 pm

Thanks to both of you! Just wondering though: The new button is over 200kb, even when I compress it through an svg compressor. The old one was under 10kb...is there a way to make the file smaller since I need to use it on the internet?

Lazur · Postby **Lazur** » Thu Jul 30, 2015 8:26 pm

I deleted the texts I could not see, probably the reason for the shrinking (from 4,27 kB to 4,12 kB).

You can save to plain svg which is smaller, and change some settings in the preferences (Shift+Ctrl+P) at the svg save format.

10 kB and 200 kB?
Maybe you have unused defs stored -try vaccum defs/clean file in the file menu.

lolli · Postby **lolli** » Thu Jul 30, 2015 8:33 pm

Hey, well the text that you could not see was actually text I had deleted in order to upload the image. I thought that once you delete elements, they are completely deeted! Is this not true?
On my site of course I need to have the text on, this is why I had added it onto your image again. I also converted the text to path since it is a custom font. So suddenly now, even when cleaned and saved as a plain svg, it is over 200kb, and the old one WITH text was under 10kb, this is what is weird...

Lazur · Postby **Lazur** » Thu Jul 30, 2015 9:24 pm

That's how it is.

If it's a text, the shape of the characters is stored in a font file outside your svg, installed on your os, but when you convert to path, "all" the data will be "merged in".

lolli · Postby **lolli** » Thu Jul 30, 2015 9:34 pm

Oh, too bad...I tried simplifying the path and this reduced it quite a bit. But whenever I change any settings like reducing the decimal numbers or absolute coordinates, or savings as optimzed svg, it will ruin the image.

Postby **brynn** » Sat Aug 01, 2015 1:40 am

lolli wrote:Thanks to both of you! Just wondering though: The new button is over 200kb, even when I compress it through an svg compressor. The old one was under 10kb...is there a way to make the file smaller since I need to use it on the internet?

Why is it so important that the button file be so small? Do you have limits to how much you can upload to your site? Are you charge a fee according to how much you upload? If that's the case, you might search around for a better deal. Some web hosts are really awful like that, but it's possible to find more reasonable hosts, depending on what you're alreay using.

I don't have time today, but I'd be glad to try and remake the button, with the smallest size possible. Although Lazur's likely is already as small as it could be.

(Using Simplify isn't appropriate on such an already small image/file.)

lolli · Postby **lolli** » Sat Aug 01, 2015 3:29 am

Hi,
no, I am not charged per file size, my hosting is really good, but I am using a lot of images on the site and every kb counts. For example, I also have 6 button like images , and each one of them was 700kb before optimizing, whereas the png version was 7kb each...so I am trying to keep sizes as small as possible. Since I am very new to Inkscape, I don't know and understand all the things to optimize though...

lolli

Postby **brynn** » Sat Aug 01, 2015 3:59 am

Well, this topic is more about performance issues. But most performance issues are a result of a large file size. So maybe some of those tips can help.

In that message, I suggested using Layers liberally, so that parts of the image can be hidden when you don't need to see it. However, I suppose each new layer does add some data to the file, and therefore makes it larger by a very small amount (a couple of short lines of code). So if you used a lot of layers, you could select all and Group everything (after the image is completely finished). That will dump it all into 1 layer. Then use File menu > Clean Up Document.

Your biggest friend is File menu > Clean Up Document. Use it after you finish each image. It gets rid of any data in the file that isn't being used in the image. (For versions before 0.91, it's called "Vacuum Defs".

This is a read-only archive of the inkscapeforum.com site. You can search for info here or post new questions and comments at inkscape.org/forums

This is a read-only archive of the inkscapeforum.com site. This feature is no longer available.

InkscapeForum.com

White space around svg in Chrome/Custom fonts in svg

White space around svg in Chrome/Custom fonts in svg

Re: White space around svg in Chrome/Custom fonts in svg

Re: White space around svg in Chrome/Custom fonts in svg

Re: White space around svg in Chrome/Custom fonts in svg

Re: White space around svg in Chrome/Custom fonts in svg

Re: White space around svg in Chrome/Custom fonts in svg

Re: White space around svg in Chrome/Custom fonts in svg

Re: White space around svg in Chrome/Custom fonts in svg

Re: White space around svg in Chrome/Custom fonts in svg

Re: White space around svg in Chrome/Custom fonts in svg

Re: White space around svg in Chrome/Custom fonts in svg

Re: White space around svg in Chrome/Custom fonts in svg

Re: White space around svg in Chrome/Custom fonts in svg

Re: White space around svg in Chrome/Custom fonts in svg

Re: White space around svg in Chrome/Custom fonts in svg

Re: White space around svg in Chrome/Custom fonts in svg

Re: White space around svg in Chrome/Custom fonts in svg

Re: White space around svg in Chrome/Custom fonts in svg

Who is online