You are here:

Adobe Illustrator/SVG pattern issue with firefox

Advertisement


Question
pattern issue
pattern issue  
converting via adobe illustrator EPS file to SVG which contain pattern. I don't get the expected result when i open this SVG in Firefox although its works normally on Google chrome.

and here is the code:

<pattern  x="-195.767" y="505.764" width="42.226" height="42.227" patternUnits="userSpaceOnUse" id="SVGID_1_" viewBox="0.147 -42.227 42.226 42.227" overflow="visible">
<g>
   <polygon fill="none" points="0.147,0 42.373,0 42.373,-42.227 0.147,-42.227      "/>
   <g>
       <polygon fill="none" points="0.147,-42.227 0.147,0 42.373,0 42.373,-42.227          "/>
       <line fill="none" stroke="#7F7F7F" stroke-width="0.5" x1="0" y1="-40.115" x2="42.52" y2="-40.115"/>
       <line fill="none" stroke="#7F7F7F" stroke-width="0.5" x1="0" y1="-31.67" x2="42.52" y2="-31.67"/>
       <line fill="none" stroke="#7F7F7F" stroke-width="0.5" x1="0" y1="-23.225" x2="42.52" y2="-23.225"/>
       <line fill="none" stroke="#7F7F7F" stroke-width="0.5" x1="0" y1="-14.779" x2="42.52" y2="-14.779"/>
       <line fill="none" stroke="#7F7F7F" stroke-width="0.5" x1="0" y1="-6.334" x2="42.52" y2="-6.334"/>
       <line fill="none" stroke="#7F7F7F" stroke-width="0.5" x1="0" y1="-35.893" x2="42.52" y2="-35.893"/>
       <line fill="none" stroke="#7F7F7F" stroke-width="0.5" x1="0" y1="-27.448" x2="42.52" y2="-27.448"/>
       <line fill="none" stroke="#7F7F7F" stroke-width="0.5" x1="0" y1="-19.002" x2="42.52" y2="-19.002"/>
       <line fill="none" stroke="#7F7F7F" stroke-width="0.5" x1="0" y1="-10.557" x2="42.52" y2="-10.557"/>
       <line fill="none" stroke="#7F7F7F" stroke-width="0.5" x1="0" y1="-2.111" x2="42.52" y2="-2.111"/>
   </g>
</g>

<pattern  id="SVGID_2_" xlink:href="#SVGID_1_" patternTransform="matrix(1.366 -1.366 -1.366 -1.366 5463.3882 -24086.0156)">
</pattern>

   <path fill="url(#SVGID_2_)" stroke="#231F20" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
   M219.217,110.146c0-59.729-48.405-108.133-108.133-108.133C51.355,2.013,2.949,50.418,2.949,110.146
   c0,59.611,48.406,108.133,108.135,108.133C170.812,218.279,219.217,169.759,219.217,110.146L219.217,110.146z"/>

and attached is a screenshot left is chrome, right is firefox;

Am I do something wrong or this is a bug in firefox. could anyone help?

Answer
Hi Hussam,

SVGs unfortunately are not supported on all browsers. Please make sure you have updated your Firefox to the latest version - it's not an issue with your SVG file, it has to do with browser compatibility. Unless you need to scale this in your webpage, I would export this out of Illustrator as another format, perhaps GIF.

Thanks

Kevin

Adobe Illustrator

All Answers


Answers by Expert:


Ask Experts

Volunteer


Kevin Stohlmeyer

Expertise

I am an Adobe Certified Instructor, Adobe Community Professional and Adobe Freelance Professional. I travel nationally speaking on Adobe Creative Suite applications, including Illustrator and design. I can answer questions about Adobe Illustrator version CS1 through the all-new Creative Cloud.

Experience

I am an Adobe Certified Instructor for Adobe Illustrator and have been teaching this software in college/higher education and for an Adobe Authorized Training Center since 2000. I have been an active user of Adobe Illustrator as a professional graphic designer since 1994. I am also the author of the Adobe Illustrator Certified Expert Exam. I am a published author for Adobe Inspire Magazine, writing articles on Creative Suite applications including Photoshop, Illustrator and the Adobe Touch apps.

Organizations
Adobe Freelancers Program Adobe Influencers Program Milwaukee Adobe Users Group AIGA National Association of Photoshop Professionals C2 Graphics Productivity Solutions

Publications
Adobe Inspire Magazine Adobe.com Photoshop User Magazine Layers Magazine

Education/Credentials
BA - Graphic Design Adobe Certified Instructor - Photoshop, Illustrator, InDesign, Acrobat Adobe Community Professional - Adobe Creative Suite

Awards and Honors
Member, Adobe Influencers Program and Adobe Freelancer Member Spotlight, National Association of Photoshop Professionals, November 2011 Runner-Up, The Next Adobe Photoshop Evangelist contest, 2010, 2011 Runner-Up Layers Magazine Design Contest

Past/Present Clients
Harley Davidson, Reader's Digest, GE Medical Division, Kohl's Corporate, Bon-Ton/Boston Stores, Cramer-Krasselt, Marquette University, AIGA, Mattel/American Girl, Photoshop World

©2016 About.com. All rights reserved.