Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • March 10, 2017 at 9:39 am #758766
    snitt

    Two issues with SVG.

    Logo in header only show when I scale down screen to mobile view. On larger screens nothing shows.
    When I add SVG as an image. Nothing shows. not on mobile, not in larger screens.

    I have tried adding code to functions manually, also tried both safesvg and svg support pluging. All have the same issue, so I¨m thinking its something with the theme.

    March 10, 2017 at 3:16 pm #758940
    Guenni007

    you have allways to set a width (or heights) rule for svgs – otherwise WP will give them a 1px size!

    f.e.

    .logo img {
width: 350px;
height: auto
}

    the reason why it works on responsive case is that on that moment the logo gets a size rule from enfold theme settings.

    have you got a link to your site?

    March 11, 2017 at 7:19 am #759290
    Rikard

    Hi @snitt,

    Did you try the suggestion posted by @guenni007 and did you have any luck with it?

    Best regards,
    Rikard

    March 13, 2017 at 1:11 pm #759975
    snitt

    Thanks. This works great for logo in header, but what if I want to use svg as an “image” on a page.

    I tried these two ways.
    Adding this code I found to function.

    function fix_svg_thumb_display() {
  echo '
    td.media-icon img[src$=".svg"], img[src$=".svg"].attachment-post-thumbnail { 
      width: 100% !important; 
      height: auto !important; 
    }
  ';
}
add_action('admin_head', 'fix_svg_thumb_display');

    I also tried adding this to quick css

    svg {width: 100%; height: auto;}

    I added link to page in first post.

    March 13, 2017 at 3:26 pm #760037
    Guenni007

    well i think the code snippet above should only do the job for admin area – dashboard media preview.
    btw. there is a spacebar missing between td and . media-icon.
    but i think the code could be a bit changed to:

    function fix_svg_thumb_display() {
echo '<style type="text/css">

    td .media-icon img[src$=".svg"] { 
      width: 100% !important; 
      height: auto !important; 
    }

</style>';
}
add_action('admin_head', 'fix_svg_thumb_display');

    showing the svg attachment isn’t the backend site it is in frontend (wp_head influenced)

    function fix_svg_attachment_display() {
echo '<style type="text/css">

    .attachment img[src$=".svg"] { 
      width: 100% !important; 
      height: auto !important; 
    }

</style>';
}
add_action('wp_head', 'fix_svg_attachment_display');
    March 13, 2017 at 3:39 pm #760041
    Guenni007

    As an advanced layout builder element there is a 100% (to the outer container) definition. So no need to say something.
    But if you insert the svg (as img) via standard editor you can change the sizes in text mode of tinymce.

    March 14, 2017 at 2:09 pm #760721
    snitt

    That’s what I though too. But when I place same logo file as used in the header in an avia img box nothing shows on the page.
    This is not critical. Most important is to have logo in header work as desired.

    Do you know how I can left align logo when the header is minimized/scrolled?
    I think I need to set a smaller size on logo once header is minimized to make this happen, but I don’t know what code I should use to change this.

    Thanks for helping out.

    March 14, 2017 at 7:47 pm #760937
    Guenni007

    on svg you can open the svg file in a good text editor (sublime text on Mac OSX or notepad++ on PC)

    on top of your svg there is some code like this:

    <svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="110 33 400 120" enable-background="new 110 33 400 120"  xml:space="preserve">

    you can manually enter : preserveAspectRatio=”xMinYMin meet” (just before xml:space so there is:

    <svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="110 33 400 120" enable-background="new 110 33 400 120" preserveAspectRatio="xMinYMin meet" xml:space="preserve">

    this code offers you the influence how the svg shrinks. xMinYMin means it goes to the top left corner
    if you like to center the logo in x-direction : xMidYMin means it centers on shrinking in x-direction but it goes to top etc
    xMaxYMax – goes to right bottom corner of the surrounding container.

    March 14, 2017 at 8:27 pm #760961
    Guenni007

    by the way placing the svg to the image box – give the image box a custom class and f.e. svgimg

    than place in your quick css:

    .svgimg .avia_image {
    height: auto;
    width: 350px;
}

    or 100%

    May 3, 2018 at 3:52 pm #950881
    dror2us2

    Hey guys, I’m having the same problem (SVG logo doesn’t appear on large screens) and I dont understand code that well.
    Could you tell me where to place the code snippet to make this work?

    Thanks

    May 4, 2018 at 12:03 pm #951567
    Victoria

    Hi dror2us2,

    Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?

    Best regards,
    Victoria

    May 5, 2018 at 1:26 pm #952106
    dror2us2

    Thank you Victoria, right after my post I tried setting a rule for width and height for the SVG logo, and it worked.
    Thanks for the fast reply.

    May 7, 2018 at 4:35 am #952466
    Rikard

    Hi,

    Great, thanks for the feedback. Please let us know if you should need any further help on the topic.

    Best regards,
    Rikard

    May 7, 2018 at 12:29 pm #952649
    dror2us2

    Thank you, that’s all for now. Thanks again for the quick reply.

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.