4 ms·

I'm curious: what's the main use-case for this functionality? Particularly given it's a lossy transformation, I can't think of any situation where I'd use this

I'm curious: what's the main use-case for this functionality? Particularly given it's a lossy transformation, I can't think of any situation where I'd use this.

armandososa 10y ago
Super useful if you need to inline some SVG in a react app. I recently learned about the benefits of inline SVG thanks to front-end center and started using similar to OP's tool for that.
jowiar 10y ago
It seems useful if you have an SVG that has been produced in a vector graphics editor that you want in a JSX format to make pieces interactive using React.
kennethkl 10y ago
seems to just change double quotes to single. find and replace. I don't notice any other difference. oh, noticed `0.5` turn into `.5` and `black` turn into `#000`. not sure how that will make it more JSX compatible
- desdiv 10y ago
  >oh, noticed `0.5` turn into `.5` and `black` turn into `#000`. not sure how that will make it more JSX compatible That's for minimizing code size. In both of your examples one byte is shaved off. Arguably this is a case of premature optimization though. For production, the Closure compiler will do a far better job at it. For development, you won't notice the difference of shaving off a few kilobytes.
amk_ 10y ago
React supports these SVG attributes: https://facebook.github.io/react/docs/dom-elements.html#all-supported-svg-attributes https://facebook.github.io/react/docs/dom-elements.html#all-... accentHeight accumulate additive alignmentBaseline allowReorder alphabetic amplitude arabicForm ascent attributeName attributeType autoReverse azimuth baseFrequency baseProfile baselineShift bbox begin bias by calcMode capHeight clip clipPath clipPathUnits clipRule colorInterpolation colorInterpolationFilters colorProfile colorRendering contentScriptType contentStyleType cursor cx cy d decelerate descent diffuseConstant direction display divisor dominantBaseline dur dx dy edgeMode elevation enableBackground end exponent externalResourcesRequired fill fillOpacity fillRule filter filterRes filterUnits floodColor floodOpacity focusable fontFamily fontSize fontSizeAdjust fontStretch fontStyle fontVariant fontWeight format from fx fy g1 g2 glyphName glyphOrientationHorizontal glyphOrientationVertical glyphRef gradientTransform gradientUnits hanging horizAdvX horizOriginX ideographic imageRendering in in2 intercept k k1 k2 k3 k4 kernelMatrix kernelUnitLength kerning keyPoints keySplines keyTimes lengthAdjust letterSpacing lightingColor limitingConeAngle local markerEnd markerHeight markerMid markerStart markerUnits markerWidth mask maskContentUnits maskUnits mathematical mode numOctaves offset opacity operator order orient orientation origin overflow overlinePosition overlineThickness paintOrder panose1 pathLength patternContentUnits patternTransform patternUnits pointerEvents points pointsAtX pointsAtY pointsAtZ preserveAlpha preserveAspectRatio primitiveUnits r radius refX refY renderingIntent repeatCount repeatDur requiredExtensions requiredFeatures restart result rotate rx ry scale seed shapeRendering slope spacing specularConstant specularExponent speed spreadMethod startOffset stdDeviation stemh stemv stitchTiles stopColor stopOpacity strikethroughPosition strikethroughThickness string stroke strokeDasharray strokeDashoffset strokeLinecap strokeLinejoin strokeMiterlimit strokeOpacity strokeWidth surfaceScale systemLanguage tableValues targetX targetY textAnchor textDecoration textLength textRendering to transform u1 u2 underlinePosition underlineThickness unicode unicodeBidi unicodeRange unitsPerEm vAlphabetic vHanging vIdeographic vMathematical values vectorEffect version vertAdvY vertOriginX vertOriginY viewBox viewTarget visibility widths wordSpacing writingMode x x1 x2 xChannelSelector xHeight xlinkActuate xlinkArcrole xlinkHref xlinkRole xlinkShow xlinkTitle xlinkType xmlns xmlnsXlink xmlBase xmlLang xmlSpace y y1 y2 yChannelSelector z zoomAndPan Anything else needs to be stripped out - mostly stuff like meta data with ":" in the tag.
balajmarius 10y ago
hey lucideer, I think it's usefull when you had to work with SVG sprites + React. Converts the attributes not supported in React (xlink:href, fill-rule, etc.) to valid React attributes and also in case you have inline styles (eg. style="margin-left:20px") this tool will generate a Javascript object from that style ({marginLeft: 20}), which is valid React inline style. Also, I think it's super usefull in case you had to use an inline SVG exported from Sketch or AI
- lucideer 10y ago
  I quickly tested it before commenting above and it stripped and discarded quite a lot of my SVG code (hence my comment on lossy transformations). I've just looked into React's SVG support and it is poor and hacky (e.g. it hardcodes two ns prefixes rather than supporting aliased uris as per the SVG spec.), so I guess my main objection should really be with React's (lack of) decent SVG support rather than with this tool. That said though, I've used SVG in React quite a lot myself, but I've always opted for SVG as strings or external static resources rather than inlined vdom objects - this has worked fine for me as I would think of SVG as a display format so it has never needed granular access according to application state in my experience.

I'm curious: what's the main use-case for this functionality? Particularly given it's a lossy transformation, I can't think of any situation where I'd use this.

armandososa 10y ago

Super useful if you need to inline some SVG in a react app. I recently learned about the benefits of inline SVG thanks to front-end center and started using similar to OP's tool for that.

jowiar 10y ago

It seems useful if you have an SVG that has been produced in a vector graphics editor that you want in a JSX format to make pieces interactive using React.

kennethkl 10y ago

seems to just change double quotes to single. find and replace. I don't notice any other difference. oh, noticed `0.5` turn into `.5` and `black` turn into `#000`. not sure how that will make it more JSX compatible

desdiv 10y ago
>oh, noticed `0.5` turn into `.5` and `black` turn into `#000`. not sure how that will make it more JSX compatible That's for minimizing code size. In both of your examples one byte is shaved off. Arguably this is a case of premature optimization though. For production, the Closure compiler will do a far better job at it. For development, you won't notice the difference of shaving off a few kilobytes.

amk_ 10y ago

React supports these SVG attributes: https://facebook.github.io/react/docs/dom-elements.html#all-supported-svg-attributes https://facebook.github.io/react/docs/dom-elements.html#all-... accentHeight accumulate additive alignmentBaseline allowReorder alphabetic amplitude arabicForm ascent attributeName attributeType autoReverse azimuth baseFrequency baseProfile baselineShift bbox begin bias by calcMode capHeight clip clipPath clipPathUnits clipRule colorInterpolation colorInterpolationFilters colorProfile colorRendering contentScriptType contentStyleType cursor cx cy d decelerate descent diffuseConstant direction display divisor dominantBaseline dur dx dy edgeMode elevation enableBackground end exponent externalResourcesRequired fill fillOpacity fillRule filter filterRes filterUnits floodColor floodOpacity focusable fontFamily fontSize fontSizeAdjust fontStretch fontStyle fontVariant fontWeight format from fx fy g1 g2 glyphName glyphOrientationHorizontal glyphOrientationVertical glyphRef gradientTransform gradientUnits hanging horizAdvX horizOriginX ideographic imageRendering in in2 intercept k k1 k2 k3 k4 kernelMatrix kernelUnitLength kerning keyPoints keySplines keyTimes lengthAdjust letterSpacing lightingColor limitingConeAngle local markerEnd markerHeight markerMid markerStart markerUnits markerWidth mask maskContentUnits maskUnits mathematical mode numOctaves offset opacity operator order orient orientation origin overflow overlinePosition overlineThickness paintOrder panose1 pathLength patternContentUnits patternTransform patternUnits pointerEvents points pointsAtX pointsAtY pointsAtZ preserveAlpha preserveAspectRatio primitiveUnits r radius refX refY renderingIntent repeatCount repeatDur requiredExtensions requiredFeatures restart result rotate rx ry scale seed shapeRendering slope spacing specularConstant specularExponent speed spreadMethod startOffset stdDeviation stemh stemv stitchTiles stopColor stopOpacity strikethroughPosition strikethroughThickness string stroke strokeDasharray strokeDashoffset strokeLinecap strokeLinejoin strokeMiterlimit strokeOpacity strokeWidth surfaceScale systemLanguage tableValues targetX targetY textAnchor textDecoration textLength textRendering to transform u1 u2 underlinePosition underlineThickness unicode unicodeBidi unicodeRange unitsPerEm vAlphabetic vHanging vIdeographic vMathematical values vectorEffect version vertAdvY vertOriginX vertOriginY viewBox viewTarget visibility widths wordSpacing writingMode x x1 x2 xChannelSelector xHeight xlinkActuate xlinkArcrole xlinkHref xlinkRole xlinkShow xlinkTitle xlinkType xmlns xmlnsXlink xmlBase xmlLang xmlSpace y y1 y2 yChannelSelector z zoomAndPan Anything else needs to be stripped out - mostly stuff like meta data with ":" in the tag.

balajmarius 10y ago

hey lucideer, I think it's usefull when you had to work with SVG sprites + React. Converts the attributes not supported in React (xlink:href, fill-rule, etc.) to valid React attributes and also in case you have inline styles (eg. style="margin-left:20px") this tool will generate a Javascript object from that style ({marginLeft: 20}), which is valid React inline style. Also, I think it's super usefull in case you had to use an inline SVG exported from Sketch or AI

lucideer 10y ago
I quickly tested it before commenting above and it stripped and discarded quite a lot of my SVG code (hence my comment on lossy transformations). I've just looked into React's SVG support and it is poor and hacky (e.g. it hardcodes two ns prefixes rather than supporting aliased uris as per the SVG spec.), so I guess my main objection should really be with React's (lack of) decent SVG support rather than with this tool. That said though, I've used SVG in React quite a lot myself, but I've always opted for SVG as strings or external static resources rather than inlined vdom objects - this has worked fine for me as I would think of SVG as a display format so it has never needed granular access according to application state in my experience.