willcm Posted November 18, 2012 Share Posted November 18, 2012 Does anyone know of a reliable module that will swap png images for svg images? I'm sick of fuzzy images on my ipad! Thanks Will 1 Link to comment Share on other sites More sharing options...
Radu Posted November 18, 2012 Share Posted November 18, 2012 Will, do you want it for admin stats? If yes, you can change your graphs engine from the settings section of Stats admin menu 1 Link to comment Share on other sites More sharing options...
willcm Posted November 18, 2012 Author Share Posted November 18, 2012 HI Radu, both the back end and front end - png images just don't cut it on the iPad's retina display. IMO all screens will be high def in the next 2 years so I want to be ahead of the game Link to comment Share on other sites More sharing options...
Radu Posted November 18, 2012 Share Posted November 18, 2012 I see, however png/jpeg images are just archived images with a limited resolution even if this is 1MB or 12MB. SVG as you stated is a vectorized approach that can scale infinitely Because the png/jpeg... image is just a representation of "something" with a limited number of px => the image can't be converted properly to svg. There are websites that offer online image to svg converters but as you can test for yorself it doesn't work the way you want. The solution I see is just use higher res images, the internet speed has increased tremendously and you can configure presta to use them properly. By the way please check your presta settings in Preferences->images there you have 2 settings: JPEG quality which needs to be 100 and PNG quality which needs to be 0 for best quality Link to comment Share on other sites More sharing options...
willcm Posted November 18, 2012 Author Share Posted November 18, 2012 Hi Radu, I think I may have confused you. I have vectors for all my png files, I was wondering if there was a module that would show the svg images for browsers that were capable and png for those that are not. So there's 2 elements to the module, 1 checking if browser is svg compatible and 2 displaying the relevant image dependent upon the outcome of the check. I can't believe more people dont use svgs, theyre much smaller in file size than their png/jpg/gif cousins and better quality. Thanks Will Link to comment Share on other sites More sharing options...
Radu Posted November 18, 2012 Share Posted November 18, 2012 I see, I don't know of such a module but technically it can be created, a new field to upload your svg file and display it in front end instead of the images if browser support it. For my curiosity, how do you created the svg files, what do they show? You are right few people use them, I use them for graphics only so me included Link to comment Share on other sites More sharing options...
willcm Posted November 18, 2012 Author Share Posted November 18, 2012 (edited) Hi Radu you can open edit and export using Adobe Illustrator - this xplains it a little more - http://quintaldesigns.com/articles/svg-files-in-adobe-illustrator stands for scalable vector graphic Basically they will be the default graphics file in the future, small, infinitely scalable without deteriorating and if you include text in them it can be found by search engines - no need for alt tags! So I just need someone to create the module Edited November 18, 2012 by willcm (see edit history) Link to comment Share on other sites More sharing options...
Radu Posted November 19, 2012 Share Posted November 19, 2012 I understand, I can try to see if I find the time to develop the module in my spare time, I will try to see how photographs can be converted in SVG 1 Link to comment Share on other sites More sharing options...
ALMAJ Posted March 18, 2014 Share Posted March 18, 2014 I understand, I can try to see if I find the time to develop the module in my spare time, I will try to see how photographs can be converted in SVG Any news on this? I'm also very interested Regards 1 Link to comment Share on other sites More sharing options...
magwalberg Posted February 27, 2016 Share Posted February 27, 2016 I´m also very interested in this! Does anyone have a smart solution to replace the low res .png logo with a .svg logo? 1 Link to comment Share on other sites More sharing options...
BoKr Posted July 15, 2016 Share Posted July 15, 2016 I am interested in using a SVG website logo in header, too. Link to comment Share on other sites More sharing options...
rocky Posted July 15, 2016 Share Posted July 15, 2016 It's simple to do. Just upload the logo.svg to your theme and then change the src in themes/default-bootstrap/header.tpl at around line 107 to link to the SVG file: <img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if isset($logo_image_width) && $logo_image_width} width="{$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"{/if}/> Link to comment Share on other sites More sharing options...
meip Posted March 11, 2017 Share Posted March 11, 2017 I have SVG files I would like to use instead of bitmap files for product illustrations, as well as logos. I am not interested in converting pictures to SVG's, other specialized software does that. Prestashop will not upload SVG files for product illustrations and/or use them. Is there a module or upgrade that will permit SVGs to be used as well as bitmap files? Link to comment Share on other sites More sharing options...
rocky Posted March 14, 2017 Share Posted March 14, 2017 I'm not aware of any modules or overrides that allow SVG product images. Changing the logo to an SVG is easy, but changing product images is quite difficult. Link to comment Share on other sites More sharing options...
mmontone Posted March 15, 2017 Share Posted March 15, 2017 Ambassadors, I need to put a svg logo on my footer, how can i do that? I can put the svg logo in the header, but in the footer it's not working, can you help me? my site: www.iivarlden.com.br Thanks! I'm not aware of any modules or overrides that allow SVG product images. Changing the logo to an SVG is easy, but changing product images is quite difficult. Ambassadors, I need to put a svg logo on my footer, how can i do that? I can put the svg logo in the header, but in the footer it's not working, can you help me? my site: www.iivarlden.com.br Thanks! Link to comment Share on other sites More sharing options...
rocky Posted March 15, 2017 Share Posted March 15, 2017 You'll need to be more specific. What code are you putting in header.tpl that isn't working in footer.tpl? Link to comment Share on other sites More sharing options...
mmontone Posted March 15, 2017 Share Posted March 15, 2017 You'll need to be more specific. What code are you putting in header.tpl that isn't working in footer.tpl? I'm not really sure.... Can you tell me how to change the png footer logo for a svg one? Link to comment Share on other sites More sharing options...
rocky Posted March 15, 2017 Share Posted March 15, 2017 I see you're using a module to add that footer logo. Unfortunately, I'm not familiar with that module, so I can't be specific. I would suggest uploading an SVG file to your server and then changing that module's TPL file to link to that SVG file. Link to comment Share on other sites More sharing options...
mmontone Posted March 15, 2017 Share Posted March 15, 2017 This is the tutorial that i take to change the header logo, but i cannot figure out why in footer i cannot... http://antonio-ventura.com/logo-in-svg-format/ Link to comment Share on other sites More sharing options...
rocky Posted March 15, 2017 Share Posted March 15, 2017 I don't think that's the right way to do it. I think you're better off adding the SVG URL to the <img> tag instead of trying to draw an SVG over the top of the PNG image. For example, on the website I created here, I use the following code: <img class="logo img-responsive" src="{$img_dir}logo.svg" alt="{l s='Logo'}" onerror="this.src='{$img_dir}logo.png'" width="143" height="123"> Then you put the logo.svg and logo.png files in the themes/<your_theme>/img directory. Adjust the image height, filenames and classes as necessary. Link to comment Share on other sites More sharing options...
mmontone Posted March 15, 2017 Share Posted March 15, 2017 I don't think that's the right way to do it. I think you're better off adding the SVG URL to the <img> tag instead of trying to draw an SVG over the top of the PNG image. For example, on the website I created here, I use the following code: <img class="logo img-responsive" src="{$img_dir}logo.svg" alt="{l s='Logo'}" onerror="this.src='{$img_dir}logo.png'" width="143" height="123"> Then you put the logo.svg and logo.png files in the themes/<your_theme>/img directory. Adjust the image height, filenames and classes as necessary. Works perfect!!! Thanks! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now