1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

SVG images

Discussion in 'XenForo Suggestions' started by Adam Howard, Dec 6, 2012.

  1. Adam Howard

    Adam Howard Well-Known Member

    Propose the XenForo update their image format to SVG for better mobile web display and overall visual display.

    Also support that style properties can accept svg values.
     
    jauburn, Kintaro, RobinHood and 3 others like this.
  2. HWS

    HWS Well-Known Member

    Yeah, in 1.2. ;)
     
  3. cclaerhout

    cclaerhout Well-Known Member

    I've just worked the last days with svg to try to update the breadcrumbs arrows with a vector graphic (create using the path element), it's working well but there's is an issue with background pattern. Over three breadcrumb items, the background image pattern is not display anymore. If I can't find why, I will release the addon with the svg option but without the svg pattern background.

    All this to say choosing SVG format might not be the best update to do even if it could be very attractive.
     
    jauburn likes this.
  4. cclaerhout

    cclaerhout Well-Known Member

  5. Adam Howard

    Adam Howard Well-Known Member

    If I remember correctly....

    There is a few things beyond a template edit. A few php file edits have things hard coded. XenForo would need to have a few less dependencies forced within the files and more toward the flexibility of the template for it to truly support the rendering.

    This is something we would need to see in another version. Unless people don't mind patching their own core files.
     
  6. cclaerhout

    cclaerhout Well-Known Member

    I've finally find how to use background patterns with svg graphics... That's not really easy. The code in jsfidle is correct.

    I give a detailed solution here because he could be helpful for some users

    Let's take this example (don't focus on those variables: {$svgHeight} & {$svgImgHeight} ; we don't care here) :
    HTML:
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="50" height="{$svgHeight}">
                    <desc><xen:comment>Svg Arrow Inner</xen:comment></desc>
                    <defs>
                            <pattern id="svg_breadcrumb_arrow_bk" height="{$svgImgHeight}" width="{$svgImgWidth}" patternUnits="userSpaceOnUse">
                                <image x="0" y="0" opacity="1" height="{$svgImgHeight}" width="{$svgImgWidth}" xlink:href="{$svgImgUrl}" />
                            </pattern>
                    </defs>
                    <g>
                        <path class="layer_color" d="M0,{$svgHeight} L0,0 L{$svgWidth},{xen:calc '{$svgHeight}/2'}Z"></path>
                            <path fill="url(#svg_breadcrumb_arrow_bk)" class="layer_background" d="M0,{$svgHeight} L0,0 L{$svgWidth},{xen:calc '{$svgHeight}/2'}Z" ></path>
                    </g>
                </svg>
    The "path fill" draws our graphic. If we want to use a pattern inside (a background) we need to link it to the proper pattern which is above inside the "pattern" tag using a "image tag". The image tag is using a "xlink:url" command ; more information about the xlink here:
    http://www.w3.org/TR/xlink/
    http://www.w3schools.com/xlink/xlink_reference.asp
    http://www.w3schools.com/xlink/xpointer_example.asp

    This simple code is working great... but only on XenForo index. After the page url will dynamically changed according to which page you're looking... and then this command "fill="url(/#svg_breadcrumb_arrow_bk)" will not work anymore.

    The solution seems to include the full url of the page being viewed before the #.
    For example:
    To get the pattern works inside this page url:
    Code:
    http://xenforo.com/community/forums/have-you-seen/
    The link must be:
    Code:
    fill="url(http://xenforo.com/community/forums/have-you-seen/#svg_breadcrumb_arrow_bk)"
    Now to get the pattern works inside this page:
    Code:
    http://xenforo.com/community/threads/svg-images.41864/#post-451301
    Code:
    fill="url(http://xenforo.com/community/threads/svg-images.41864/#svg_breadcrumb_arrow_bk)"
    If someone knows a better solution, it would be nice to share it.
     
    Jay likes this.
  7. cclaerhout

    cclaerhout Well-Known Member

    Ok, here is the easiest way to do it on XenForo:
    Code:
                            <path fill='url({$requestPaths.fullUri}#svg_breadcrumb_arrow_bk)' class="layer_background" d="M0,{$svgHeight} L0,0 L{$svgWidth},{xen:calc '{$svgHeight}/2'}Z" ></path>
    
    The template variable {$requestPaths.fullUri} will make it work... without any problem on Firefox & Chrome. On Opera there is one condition: the link of the image,
    {$svgImgUrl} in xlink:href="{$svgImgUrl}" must be the full path and not the relative path.

    This trick doesn't work on IE9...
     
  8. cclaerhout

    cclaerhout Well-Known Member

    The solution on IE9 is... to put nothing:

    Code:
    fill="url(#svg_breadcrumb_arrow_bk)"
    Still needs to test IE10...

    Edit: On IE10 both are working. And the IE10 compatibility mode for IE9 is working too whereas it should not. So I would need to use a conditional for IE9.
     
  9. cclaerhout

    cclaerhout Well-Known Member

    Here is the final solution with the help of this addon for the IE9 conditional
    HTML:
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="{$svgWidth}" height="{$svgHeight}">
                    <desc><xen:comment>Svg Arrow Inner</xen:comment></desc>
                    <defs>
                            <pattern id="svg_breadcrumb_arrow_bk" height="{$svgImgHeight}" width="{$svgImgWidth}" patternUnits="userSpaceOnUse">
                                <image x="0" y="0" opacity="1" height="{$svgImgHeight}" width="{$svgImgWidth}" xlink:href="{$svgImgUrl}" />
                            </pattern>
                    </defs>
                    <g>
                        <path class="layer_color" d="M0,{$svgHeight} L0,0 L{$svgWidth},{xen:calc '{$svgHeight}/2'}Z"></path>
                            <xen:set var="$svg_full_url">{xen:if "{$visitor.getBrowser.IEis} != 9", "{$requestPaths.fullUri}", ""}</xen:set>
                            <path fill="url({$svg_full_url}#svg_breadcrumb_arrow_bk) @magicbreadcrumb_arrow_normal.background-color" class="layer_background" d="M0,{$svgHeight} L0,0 L{$svgWidth},{xen:calc '{$svgHeight}/2'}Z" ></path>
                    </g>
                </svg>
    $svgImgUrl => must be a full url.
     
  10. cclaerhout

    cclaerhout Well-Known Member

    The Addon with those SVG graphics is here.
     
  11. tyteen4a03

    tyteen4a03 Well-Known Member

    With responsive design, please turn the sprites into vectors so they can stand the zoom in.
     
    Adam Howard likes this.

Share This Page