Create SVG Logo for Website using Illustrator

Hello Experts,

I have a few questions about creating an SVG logo from within Illustrator:

1.) My logo was created in Illustrator using CMYK colors (I chose the Print Profile when I initially created my logo which used the CMYK colors). How can I change those colors to RGB prior to saving my logo as an SVG?

2. ) What is the best method for creating an SVG Logo from within Illustrator and what settings should be used to create the SVG within Illustrator.
LVL 4
asp_net2Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dan CraciunIT ConsultantCommented:
Why do you want to use the SVG format?
For web PNG works without problems.
For compatibility with various graphic packages a PDF is better.

HTH,
Dan
0
asp_net2Author Commented:
Hi Dan,

I'm in the process of creating a Responsive Web Design and I want my logo to be SVG with a fallback of .png.
0
duttcomCommented:
I take it you weren't happy with the rather lengthy explanation I gave you last week. Good luck with your project.
0
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

asp_net2Author Commented:
@duttcom,

Yes, I was very happy with your answer as you can see the grade I gave. However, that question was in no relation to the detail that I need for creating .svg files. I'm looking for the best overall settings for saving in .svg. Also, I would like to know the best solution for placing an .svg file into a website.
0
duttcomCommented:
The point I was trying to make here was that the OP did not understand the fundamental nature of the software in question, and that by understanding the basic principles behind it, the question would therefore be answered. I could see from another question that they had not attempted to grasp my explanation at all and were still asking the same thing without understanding the flaw in their question in the first place.
0
MereteCommented:
asp_net2,
  SVG is always growing and with the continued advancement of web standards, SVG is is now very good format to use as it bypasses the problem of screen resolution with so many mobile devices.
If I may here is a fully explained guide that you'll find useful.
Far better than I could explain .
It covers Why is SVG Useful?/When Would I Use SVG?/Icons/Logos/Saving a File as SVG/Choose an Image/Convert to Outlines/Saving and from then on what options to choose.
SVG Files: From Illustrator to the Web
Hope it helps
Regards Merete
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
asp_net2Author Commented:
Hi Merete,

I'm looking at the link you supplied and it's full of information (Thank you!!).

However, one problem that I'm having is that my font that I used in Illustrator is not the same font when I use the svg on the website. My logo is fine but the font that I used for my company name is different. The only option that keeps my font the same from my Illustrator file to the web is if I choose the "Type" option as "Convert to outline". Why is this the only "Type" option that retains when using the svg on the web?
0
Dan CraciunIT ConsultantCommented:
That option converts the "Type" (or font, or characters) into curves. No font information is preserved, everything is a drawing and that will display properly on any SVG-aware application, regardless if the original font is available or not.
0
asp_net2Author Commented:
The type option "Convert to outlines" is the only option the retains the look of the font that I used for my logo in illustrator when I use the SVG on my website, but why is that though.

Why is this the only option that retains the look of my font? Is there another setting that I can use that may be better but also retains the look of my font? Also, using the type setting "Convert to outlines" will this allow me to modify parts of my logo using CSS?

Last but not least, which option to save on a website is best, save inline code generated from illustrator or save it to an HTML Img tag and if it gets saved to an HTML Img tag will it enlarge and shrink nicely compared to not being in an HTML Img tag.
0
MereteCommented:
It's built with XML, and a lot of unnecessary "stuff" is removed, giving a relatively light-weight file.
"Convert to outlines" will this allow me to modify parts of my logo using CSS?
Quote from my original LINK above,
Lastly, given these XML building blocks, the contents of an SVG file can be manipulated and styled just like any other element on a web page.
Parts within an SVG can be isolated, the colors can be changed, the stroke weight can be altered, the transparency, we can even apply certain filters (such as blurring), even animate - all through CSS and JavaScript.

and further down did you save svg as a profile?
They mean (more or less) the following:
SVG 1.0: The first (2001) incarnation of SVG
SVG 1.1: Pretty much the same as SVG 1.0, except that SVG 1.1 can be split into further sub-types, those being..
SVG Tiny 1.1: This is the first sub-type of SVG 1.1 and is optimized with the mobile web in mind.
 It's a very simple form of SVG, designed for "highly restricted mobile devices".
Tiny doesn't support gradients, transparency, clipping, masks, symbols, patterns, underline text, strike-through text, vertical text, or SVG filter effects.
SVG Tiny 1.1+: A slight development of SVG Tony 1.1, adding support for gradients and transparency.
SVG Basic 1.1: This is the second sub-type of SVG 1.1 and allows features for the more capable of mobile devices, such as smart phones.
 Basic doesn't support non-rectangular clipping and some SVG filter effects.
SVG Tiny 1.2: This was initially intended to be the next full specification for SVG, but ended up being a development of the Tiny sub-type.

If it helps add the above to this
Exporting SVG for the web with Adobe Illustrator CC
Many ways to export SVG
http://www.adobe.com/inspire/2013/09/exporting-svg-illustrator.html
0
asp_net2Author Commented:
Hi Merete,

As for my particular logo. What "Font Type Option" do you recommend that I use so that the font that I have for my logo looks the same on the website? I have tried numerous settings but the only setting that seems to work for my particular font that I'm using is the Font Type Option "Convert to Outlines".

Also, if I click on the button "More Options" I see additional settings that I didn't see in the article that you posted. So far, I have "Responsive" was checked automatically which is good because I'm creating a responsive web site but I was not sure if I should select any other additional options that are not selected by default. The only default option selected under "More Options" was responsive.
0
asp_net2Author Commented:
@merete,

I followed the tutorial exactly as it described and used the <object> tag since it was supported better than inline SVG and <img>. I even tried pasting the Inline SVG code and the same thing happens to all browsers except IE11. My 1st generation iPhone works fine though.

So, my website will ONLY show the SVG logo in IE11 but NOT in FF 30 and Chrome Version 36.0.1985.125 m. I'm using a Windows 8.1 Pro in case you need to know which OS.

This is my site that I setup for testing. http://dev.ocait.com
0
MereteCommented:
Thanks, I opened your web site link in my Chrome as this my default browser and immediately the svg logo downloaded as an internet explorer link
instead of opening your page with the logo embedded.
Ah I remember working on this logo with you.
When I click on that downloaded the svg logo blows out huge.
I am not professed in CSS or php or html language but it would seem to me that the scripts do not accurately set the svg size, how you embedded it does not reach Chrome either, is this using  html5?
As I have only little knowledge how CSS works so I googled
And it seems there is bug, looking under the tab known issues here
http://caniuse.com/#feat=svg-img
1.Chrome & Safari may show text using an incorrect font for SVGs with text using <img> (see WebKit bug 68090)

Method of displaying SVG images in HTML using <img>
http://caniuse.com/#feat=svg-img 
explained below
scroll down to
Using SVG as an <img>
and Browser support
http://css-tricks.com/using-svg/
svg-logo-downlods.JPG
Opening-svg-logo.JPG
0
asp_net2Author Commented:
@Merete,

Ok, now take a look at the site at http://dev.ocait.com. So, I was only able to get the versions of FF and Chrome as mentioned above to work IF I used inline SVG. I also added a .png file to compare the both on top of each other and it looks like at least from a desktop perspective using Windows 8 that .png has a better quality to it which really surprises me.
0
MereteCommented:
asp_net2
this is the update of what I see now, there two, one png and one svg
 looking good but interestingly they are the same size in Internet explorer 11 but the svg is bigger in Chrome and FF, maybe use png in those two and svg in IE 11, intrigueing how IE 11 handles Fonts than FF and Chrome, could be that Microsoft owns IE11?
Tested in FF/Chrome and internet explorer 11 windows 7
Updated-svg-in-chrome.JPG
updated-svg-FF.JPG
updated-svg-using-Internet-Explorer.JPG
0
asp_net2Author Commented:
Hi Merete,

I was able to figure out why the .svg logo was not appearing after I uploaded to my website. The problem had to do with GoDaddy blocking the IMAGE/SVG+XML MIME Type. I had to add that MIME type to my web.config file and it now displays the .svg logo.
0
MereteCommented:
Thank you asp_net2,  well done to have figured that out,
it's unreal how the safety measures are effecting everything, I'd say the GoDaddy put that inplace with the security threat concerns in images>IMAGE/SVG+XML MIME  how hackers can use this to put in code.
Just reading about those concerns
From Trend Micro critical warnings.
Another with the same concerns

Glad to see you resolved it
cheers
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Illustration Software

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.