ehm, right now I'm trying to vectorize and old logo my friend did for a club at my uni. I have the logo as .ai and find a converter to svg.
When I open that converted svg logo in my browser it appears great.
Here's a print screen of how it looks in firefox.
Also, when i open the logo on Inkscape, it also appears great.
Here's how it looks on Inkscape.
Nevertheless, when I open it on Corel Draw, it is a complete mess.
How it looks in corel.
I found that some of the objects are causing some trouble, the stars and some other things. If i delete them, the logo appears a little bit more understandable in corel, but still doesn't look great. Logo with less details.
I'm trying to use the logo to make some banners, posters and things like that, and the printer can't use that version of the logo because they use corel.
Does someone know why is that happening and how to correct the issue?
I'm gonna left the .ai as the .svg in case somebody need them to undestand the issue. ai and svg.
Related
Please can someone help?
I need to drag and drop small spot circles representing room sensors onto a floor Layout rendered inline (binary) into the browser.
How can I achieve this.
Download the SVG, add points via SVG program (for example InkScape), upload the SVG again.
If the SVG is displayed completely as a file in your browser (i.e. the URL ends with ".svg" or something like that), so the browser handles the drag and drop, which probably isn't implemented to work with SVG in any way, as your browser is probably not layed out to edit SVG files.
If the SVG is embedded somehow into an HTML site you might have a chance if you use JavaScript or something alike to edit the SVG in the browser, implying you can change the JavaScript on that site because you can access it or have a plugin for that.
Oh yeah, maybe there is a plugin for your browser to edit SVGs, who knows?
I've been doing some stuff in Illustrator and I have a problem with saving a project in to SVG file that I open in webbrowser, It just looks different.
And it hapens only in SVG, if I save it to PDF or PNG it looks how it should.
What am I doing wrong?
That's how it looks in Ai
That's how it looks in webbrowser
Here's a link to download rar file with .ai and .svg that I have.
Since all browsers render it the same way, it would seem likely that this is a bug in the AI SVG export filter.
To me it looks like you are applying a blend mode ("Overlay" perhaps?) to the white parts on top of the image. That effect ought to be reproducible using SVG filters, but perhaps AI's exporter doesn't support that yet.
If you are using an "odd" blend mode, try changing it, or reproducing the effect another way.
Individual pixel control needed in identical svg conversion is not possible. SVG creates only specific shapes. The Ai app conversion seems to use opacity to provide the color shades. You could probably tweek opacity and add some svg filters to improve the svg.
Print your design in a . pdf file instead of exporting it directly. Then open the printed .pdf back in Illustrator and export the .svg from this one, it shoud do the trick.
I'm trying to make 3 different circles to my website. I don't want to insert it as a graphic/image file. So I've been trying to achieve it using CSS3, but I can't really work my fingers around it.
What will it look like?
I have uploaded a picture of what I'm trying to achieve at: www.sp34k.com/etc/circles.jpg
I can't really show the code I've been trying to use to achieve this, as it all looks totally weird and nothing floats currectly.
What I've tried
What I've tried is to make 3 circles with position absolute and then use % (percentage) to determine the width of the colored parts, but I can't twist my mind around how it should be set up.
Any suggestions is appreciated,
Mike
Here is a simple try of me to achieve the effect you want:
DEMO
edit: css-only solution
It can be easily animated with javascript or keyframes. Arbitrary content would go into the inner div. To change the percentage, simply adjust the angle of the pseudo-elements.
With a little more effort this could be easily refined I guess;)
Note: the transform has the webkit-prefix, so it works only in chrome/safari - to see it in firefox or other browsers, you need to change the prefix.
P.S. I will animate it when I'm home from work.
Good one by Christoph but he is using SASS/SCSS which are comparatively slow then normal CSS because they have to be converted to CSS before browser render it so I have have a different Solution for you
try this fiddle
I've placed an image on top of a div. I'm trying to blend the image into the div (The div is a solid color). In Google Chrome, it looks great! The colors blend perfectly. In IE 7, however, the colors show a hard line even though they should be the same color! After some examination (a print screen put into paint.net to check the actual RGB values), IE 7 is actually lightning up my image.
The blend has to look seamless. Google Chrome was fine with this thus far. Any ideas why IE 7 wont display the color right?
The two browsers are using different rendering engines. There are minor differences between them in how they render graphics, particularly jpegs.
The differences are minor but unavoidable.
Most of the time it goes unnoticed; it only makes an appearance in cases like yours when you try to position it against an element with a solid background colour that is supposed to be the same.
You may be able to resolve the issue by using a different image format. Try saving the image as a PNG. PNGs tend to be rendered more accurately between the browsers than jpegs, so that might be enough to solve your problem.
If that doesn't solve your problem, you could try using PNGs alpha transparency feature to produce an image with a fade to transparent at the edge, and then overlap the background colour behind it. This will definitely give you a smooth transition, but is a bit more technical, so harder to achieve. It will also give you problems with older versions of IE (IE6 for sure, I think you'll be okay with IE7), as they had some major bugs with PNG transparency. (If this is an issue for you, there are work-arounds for this; google IEPNGFix for more)
Our (beloved) designer keeps creating PNG files with transparent backgrounds for use in our applications. I'd like to make sure that this feature of the PNG works in "older" browsers as well. What's the best solution?
edits below
#mabwi & #syd - Whether or not I agree about the use of a PNG is not the point. This is a problem that I need to solve!
#Tim Sullivan - IE7.js looks pretty cool, but I don't think I want to introduce all of the other changes an application. I'd like a solution that fixes the PNG issue exclusively. Thanks for the link.
IE PNG Fix 2.0 which supports background-position and -repeat!
Also paletted 8-bit PNG with full alpha transparency exist, contrary to what Photoshop and GIMP may make you believe, and they degrade better in IE6 – it just cuts down transparency to 1-bit. Use pngquant to generate such files from 24-bit PNGs.
I've found what looks to be a very good solution here: Unit Interactive -> Labs -> Unit PNG Fix
update Unit PNG is also featured on a list of PNG fix options on NETTUTS
Here are the highlights from their website:
Very compact javascript: Under 1kb!
Fixes some interactivity problems caused by IE’s filter
attribute.
Works on img objects and background-image attributes.
Runs automatically. You don’t have to define classes or call
functions.
Allows for auto width and auto height elements.
Super simple to deploy.
IE7.js will provide support for PNGs (including transparency) in IE6.
I've messed with trying to make a site with .pngs and it just isn't worth it. The site becomes slow, and you use hacks that don't work 100%. Here's a good article on some options, but my advice is to find a way to make gifs work until you don't have to support IE6. Or just give IE6 a degraded experience.
Using PNGs in IE6 is hardly any more difficult than any other browser. You can support all of it in your CSS without Javascript. I've seen this hack shown before...
div.theImage {
background : url(smile.png) top left no-repeat;
height : 100px;
width : 100px;
}
* html div.theImage {
background : none;
progid:DXImageTransform.Microsoft.AlphaImageLoader(src="layout/smile.png", sizingMethod="scale");
}
I'm not so sure this is valid CSS, but depending on the site, it may not matter so much.
(it's worth noting that the URL for the first image is based on the directory of the stylesheet, where the second is based on the directory of the page being viewed - thus why they do not match)
#Hboss
that's all fine and dandy if you know exactly all the files (and the dimensions of each) that you're going to be displaying - it'd be a royal pain to maintain that CSS file, but I suppose it'd be possible. When you want to start using transparent PNGs for some very common purposes: a) incidental graphics such as icons (perhaps of differing size) which work on any background, and b) repeating backgrounds; then you're screwed. Every workaround I've tried has hit a stumbling block at some point (can't select text when the background is transparent, sometimes the images are displayed at wacky sizes, etc etc), and I've found that for maximum reliability I'll have to revert to gifs.
My advice is to give the PNG transparency hack a shot, but at the same time realise that it's definitely not perfect - and just remember, you're bending over backwards for users of a browser which is over 7 years old. What I do these days is give IE6 users a popup on their first visit to the site, with a friendly reminder that their browser is outdated and doesn't offer the features required by modern websites, and, though we'll try our best to give you the best, you'll get a better experience from our site and the internet as a whole if you BLOODY WELL UPGRADED.
I believe all browsers support PNG-8. Its not alpha blended, but it does have transparent backgrounds.
I might be mistaken, but I'm pretty sure IE6 and less just don't do transparency with PNG files.
You sort of are, and you sort of aren't.
IE6 has no support natively for them.
However, IE has support for crazy custom javascript/css and COM objects (which is how they originally implemented XmlHttpRequest)
All of these hacks basically do this:
Find all the png images
Use a directx image filter to load them and produce a transparent image in some kind of format IE understands
Replace the images with the filtered copy.
One thing to think about is Email clients. You often want PNG-24 transparency but in Outlook 2003 with a machine using IE6. Email clients won't allow CSS or JS tricks.
Here is a good way to handle that.
http://commadot.com/png-8-that-acts-like-png-24-without-fireworks/
If you export your images as PNG-8 from Fireworks then they'll act the same as gif images. So they won't look shitty and grey, transparency will be transparency but they won't have the full 24 bit loveliness that other browsers do.
Might not totally solve your problem but at least you can get part way there just be re-exporting them.
I might be mistaken, but I'm pretty sure IE6 and less just don't do transparency with PNG files.
I have two "solutions" that I use. Either create GIF files with transparency and use those everywhere, or just use them for IE 6 and older with conditional style sheets. The second really only works if you are using them as backgrounds, etc.